JS チートシート

自分用にJavaScriptのチートシート作ろうと思います
少しづつ加えていくつもりです

特徴

  • 動的型付けである   →変数に型を指定しない

  • インタプリタ言語である   →コンパイルを意識する必要がない

  • 関数が第1級オブジェクトである   →変数への代入や参照など、通常操作が可能

  • オブジェクト指向言語である

文法(初級)

基礎

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 //コメント

/*
複数行
*/

alert("hello, world");//ダイアログ表示
console.log("hello, world");//コンソール出力

//変数宣言
var a;
var b, c;
var d = 1;
var e = 2, f = 3;
var g, h = 4;

//オブジェクト
var obj = {
x: 1,
y: true
};
obj.y; //=> true

//プロパティの操作
var obj = {};
obj.x = 1;
x in obj; //=> true
delete obj.x;
x in obj; //=> false

//配列
var lang = ["php", "ruby", "perl"];
lang[0]; //=>php
lang[1]; //=>ruby
lang[2]; //=>perl


//演算子
//+, -, *, /, % 数値の演算子
//++, --. 単項演算子
//<, >, <=, >=, ==, != //比較演算子

! false; //=> true 論理否定演算子
true && true; //=> true &&演算子
true || false //=> true ||演算子
(5 > 3) ? "true" : "false" ; //=> "true" 条件演算子

var hoge = "my name" + "is"; //文字列連結
hoge += "kazuki"; //複合代入
hoge; //=>"my name is kazuki"

//関数
function sum(a, b){
return a + b;
}
sum(1, 2); //=> 3

式と文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//if文
if(1 < 2){
console.log("true");
} else {
console.log("false");
} //"true"と表示される

//switch文
switch(2){
case 1: console.log(1); break;
case 2: console.log(2); break;
default: console.log(3); break;
} //2と表示される

//while文
var i = 0;
while(i < 5){
console.log(i ++);
} //0から4までが表示される

//do-while文
var i = 0;
do {
alert(++i);
} while(i < 5); //0から4までが表示される

//for文
for(var i = 0; i < 5; i++){
console.log(i);
} //0から4までが表示される

//for-in文
var obj = {a: 1, b: 2, c: 3};
for(var key in obj){
console.log(key + ":" + obj[key]);
} //=> 「a:1」「b:2」「c:3」と表示される

文法(中級)

文字列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// lengthプロパティ
" kazuki".length //=> 6

// ダブルクォーテーションのエスケープ
"a\"aa"; //=>"aa"a"

// 文字の取得
for(var i = 0, str = "abc"; i < str.length; i++){
console.log(str[i]);
} //「a」「b」「c」と表示される


// 文字列の置換
"JavaScript".replace("Script", ""); //=>"Java"
"JavaScript".substring(4, 10); //=>"Script"
"JavaScript".slice(4); //=>"Script"

"JavaScript".toUpperCase(); //=>"JAVASCRIPT"
"JavaScript".toLowerCase(); //=>"javascript"

["index", "style", "script"].join("?"); //=>"index?style?script"
"index?style?script".split("?"); //=>["index","style","script"]


// 文字列の検索
"JavaScript".indexOf("Script"); //=>4
"JavaScript".lastIndexOf("Script"); //=>4
"JavaScript".search("Script"); //=>4

//文字列の大小関係 数字<大文字<小文字<ひらがな<カタカナ<漢字
"123" < "alphabet"; //=>true
"alphabet" < "日本語"; //=>true

数値

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//無限大 Infinity
1 / -0; //=> -Infinity
1 / Infinity; //=> 0
Infinity + 1; //=> Infinity

//非数 NaN 「Not a Number」
0 / 0; //=> NaN
Infinity - Infinity; //=> NaN

//数値のn進数表現
99; //=>10進リテラル
0xff; //=>16進リテラル //=>255
077; //=>8進リテラル //=>64

//小数の誤差
0.1 + 0.1 + 0.1; //=> 0.3000000000004
(1+1+1) / 10; //=> 0.3 整数で計算し小数に変換する

//小数から整数に変換
Math.floor(12.3); //=>12
~~12.3; //=>12

//べき乗の算出 (10進リテラルの場合)
2E1; //2 * 10
2e+2; //2 * 10 * 10
1.2E-2; //1.2 /10 /10
1.2 * Math.pow(10, -2); //1.2 * (1/10/10)

//Numberクラスのメソッド
(1.234).toFixed(2); //=>"1.23"
(1.234).toExponential(2); //=>"1.23+0"
(1.234).toPrecision(2); //=>"1.2"

オブジェクト

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// instanceof演算子 オブジェクト(インスタンス)の判定
new Number(1) instanceof Number; //=>true
new Number(1) instanceof Object; //=>true
({a: 1}) instanceof Object; //=>true
[1] instanceof Array; //=>true
[1] instanceof Object; //=>true
1 instanceof Object; //=>false

//オブジェクトと配列の生成
var obj = {a: 1}; //Objectオブジェクト
var array = [1]; //Arrayオブジェクト

//配列の拡張
Array.prototype.join_by_plus = function(){
return this.join("+");
};
["a", "b"].join_by_plus(); //=> "a+b"

文法(上級)

クラス1

  • Objectクラス

    1
    2
    3
    4
    5
    6
    7
    8
    // toStringメソッド
    ({}).toString(); //=> "[object Object]"
    [1,2].toString(); //=>"1,2"

    // hasOwnPropertyメソッド
    ({a: 1}).hasOwnProperty("a"); //=>true
    ({a: 1}).hasOwnProperty("b"); //=>false
    [1,2].hasOwnProperty("0"); //=> true
  • Arrayクラス

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    //pushとpopメソッド
    var stack = [];
    stack.push("a"); //=> 1
    stack.push("b"); //=> 2
    stack.pop(); //=> "b";
    stack; //=> ["a"];

    //unshiftとshiftメソッド
    var queue = [];
    queue.unshift("a"); //=> 1
    queue.unshift("b"); //=> 2
    queue.shift(); //=> "a"
    queue; //=> ["b"]

    //concatとslice,spliceメソッド
    ["a"].concat(["b"]); //=>["a", "b"]
    ["a", "b", "c"].slice(1, 3); //=>["b", "c"]
    var input = ["a", "b", "c"];
    input.splice(1, 3, "bb", "cc");
    input; //=>["a", "bb", "cc"]

    //sortとreverseメソッド
    ["b", "a", "c"].sort(); //=>["a","b","c"]
    ["b", "a", "c"].reverce(); //=>["c","b","a"]

クラス2

  • RegExpクラス

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //RegExpオブジェクトの生成
    var pattern_1 = /(.*)Script/;
    var pattern_2 = new RegExp("(.*)Script");

    //testメソッド
    /(.*)Script/.test("JavaScript"); //=>true
    /(.*)Script/.test("Java"); //=>false

    //execメソッド
    /(.*)Script/.exec("JavaScript"); //=>["JavaScript", "Java"]
    "JavaScript".match(/(.*)Script/); //=>["JavaScript", "Java"]

    //searchメソッド
    "JavaScript".search(/(.*)Script/); //=>4
  • Functionクラス

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    // 関数宣言
    func1(); //OK
    function func1(){}

    // 関数式
    func2(); //ERROR
    var func2 = function(){};

    //無名関数の実行
    var result = function(a, b){
    return a + b;
    }(1, 2); //3

    //引数の指定
    ["aa", "b", "ccc"].sort(function(a, b){
    return a.length - b.length; //辞書順ではなく、文字列順でソート
    }); //=>["b", "aa", "ccc"]

    //プロパティ値への指定
    var obj = {
    a: function(){
    return 1;
    }
    };
    obj.a(); //=>1

    //関数の実行
    function a(){
    return function(){
    return 1;
    }
    }
    a()(); //=>1

書籍「プロになるためのJavaScript入門」を参考にさせていただきました。

web