ES 6散歩してみます.ブロックレベルの作用領域から出た変革です.

5321 ワード

継続的に更新するgithubメモ、リンク先:Front-End-Basis
この記事のメモアドレス:文字に何が変化しましたか?
ES 6歩いてシリーズを見てみてください.特に感謝のダンス読書会です.
ブロックレベルのスコープはまた品詞法のスコープとも言われています.
  • 関数内部(関数領域)
  • ブロック(文字{と}の間の領域)
  • 注意:ES 6は、ブロックレベルのスコープの任意のネストを許可します.
    {{{{{{let text = 'Hello World!'}}}}}}
    ブロックレベルの役割があって、私たちは話を続ける可能性があります.
    1、ブロックレベル宣言
    ブロックレベル宣言は、指定されたブロックのスコープ以外ではアクセスできない変数を宣言するために使用されます.
    2、let宣言:ブロックレベルのスコープ変数を宣言するために使用されます.
    1、宣言された変数はブロックレベルのスコープの特性を持っています.
    //   
    function getValue (condition) {
        if (condition) {
            let value = 'blue';
            return value;
        }
        console.log(value)
        //    value is not defined
    }
    getValue()
    2、同じ作用領域ではletを使用して同名の変数を宣言できません.
    //    var,const  let,  let         ,    
    var count = 30;
    let count = 40;
    //    Identifier 'count' has already been declared
    
    //           let      ,  
    function test(value) {
        let value = 3;
    }
    test()
    //    Identifier 'value' has already been declared
    
    //                    
    let count = 30;
    if(true) {
      let count = 40;
      //       ,    
    }
    
    3、前解析がないと宣言し、変数の昇格がなく、「一時死区」(TDZ)があります.
    ブロックの開始から変数宣言までのエリアは一時停止エリアと呼ばれ、ES 6は明示的に規定しています.ブロックにletとconstコマンドが存在する場合、このブロックはこれらの命令声明に対する変数は最初から閉鎖作用領域を形成しています.声明の前にこれらの変数(賦値、参照など)を使用すると、エラーが発生します.
    if(true) {
        console.log(typeof value);
        //    value is not defined
    
        let value = 'blue';
    }
    なお、TDZはエリアが「ブロック開始」から「変数宣言」までであり、以下の例はエラーではない.
    // typeof       ,   ,          
    console.log(typeof value); //    undefined,    
    if(true) {
        let value = 'red';
    }
    3、const声明:PIなどの定数を宣言し、値が設定されたら変更できない.
    1、定数宣言の値は可変ではない.
    なお、const宣言のオブジェクトはバインディングの変更を許可していませんが、オブジェクトの属性値を変更することができます.
    const number = 6;
    number = 5;
    //    Assignment to constant variable
    
    const obj = {number: 1};
    obj.number = 2; //    
    
    obj = {number: 3};
    //    Assignment to constant variable
    2、定数宣言後の値は変更できませんので、声明の場合は値を付けなければなりません.
    //      
    const count = 30;
    
    //    Missing initializer in const declaration
    const name;
    3、声明の定数はブロックレベルの作用領域の特性を有する.
    if(true) {
        const number = 5;
    }
    console.log(number)
    //    number is not defined
    4、同一の作用領域ではconstを使用して同名の変数を宣言することができません.
    var message = 'Hello';
    let age = 25;
    
    //          
    const message = 'Good';
    const age = 30;
    5、前解析がないと宣言し、変数の昇格がなく、「一時死区」(TDZ)がある.
    まとめ:一枚の表
    宣言モード
    変数の昇格
    スコープ
    初期値が必要ですか?
    定義を繰り返す
    var
    はい、
    関数レベル
    いらないです
    許可
    let
    いいえ、
    ブロックレベル
    いらないです
    許可しない
    コンサート
    いいえ、
    ブロックレベル
    必要
    許可しない
    拡張:変数の名前をもう一度言ってください.var、let、const声明の変数名に関わらず、数字、アルファベット、下線及びドル記号から構成されますが、数字で始まることはできません.ドル記号は任意の位置に置くことができます.また、単独のドル記号もあります.
    4、循環中のブロックの役割分域バインディング
    サイクル中のlet宣言
    //      
    // before
    for(var i = 0; i < 5; i++) {
        // ...       
    }
    console.log(i)  // 5
    
    //after
    for(let i = 0; i < 5; i++) {
        // ...       
    }
    console.log(i) //    i is not defined
    
    
    //      
    // before
    var funcs = [];
    for(var i = 0; i < 10; i++) {
        funcs.push(() => {console.log(i)})
    }
    funcs.forEach((ele) => {
        ele()
    })
    //    10  10
    
    // after
    var funcs = [];
    for(let i = 0; i < 10; i++) {
        funcs.push(() => {console.log(i)})
    }
    funcs.forEach((ele) => {
        ele()
    })
    //    0 1 2 3 4 5 6 7 8 9
    注意:ちょっと重要なことがあります.let声明は循環内部の行為が標準で専門的に定義されています.letが特性を向上させないとは限りません.
    サイクル中のconst宣言
    // for      
    for (const i = 0; i < 1; i++) {
        console.log(i)
    }
    //    0 ,     Assignment to constant variable.
    
    // for-in   for-of     
    var object = {
        a: true,
        b: true,
        c: true
    };
    for (const key in object) {
        //          key  ,   
        console.log(key)
    }
    //    a b c
    注意:constは、for-iとfor-ofサイクルに適用できます.反復のたびに既存のバインディングを変更することなく、新しいバインディングを作成するからです.
    5、ブロックレベルバインディングの最適な実践の進化
    ES 6早期
    デフォルトではletがvarの代わりに使用されると考えられていますが、書き込み保護の変数にはconstが使用されます.
    ES 6使用中
    一般的にデフォルトではconstを使用していますが、変数の値を変更する必要がある場合のみletを使用します.ほとんどの変数の値は初期化後に変更されるべきではないので、予想外の変数値の変化は多くのバグの元となる.このようにして、コードの可変性がある程度実現でき、一部のエラーが発生するのを防ぐことができます.
    6、グローバル変数は、最上階のオブジェクトの属性と徐々に外れます.
    トップレベルのオブジェクトは、ブラウザ環境ではwindowオブジェクトを指し、Nodeではglobalオブジェクトを指します.
    互換性を維持するために、varコマンドとfunctionコマンド宣言のグローバル変数は、依然として上位のオブジェクトのプロパティです.
    var a = 1;
    window.a // 1
    一方、letコマンド、constコマンド、classコマンド宣言のグローバル変数は、上位オブジェクトの属性ではないと規定されています.
    上の図ではlet宣言の変数はWindowオブジェクトではなく、新しいScriptオブジェクトです.
    拡張:ブラウザでframeまたはwindowをまたいでコードにアクセスする必要があれば、依然としてvarでグローバルオブジェクトの下で変数を定義することができます.
    7、ブロックレベル関数
    ECMAScript 6から始まって、厳密なモードでは、ブロック内の関数領域はこのブロックです.ECMAScript 6の前に、ブロックレベル関数は厳密なモードで使用することを勧めません.
    'use strict';
    
    function f() {
      return 1;
    }
    
    {
      function f() {
        return 2;
      }
    }
    
    f() === 1; // true
    
    // f() === 2          
    注意:非厳密モードでは、ブロックレベル関数は使用しないでください.非厳密モードでは、ブロック内の関数の宣言は奇妙な表現であり、互換性のある危険性があります.
    if (shouldDefineZero) {
       function zero() {     // DANGER:      
          console.log("This is zero.");
       }
    }
    ECMAScript 6では、shuldDefineZeroがfalseであれば、ゼロは永遠に定義されません.このブロックは実行されません.これは新しい標準で定義されています.しかし、ここには歴史的な問題が残っています.このブロックが実行されるかどうかにかかわらず、いくつかのブラウザがゼロを定義します.
    厳格なモードでは、ECMAScript 6をサポートするすべてのブラウザは、同じ方法で処理されます.ShuldDefinezeroがtrueである場合にのみ、ゼロを定義し、その領域はこのブロック内にのみ作用します.