JS 学習ノート 1_ 基礎と常識

##1.6 つのデータ型##

5 つの基礎的なもの：Undefined、Null、Boolean、Number、String（そのうち Undefined は Null から派生）

1 つの複雑なもの：Object（本質的には順序のないキー値対のグループ）

##2.文字列から数字への変換##

• Number(str)：まず評価してから変換（まず valueOf、次に toString、どちらもダメなら NaN）。一般的に期待する結果と異なります。例えば Number('')=Number(false)=Number(null)=0 一方 var x;Number(x)=NaN。。。そのため一般的に以下の 2 つの方法を使用します

• parseInt(str)：基数を指定できます。parseInt(x, 10); のような形式を推奨します。つまり常に基数を明示します

• parseFloat(str)：基数を指定できません。整数を解析する場合は浮動小数点数ではなく整数を返します

##3.文字列長の取得##

String 型の値にはすべて length 属性があります。str.length は文字列長の整数値を返します。他の関数を通じて文字列長を取得するのではありません

##4.値渡しとアドレス渡し##

関数のパラメータ渡しはすべて値渡しです

##5.スコープチェーン##

本質的にはスタック であり、各層の変数オブジェクトを格納します（コンパイラのシンボルテーブルポインタスタックに類似）。変数オブジェクトはその層のすべての変数と関数へのアクセス権限を保持します。その層が関数の場合、変数オブジェクトは arguments オブジェクトです。スタックトップは現在実行中のコンテキスト環境に対応する変数オブジェクトであり、スタックボトムはグローバル実行環境に対応する変数オブジェクトです。

##6.スコープ##

ブロックレベルスコープはなく、関数スコープがあります

##7.Object オブジェクトを作成する 2 つの方法##

1. var obj = new Object();obj.attr = value;

従来の方法。コンストラクタを呼び出してオブジェクトを作成します

2. var obj = {attr1 : value1, attr2 : value2} または var obj = {"attr1" : value1, "attr2" : value2}

オブジェクトリテラル表記法。プロパティ名は文字列にできます

注意：

1. プロパティ名に曖昧さがある場合（例：null、var など）を除き、一般的に文字列をプロパティ名に使用しないでください。もちろんこれは習慣的な制約です

2. オブジェクトリテラル方式でオブジェクトを定義する際、そのコンストラクタは呼び出されません

##8.プロパティ値にアクセスする 2 つの方法##

1. obj.attr

2. obj["attr"] 利点は変数を通じてプロパティにアクセスできることです。例：var attrName = "attr";obj[attrName] より柔軟です

##9.配列の宣言と初期化##

1. var arr = new Array(value1, value2...);

2. var arr = Array(...);new を省略できます

3. 配列リテラル：var arr = [value1, value2...];

注意：配列リテラルで配列を定義する際もコンストラクタは呼び出されません

##10.配列関連関数##

付録 を参照

##11.関数宣言と関数式の違い##

1. function fun(){...} js エンジンはソースコードをロードする際にこの関数オブジェクトを生成します

2. var fun = function(){...} js エンジンは実行時にこの関数オブジェクトを生成します

##12.関数のオーバーロード##

オーバーロードをサポートしません。後で宣言された関数が先に宣言された関数を上書きします。本質的には関数名に対して複数の代入操作を行ったことになります（関数名は単なるポインタ変数です）

##13.関数内部の特殊属性##

1. arguments.callee 関数ポインタ。その arguments オブジェクトを持つ関数、つまり現在の関数を指します

2. this 現在の実行環境の参照。トップレベルの this は window です

3. arguments.callee.caller 関数ポインタ。現在の関数を呼び出した関数を指します。ない場合は null を返します

注意：this はオブジェクト参照または関数参照にできますが、callee と caller は関数参照のみです

##14.関数オブジェクトの属性とメソッド##

1. length 関数が期待する名前付きパラメータの数。js では関数に任意の数のパラメータを渡せます。形式パラメータの他に arguments を使用して任意のパラメータを取得できるためです

2. prototype 関数のプロトタイプオブジェクトを指します

3. call(context, arg1, arg2...) 特定のスコープで関数を呼び出すために使用され、オブジェクトと関数の密結合を解除します

4. apply(context, arguments或其它数组对象) 機能は同上。配列パラメータをサポートします

5. bind/unbind(context, arg1, arg2...) 実行環境またはパラメータをバインド/アンバインドします。既存の関数から新しい関数を生成できますが、bind による連続バインドは無効です（連続 != 複数回）。例えば：

    function fun(){
        alert(this.data);
    }
    var obj = {
        data : 'obj_data'
    };
    var newObj = {
        data : 'new_obj_data'
    };
    fun1 = fun.bind(obj);
    fun1();
    fun2 = fun1.bind(newObj);//連続バインド
    fun2();
    fun3 = fun.bind(newObj);//複数回バインド
    fun3();
   

上記のコードは'obj_data', 'obj_data', 'new_obj_data'を出力します。2 回目のバインドは失敗しました。bind 関数内部は call で実装されているため、連続バインドの効果は以下に類似しています：

    //1 回目のバインドで得られた関数
    fun1 = fun.call(obj);
    //2 回目のバインドで得られた関数
    fun2 = fun1.call(newObj);

2 回目のバインドで得られた関数内では fun1 内部の this は確かに newObj を指していますが、fun1 内ではthis を使用していないため、何の影響もありません

##15.いくつかの常識##

1. this は常に自身に属するオブジェクトを指します（あなたが誰のプロパティか、あなた内部の this が誰か）

    var obj1 = {
        data : 1,
        fun : function(){
            alert(this.data);
        }
    };
    var obj2 = {
        data : 2
    };
   
    obj1.fun();
    obj2.fun = obj1.fun;
    obj2.fun();
   

   上記のコードは 1 と 2 を出力します。最後から 2 番目の文を実行した後、obj2 に新しい fun プロパティが追加され、値は obj1.fun の参照ですが、obj2.fun は obj2 のプロパティであるため、this は obj2 を指します

2. できるだけコンストラクタのプロトタイプ上でメンバー関数を定義してください。コンストラクタ内で直接定義された関数には実行時クロージャのオーバーヘッドがあるためです

3. js ではシングルクォートを使用すべきです。JSON と XML ではダブルクォートのみであるため、シングルクォートを使用するとエスケープを回避できます

4. できるだけ変数宣言と同時に初期化してください。undefined が未宣言を表すように区別するためです。宣言済みだが初期化されていない変数と未宣言の変数に typeof 演算子を使用すると、どちらも"undefined"が返されるためです

5. NaN（Not a Number）はいかなる値とも等しくありません。NaN 自身も含みます。そのため isNaN() 関数を使用して判断する必要があります

6. 参照型の値にのみ動的にプロパティを追加できます。基本型の値にプロパティを追加してもエラーにはなりませんが、何の意味もありません

7. 配列はインデックスに応じて自動的に成長します。length 属性は書き込み可能であることに注意が必要です。つまり配列長を動的に設定できます。例えば末尾の要素を切り捨てるなど

8. 関数名は単なるポインタ変数です。function fun{...} fun = null; は参照関係を切断しただけで、関数本体は破棄されていません

##付録##

###1.基礎データ型###

1. Undefined 定義済みだが初期化されていないオブジェクトのデフォルト値

2. Null 空のオブジェクトポインタを表します。そのため typeof で検出すると object が返されます

3. Boolean ブール値。Boolean() 変換関数に注意してください。ルールは以下の通り：

4. true/false ~ 不変

5. 空でない文字列/空文字列 ~ true/false

6. 0 以外の数字/0 と NaN ~ true/false

7. あらゆるオブジェクト/null ~ true/ false

8. undefined ~ false

上記のルールは非常に重要です。if 条件は自動的に Boolean() 変換を適用し、if(obj) は js コードで非常によく見られるため、多くの場合フロー制御エラーは if 条件の自動変換によって引き起こされます

4. Number 数値。js では +0 と -0 は等しく、NaN に注意してください。それはあらゆるものと等しくありません。自身も含みます。しかも n より大きくもなく、n 以下でもありません。Number 変数は toString() 関数をサポートします。数値文字列の基数変換に使用できます。例えば var num = 17;num.toString(16) は"11"を返します

5. String 文字列。文字列の不変性に注意してください。大量の連結操作を行う際は配列 + join を使用し、ループ + を使用しないでください

###2.Object 型変数の属性とメソッド###

1. Constructor コンストラクタへの参照を保存します

2. hasOwnProperty(porpertyName) 現在のオブジェクトが指定されたプロパティを持っているかどうかを確認するために使用します（ここで「プロパティ」には属性とメソッドが含まれます）

3. isPrototypeOf(obj) 現在のオブジェクトが指定されたオブジェクトのプロトタイプかどうかを確認するために使用します

4. propertyIsEnumerable(propertyName) 指定されたプロパティが列挙可能かどうかを検出するために使用します

5. toLocaleString() toString() 関数に相当しますが、地域特性が追加されています

6. toString() オブジェクトの文字列表現を返します

7. valueOf() オブジェクトの文字列、数値、またはブール値表現を返します

###3.一般的な参照型###

1. Function js では関数もオブジェクトであり、非常に柔軟です。例えば：

    var load = window.onload;
    window.onload = function(){
        //do something
        load();//就是这么简单、添一对括号马上执行
    }
   

2. Array 配列型の操作関数が最も多いです

3. スタック関数：push() 配列末尾に 1 項を挿入、pop() 末尾要素をスタックから取り出す

4. キュー関数：push() 同上、shift() 先頭要素をキューから取り出して先頭要素を返す；逆キュー（キュー先頭から入り、キュー末尾から出る）unshift()/pop()

5. ソート関数：sort(fun) パラメータなしで文字列を比較して昇順に並べ替え、パラメータありでカスタム比較関数を渡して正の値/負の値/0 を返す；reverse() 順序を反転

   注意：sort()/reverse() はどちらも元の配列を直接変更し、sort() のデフォルト実装方式はあまり科学的ではありません。[1, 3, 10, 5] をソートした結果は [1, 10, 3, 5] になります。期待する結果を得るには、カスタム比較関数を渡す必要があります

4. 操作関数：

  1. arr.concat(arr1, arr2\.\.\.) 接続して新しい配列を形成

  2. arr.slice() 文字列の substring と同様の切り取り効果で、使い方も同じ

  3. arr.splice() 配列の中間に項を挿入。splice(startIndex, num, item1, item2\.\.\.) は startIndex からの num 項を各 item に置き換えることを示します。最初のパラメータのみで startIndex からの num 項を空に置き換える（つまり削除）ことを示します。splice を使用して削除/置換/挿入操作を実装できます。

      *注意*：splice 関数も元の配列を直接変更します。

5. 位置関数：indexOf(value) と lastIndexOf(value)。value のインデックス位置を検索し、見つからない場合は -1 を返します。内部では厳密等価演算子（===）を使用しています

6. 反復関数：every()、filter()、forEach()、map()、some() はすべて配列の各項目に対して指定されたメソッドを実行します。IE9+ がサポートしており、あまり一般的ではないため、ここでは詳しく説明しません

7. 帰約関数：reduce()、reduceRight() は紹介しません。理由は同上

3. Date 型：関連内容は多いため、W3School を参照

4. RegExp 型：var regex = /^cat$/i; 正規表現（RegExp 型）を作成します。サポートされるモードには g、i、m があり、それぞれグローバルモード、大文字小文字を無視するモード、マルチラインモードを表します。もちろん、new RegExp(strRegex, strMode) も使用できますが、このような方法を使用する理由があるでしょうか？

js は正規表現キャプチャをサポートします。var matches = regex.exec(text); matches[0]、matches[1]... を通じてキャプチャされた内容を取得します

通常の正規表現マッチ：regex.test(text) は true/false を返します

5. 基本ラッパー型：Boolean、String、Number。常に会っていますが、気づいていないだけです。例えば：

    var str = 'smilestome';
    var str_ = str.substring(1);
   

上記のコードは以下と等価です：

    var s1 = new String('smilestome');//ラッパー型インスタンスを作成
    var s2 = s1.substring(1);//インスタンスで対応するメソッドを呼び出す
    s1 = null;//インスタンスを破棄

自動ボックス化/ボックス化解除。基本データ型をより使いやすくするためですが、注意 が必要です：new String() と String() 変換メソッドは異なります。前者は object 型を返し、後者は string 型を返します。このような違いを考慮すると、混在すると不必要なトラブルを引き起こすため、明示的にラッパー型を作成する理由はありません。Boolean、Number もこれに類似しています。