es6では何ができるのか

es6 では、let は変数の宣言に使用されるキーワードです。このキーワードは、宣言されたコード ブロック内でのみ有効です。指定されたコード ブロックの外側ではエラーが報告され、スコープの昇格はありません。繰り返しの宣言は次のとおりです。許可されており、一時的なデッド ゾーンがあります。構文は「let name=value;」です。

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

let の es6

let は、変数を宣言するための es6 のコマンドです。それが宣言されているコード ブロック内でのみ有効です。このコード ブロックが残っている場合、エラーが報告されます。 for ループにも非常に適しており、ループ内の i の値はループ ステートメント内でのみ有効となり、外部で取得することはできません。

var コマンドはグローバル変数を宣言し、i はグローバル変数を指し、最後の値のみが出力されます。 let はループ ステートメント ブロック内でのみ有効であり、各ループで i が再宣言されるため、ループごとに対応する値を取得できます。

for ループ内の変数は親スコープであり、ループ本体の let で定義された変数 (子スコープ) と同じスコープ内にありません。

例:

//1.在自身所在代码块中有效
{
    let a = 1;
    var b = 2;
}
console.log(b); // 2
console.log(a); // a is not defined
//2.在for循环语句块中有效
for(var i=0;i<10;i++) {
    //...
}
console.log(i); // 10
for(let j=0;j<10;j++) {
    //...
}
console.log(j); // j is not defined
var arr = [];
for(var a=0;a<10;a++) {
    arr[a] = function () {
        console.log(a);
    }
}
console.log(a[4]); // 10
for(let b=0;b<10;b++) {
    arr[b] = function () {
        console.log(b);
    }
}
console.log(b[4]); // 4
// 3.for循环的变量和循环体内的变量
for(var i=0;i<10;i++) {
    let i = &#39;fed&#39;;
    console.log(i);
}
/*
* 结果是
*   fed
*   fed
*   fed
*/

let コマンドにはスコープ プロモーションがありません

var コマンドにはスコープ プロモーションがあります。宣言される前は未定義です。宣言されていない場合は、宣言されている場合、デフォルトの価値があります。 let で定義された変数は宣言後に使用する必要があります。

console.log(fa); // undefined
var fa = 1;
console.log(fb); // fb is not defined
let fb = 2;

let には一時的なデッド ゾーンがあります

「一時的なデッド ゾーン」(TDZ) は ES6 の規定を指します。ブロック内に let および const コマンドがある場合、変数は次のように宣言されます。これら 2 つのコマンドは閉じたスコープを形成しています。これより前に宣言された変数はエラーを報告します。

例: 以下ではグローバル変数が宣言されていますが、ブロックレベルのスコープで別の変数を宣言します。

var food = 'apple';
if(typeof 'str' == 'string') {
    food = 'banana'; // Uncaught ReferenceError: food is not defined
    let food;
    console.log(food); // undefined
    food = 'orange';
    console.log(food); // orange
}

注: 一時的な第 4 エリアについては、いくつかの悪い点が発生する可能性があります。

検出の種類は安全ではありません

typeof x; // Uncaught ReferenceError: x is not defined
let x;

重複した宣言は許可されません

つまり、同じスコープ内で 2 つの同一の変数を宣言することは許可されません。

例:

{
    let a = 1;
    var a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared
}
// 或者
{
    let b = 1;
    let b = 2; // Uncaught SyntaxError: Identifier 'b' has already been declared
}

注: 関数パラメーター内でパラメーターを繰り返し宣言することはできません。宣言しないと、エラーが報告されます。

function wait(x,y) {
    let x = 1; // Uncaught SyntaxError: Identifier 'x' has already been declared
    let y = 2; // Uncaught SyntaxError: Identifier 'y' has already been declared
}
wait(3,5);

トップレベル オブジェクト

ES6 より前では、トップレベル オブジェクトのプロパティはグローバル変数と一致していたため、多くの問題が発生していました。

実行することでのみエラーをキャッチでき、最初からエラーを検出できるわけではありません。

トップレベルのオブジェクトはいつでもどこでも読み書きできるため、モジュール式プログラミングには適していません。

window は実際にはブラウザ ウィンドウを指し、最上位のオブジェクトにはエンティティの意味があります。

つまり、es6 では 1 つの点が改善されました。つまり、let と const によって宣言されたグローバル変数は、トップレベル オブジェクトのプロパティに属さないということです。

例:

var a = 1;
let b = 2;
console.log(window.a); // 1
console.log(window.b); // undefined

学んだことを学び、let コマンドを適用する

古いことわざにあるように、学べばどこでも使えます。学ばなければ何の意味もありません。そこで、let に関する小さな例を書きました。

これはタブの場合です。以前は btns[i].index = i を定義する必要がありましたが、現在では let コマンドを使用する方がはるかに便利です。

.tab {
    width: 300px;
    height: 30px;
    border: 1px solid #fff;
}
.tab > span {
    float: left;
    display: block;
    width: 98px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #aaa;
    cursor: pointer;
}
span.active {
    color: #fff;
    background-color: #f00;
    border: 1px solid #f00;
}
.content, .content > p {
    width: 300px;
    height: 300px;
}
.content > p {
    display: none;
    border: 1px solid #aaa;
}
p.active {
    display: block;
}
<div class="tab">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
</div>
<div class="content">
    <p class="active">1的内容</p>
    <p>2的内容</p>
    <p>3的内容</p>
</div>
let btns = document.querySelectorAll(&#39;.tab span&#39;);
let contents = document.querySelectorAll(&#39;.content p&#39;);
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        for (let j = 0; j < btns.length; j++) {
            btns[j].className = &#39;&#39;;
            contents[j].className = &#39;&#39;;
        }
        this.className = &#39;active&#39;;
        contents[i].className = &#39;active&#39;;
    }
}

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がes6では何ができるのかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。