blocks|key|1579513|text|这里有一些细微的区别--+let作用域的行为更像其他语言中的变量作用域。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1579514|例如，它的作用域是封闭的块，它们在声明之前不存在，等等。|1579515|然而，值得注意的是，let只是较新的Javascript实现的一部分，并且具有不同程度的browser+support。|1579516|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#search=let^0|D|3|0|0|A|3|18|F|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<p>There are some subtle differences &mdash; <code>let</code> scoping behaves more like variable scoping does in more or less any other languages. </p>

<p>e.g. It scopes to the enclosing block, They don't exist before they're declared, etc.</p>

<p>However it's worth noting that <code>let</code> is only a part of newer Javascript implementations and has varying degrees of <a href="http://caniuse.com/#search=let" rel="noreferrer">browser support</a>.</p>


blocks|key|1579601|text|下面是两者的区别示例(对chrome的支持刚刚开始)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1579602|📷|atomic|offset|length|1579603|​|1579604|正如您所看到的，var+j变量的值仍然在for循环作用域(Block作用域)之外，但是let+i变量在for循环作用域之外是未定义的。|style|CODE|1579605|1579606|"use+strict";
console.log("var:");
for+(var+j+=+0;+j+<+2;+j%2B%2B)+{
++console.log(j);
}

console.log(j);

console.log("let:");
for+(let+i+=+0;+i+<+2;+i%2B%2B)+{
++console.log(i);
}

console.log(i);|code-block|syntax|javascript|1579607|1579608|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/067846efde9e5ebe2adc997c9fa5c184.png|imageAlt^0|0|0|1|0|0|0|8|5|17|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@$E|14|F|15|1|16]]|A|$]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|18|8|@$E|19|F|1A|K|L]|$E|1B|F|1C|K|L]]|9|@]|A|$]]|$1|M|3|H|5|6|7|1D|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1E|8|@]|9|@]|A|$Q|R]]|$1|S|3|H|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10|11|-4]]]]

<p>Here is an example for the difference between the two (support just started for chrome):<br>
<img src="https://i.stack.imgur.com/dqNYW.png" alt="enter image description here"></p>

<p>As you can see the <code>var j</code> variable is still having a value outside of the for loop scope (Block Scope), but the <code>let i</code> variable is undefined outside of the for loop scope.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
console.log("var:");
for (var j = 0; j &lt; 2; j++) {
  console.log(j);
}

console.log(j);

console.log("let:");
for (let i = 0; i &lt; 2; i++) {
  console.log(i);
}

console.log(i);</code></pre>
</div>
</div>
</p>


blocks|key|1579652|text|被接受的答案遗漏了一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1579653|{
++let+a+=+123;
};

console.log(a);+//+ReferenceError:+a+is+not+defined|code-block|syntax|javascript|1579654|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The accepted answer is missing a point:</p>

<pre><code>{
  let a = 123;
};

console.log(a); // ReferenceError: a is not defined
</code></pre>


blocks|key|1364605|text|至少在Visual+Studio1.5中，“TypeScript”允许在一个块中多次声明相同的变量名称，而"let“则不允许。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1364606|这不会产生编译错误：|1364607|var+x+=+1;
var+x+=+2;|code-block|syntax|javascript|1364608|这将：|1364609|let+x+=+1;
let+x+=+2;|1364610|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>It also appears that, at least in Visual Studio 2015, TypeScript 1.5, "var" allows multiple declarations of the same variable name in a block, and "let" doesn't.</p>

<p>This won't generate a compile error:</p>

<pre><code>var x = 1;
var x = 2;
</code></pre>

<p>This will:</p>

<pre><code>let x = 1;
let x = 2;
</code></pre>


blocks|key|1364666|text|下面的两个函数显示了它们之间的区别：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1364667|function+varTest()+{
++++var+x+=+31;
++++if+(true)+{
++++++++var+x+=+71;++//+Same+variable!
++++++++console.log(x);++//+71
++++}
++++console.log(x);++//+71
}

function+letTest()+{
++++let+x+=+31;
++++if+(true)+{
++++++++let+x+=+71;++//+Different+variable
++++++++console.log(x);++//+71
++++}
++++console.log(x);++//+31
}|code-block|syntax|javascript|1364668|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>May the following two functions show the difference:</p>

<pre><code>function varTest() {
    var x = 31;
    if (true) {
        var x = 71;  // Same variable!
        console.log(x);  // 71
    }
    console.log(x);  // 71
}

function letTest() {
    let x = 31;
    if (true) {
        let x = 71;  // Different variable
        console.log(x);  // 71
    }
    console.log(x);  // 31
}
</code></pre>


blocks|key|1579866|text|ECMAScript+6添加了一个关键字来声明除"let“以外的"const”变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1579867|引入"let“和"const”而不是"var“的主要目标是拥有块作用域，而不是传统的词法作用域。This+article+explains+very+briefly+difference+between+"var"+and+"let"+and+it+also+covers+the+discussion+on+"const"。|1579868|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015|1|https://medium.com/@charan4u/ecmascript-6-beginner-guide-part-3-block-level-bindings-2b3cd5c5d408#.ev9gwp2jb^0|0|C|0|0|1C|36|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p><a href="https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015" rel="nofollow noreferrer">ECMAScript 6</a> added one more keyword to declare variables other the "const" other than "let".</p>

<p>The primary goal of introduction of "let" and "const" over "var" is to have block scoping instead of traditional lexical scoping.
<a href="https://medium.com/@charan4u/ecmascript-6-beginner-guide-part-3-block-level-bindings-2b3cd5c5d408#.ev9gwp2jb" rel="nofollow noreferrer">This article explains very briefly difference between "var" and "let" and it also covers the discussion on "const"</a>.</p>


blocks|key|1579930|text|let很有趣，因为它允许我们这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1579931|(()+=>+{
++++var+count+=+0;

++++for+(let+i+=+0;+i+<+2;+%2B%2Bi)+{
++++++++for+(let+i+=+0;+i+<+2;+%2B%2Bi)+{
++++++++++++for+(let+i+=+0;+i+<+2;+%2B%2Bi)+{
++++++++++++++++console.log(count%2B%2B);
++++++++++++}
++++++++}
++++}
})();|code-block|syntax|javascript|1579932|这导致了0，7的计数。|1579933|鉴于|1579934|(()+=>+{
++++var+count+=+0;

++++for+(var+i+=+0;+i+<+2;+%2B%2Bi)+{
++++++++for+(var+i+=+0;+i+<+2;+%2B%2Bi)+{
++++++++++++for+(var+i+=+0;+i+<+2;+%2B%2Bi)+{
++++++++++++++++console.log(count%2B%2B);
++++++++++++}
++++++++}
++++}
})();|1579935|只有0，1。|1579936|entityMap^0|0|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|11|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

<p><code>let</code> is interesting, because it allows us to do something like this:</p>

<pre><code>(() =&gt; {
    var count = 0;

    for (let i = 0; i &lt; 2; ++i) {
        for (let i = 0; i &lt; 2; ++i) {
            for (let i = 0; i &lt; 2; ++i) {
                console.log(count++);
            }
        }
    }
})();
</code></pre>

<p>Which results in counting [0, 7].</p>

<p>Whereas</p>

<pre><code>(() =&gt; {
    var count = 0;

    for (var i = 0; i &lt; 2; ++i) {
        for (var i = 0; i &lt; 2; ++i) {
            for (var i = 0; i &lt; 2; ++i) {
                console.log(count++);
            }
        }
    }
})();
</code></pre>

<p>Only counts [0, 1].</p>


blocks|key|1364843|text|使用let的一些技巧|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1364844|1.|1364845|++++let+statistics+=+[16,+170,+10];
++++let+[age,+height,+grade]+=+statistics;

++++console.log(height)|code-block|syntax|javascript|1364846|2.|1364847|++++let+x+=+120,
++++y+=+12;
++++[x,+y]+=+[y,+x];
++++console.log(`x:+${x}+y:+${y}`);|1364848|3.|1364849|++++let+node+=+{
+++++++++++++++++++type:+"Identifier",
+++++++++++++++++++name:+"foo"
+++++++++++++++};

++++let+{+type,+name,+value+}+=+node;

++++console.log(type);++++++//+"Identifier"
++++console.log(name);++++++//+"foo"
++++console.log(value);+++++//+undefined

++++let+node+=+{
++++++++type:+"Identifier"
++++};

++++let+{+type:+localType,+name:+localName+=+"bar"+}+=+node;

++++console.log(localType);+++++//+"Identifier"
++++console.log(localName);+++++//+"bar"|1364850|使用let的Getter和setter|1364851|let+jar+=+{
++++numberOfCookies:+10,
++++get+cookies()+{
++++++++return+this.numberOfCookies;
++++},
++++set+cookies(value)+{
++++++++this.numberOfCookies+=+value;
++++}
};

console.log(jar.cookies)
jar.cookies+=+7;

console.log(jar.cookies)|1364852|entityMap^0|2|3|0|0|0|0|0|0|0|2|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|W|3|X|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Y|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|Z|$]]

<p>Some hacks with <code>let</code>:</p>

<p>1.</p>

<pre><code>    let statistics = [16, 170, 10];
    let [age, height, grade] = statistics;

    console.log(height)
</code></pre>

<p>2.</p>

<pre><code>    let x = 120,
    y = 12;
    [x, y] = [y, x];
    console.log(`x: ${x} y: ${y}`);
</code></pre>

<p>3.</p>

<pre><code>    let node = {
                   type: "Identifier",
                   name: "foo"
               };

    let { type, name, value } = node;

    console.log(type);      // "Identifier"
    console.log(name);      // "foo"
    console.log(value);     // undefined

    let node = {
        type: "Identifier"
    };

    let { type: localType, name: localName = "bar" } = node;

    console.log(localType);     // "Identifier"
    console.log(localName);     // "bar"
</code></pre>

<h3>Getter and setter with <code>let</code>:</h3>

<pre><code>let jar = {
    numberOfCookies: 10,
    get cookies() {
        return this.numberOfCookies;
    },
    set cookies(value) {
        this.numberOfCookies = value;
    }
};

console.log(jar.cookies)
jar.cookies = 7;

console.log(jar.cookies)
</code></pre>


blocks|key|1364940|text|let|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1364941|块作用域|1364942|使用let关键字声明的变量是块范围的，这意味着它们只在声明时所在的block中可用。|1364943|在顶层(函数外部)|1364944|在顶层，使用let声明的变量不会在全局对象上创建属性。|1364945|var+globalVariable+=+42;
let+blockScopedVariable+=+43;

console.log(globalVariable);+//+42
console.log(blockScopedVariable);+//+43

console.log(this.globalVariable);+//+42
console.log(this.blockScopedVariable);+//+undefined|code-block|syntax|javascript|1364946|在函数内部|1364947|在函数内部(但在块之外)，let与var具有相同的作用域。|1364948|(()+=>+{
++var+functionScopedVariable+=+42;
++let+blockScopedVariable+=+43;

++console.log(functionScopedVariable);+//+42
++console.log(blockScopedVariable);+//+43
})();

console.log(functionScopedVariable);+//+ReferenceError:+functionScopedVariable+is+not+defined
console.log(blockScopedVariable);+//+ReferenceError:+blockScopedVariable+is+not+defined|1364949|在一个块内|1364950|在块内使用let声明的变量不能在该块之外访问。|1364951|{
++var+globalVariable+=+42;
++let+blockScopedVariable+=+43;
++console.log(globalVariable);+//+42
++console.log(blockScopedVariable);+//+43
}

console.log(globalVariable);+//+42
console.log(blockScopedVariable);+//+ReferenceError:+blockScopedVariable+is+not+defined|1364952|在循环中|1364953|在循环中使用let声明的变量只能在该循环中引用。|1364954|for+(var+i+=+0;+i+<+3;+i%2B%2B)+{
++var+j+=+i+*+2;
}
console.log(i);+//+3
console.log(j);+//+4

for+(let+k+=+0;+k+<+3;+k%2B%2B)+{
++let+l+=+k+*+2;
}
console.log(typeof+k);+//+undefined
console.log(typeof+l);+//+undefined
//+Trying+to+do+console.log(k)+or+console.log(l)+here+would+throw+a+ReferenceError.|1364955|带有闭包的循环|1364956|如果在循环中使用let而不是var，那么每次迭代都会得到一个新变量。这意味着您可以在循环中安全地使用闭包。|1364957|//+Logs+3+thrice,+not+what+we+meant.
for+(var+i+=+0;+i+<+3;+i%2B%2B)+{
++setTimeout(()+=>+console.log(i),+0);
}

//+Logs+0,+1+and+2,+as+expected.
for+(let+j+=+0;+j+<+3;+j%2B%2B)+{
++setTimeout(()+=>+console.log(j),+0);
}|1364958|临时死区|1364959|由于使用了the+temporal+dead+zone，使用let声明的变量在声明之前不能被访问。尝试这样做会抛出错误。|1364960|console.log(noTDZ);+//+undefined
var+noTDZ+=+43;
console.log(hasTDZ);+//+ReferenceError:+hasTDZ+is+not+defined
let+hasTDZ+=+42;|1364961|不能重复声明|1364962|您不能使用let多次声明同一个变量。您也不能使用与使用var声明的另一个变量具有相同标识符的let来声明变量。|1364963|var+a;
var+a;+//+Works+fine.

let+b;
let+b;+//+SyntaxError:+Identifier+'b'+has+already+been+declared

var+c;
let+c;+//+SyntaxError:+Identifier+'c'+has+already+been+declared|1364964|const|1364965|const与let非常相似--它是块作用域，并且有TDZ。然而，有两件事是不同的。|1364966|禁止重新分配|1364967|不能重新赋值使用const声明的变量。|1364968|const+a+=+42;
a+=+43;+//+TypeError:+Assignment+to+constant+variable.|1364969|注意，这并不意味着该值是不可变的。它的属性仍然可以更改。|1364970|const+obj+=+{};
obj.a+=+42;
console.log(obj.a);+//+42|1364971|如果你想拥有一个不可变的对象，你应该使用Object.freeze()。|1364972|需要初始值设定项|1364973|在使用const声明变量时，必须始终指定一个值。|1364974|const+a;+//+SyntaxError:+Missing+initializer+in+const+declaration|1364975|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/block|1|https://stackoverflow.com/q/33198849/3853934|2|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze^0|0|3|0|0|2|3|X|5|0|0|0|6|3|0|0|0|D|3|H|3|0|0|0|5|3|0|0|0|6|3|0|0|0|8|3|E|3|0|0|0|U|3|5|M|1|0|0|0|5|3|R|3|1A|3|0|0|0|5|0|0|5|6|3|0|0|8|5|0|0|0|0|K|F|K|F|2|0|0|3|5|0|0^^$0|@$1|2|3|4|5|6|7|2Q|8|@$9|2R|A|2S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|2U|8|@$9|2V|A|2W|B|C]]|D|@$9|2X|A|2Y|1|2Z]]|E|$]]|$1|J|3|K|5|6|7|30|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|31|8|@$9|32|A|33|B|C]]|D|@]|E|$]]|$1|N|3|O|5|P|7|34|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|35|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|36|8|@$9|37|A|38|B|C]|$9|39|A|3A|B|C]]|D|@]|E|$]]|$1|W|3|X|5|P|7|3B|8|@]|D|@]|E|$Q|R]]|$1|Y|3|Z|5|6|7|3C|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|3D|8|@$9|3E|A|3F|B|C]]|D|@]|E|$]]|$1|12|3|13|5|P|7|3G|8|@]|D|@]|E|$Q|R]]|$1|14|3|15|5|6|7|3H|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|3I|8|@$9|3J|A|3K|B|C]]|D|@]|E|$]]|$1|18|3|19|5|P|7|3L|8|@]|D|@]|E|$Q|R]]|$1|1A|3|1B|5|6|7|3M|8|@]|D|@]|E|$]]|$1|1C|3|1D|5|6|7|3N|8|@$9|3O|A|3P|B|C]|$9|3Q|A|3R|B|C]]|D|@]|E|$]]|$1|1E|3|1F|5|P|7|3S|8|@]|D|@]|E|$Q|R]]|$1|1G|3|1H|5|6|7|3T|8|@]|D|@]|E|$]]|$1|1I|3|1J|5|6|7|3U|8|@$9|3V|A|3W|B|C]]|D|@$9|3X|A|3Y|1|3Z]]|E|$]]|$1|1K|3|1L|5|P|7|40|8|@]|D|@]|E|$Q|R]]|$1|1M|3|1N|5|6|7|41|8|@]|D|@]|E|$]]|$1|1O|3|1P|5|6|7|42|8|@$9|43|A|44|B|C]|$9|45|A|46|B|C]|$9|47|A|48|B|C]]|D|@]|E|$]]|$1|1Q|3|1R|5|P|7|49|8|@]|D|@]|E|$Q|R]]|$1|1S|3|1T|5|6|7|4A|8|@$9|4B|A|4C|B|C]]|D|@]|E|$]]|$1|1U|3|1V|5|6|7|4D|8|@$9|4E|A|4F|B|C]|$9|4G|A|4H|B|C]]|D|@]|E|$]]|$1|1W|3|1X|5|6|7|4I|8|@]|D|@]|E|$]]|$1|1Y|3|1Z|5|6|7|4J|8|@$9|4K|A|4L|B|C]]|D|@]|E|$]]|$1|20|3|21|5|P|7|4M|8|@]|D|@]|E|$Q|R]]|$1|22|3|23|5|6|7|4N|8|@]|D|@]|E|$]]|$1|24|3|25|5|P|7|4O|8|@]|D|@]|E|$Q|R]]|$1|26|3|27|5|6|7|4P|8|@$9|4Q|A|4R|B|C]]|D|@$9|4S|A|4T|1|4U]]|E|$]]|$1|28|3|29|5|6|7|4V|8|@]|D|@]|E|$]]|$1|2A|3|2B|5|6|7|4W|8|@$9|4X|A|4Y|B|C]]|D|@]|E|$]]|$1|2C|3|2D|5|P|7|4Z|8|@]|D|@]|E|$Q|R]]|$1|2E|3|-4|5|6|7|50|8|@]|D|@]|E|$]]]|2F|$2G|$5|2H|2I|2J|E|$2K|2L]]|2M|$5|2H|2I|2J|E|$2K|2N]]|2O|$5|2H|2I|2J|E|$2K|2P]]]]

<h1><code>let</code></h1>

<h2>Block scope</h2>

<p>Variables declared using the <code>let</code> keyword are block-scoped, which means that they are available only in the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/block" rel="noreferrer">block</a> in which they were declared.</p>

<h3>At the top level (outside of a function)</h3>

<p>At the top level, variables declared using <code>let</code> don't create properties on the global object.</p>

<pre><code>var globalVariable = 42;
let blockScopedVariable = 43;

console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43

console.log(this.globalVariable); // 42
console.log(this.blockScopedVariable); // undefined
</code></pre>

<h3>Inside a function</h3>

<p>Inside a function (but outside of a block), <code>let</code> has the same scope as <code>var</code>.</p>

<pre><code>(() =&gt; {
  var functionScopedVariable = 42;
  let blockScopedVariable = 43;

  console.log(functionScopedVariable); // 42
  console.log(blockScopedVariable); // 43
})();

console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined
</code></pre>

<h3>Inside a block</h3>

<p>Variables declared using <code>let</code> inside a block can't be accessed outside that block.</p>

<pre><code>{
  var globalVariable = 42;
  let blockScopedVariable = 43;
  console.log(globalVariable); // 42
  console.log(blockScopedVariable); // 43
}

console.log(globalVariable); // 42
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined
</code></pre>

<h3>Inside a loop</h3>

<p>Variables declared with <code>let</code> in loops can be referenced only inside that loop.</p>

<pre><code>for (var i = 0; i &lt; 3; i++) {
  var j = i * 2;
}
console.log(i); // 3
console.log(j); // 4

for (let k = 0; k &lt; 3; k++) {
  let l = k * 2;
}
console.log(typeof k); // undefined
console.log(typeof l); // undefined
// Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.
</code></pre>

<h3>Loops with closures</h3>

<p>If you use <code>let</code> instead of <code>var</code> in a loop, with each iteration you get a new variable. That means that you can safely use a closure inside a loop.</p>

<pre><code>// Logs 3 thrice, not what we meant.
for (var i = 0; i &lt; 3; i++) {
  setTimeout(() =&gt; console.log(i), 0);
}

// Logs 0, 1 and 2, as expected.
for (let j = 0; j &lt; 3; j++) {
  setTimeout(() =&gt; console.log(j), 0);
}
</code></pre>

<h2>Temporal dead zone</h2>

<p>Because of <a href="https://stackoverflow.com/q/33198849/3853934">the temporal dead zone</a>, variables declared using <code>let</code> can't be accessed before they are declared. Attempting to do so throws an error.</p>

<pre><code>console.log(noTDZ); // undefined
var noTDZ = 43;
console.log(hasTDZ); // ReferenceError: hasTDZ is not defined
let hasTDZ = 42;
</code></pre>

<h2>No re-declaring</h2>

<p>You can't declare the same variable multiple times using <code>let</code>. You also can't declare a variable using <code>let</code> with the same identifier as another variable which was declared using <code>var</code>.</p>

<pre><code>var a;
var a; // Works fine.

let b;
let b; // SyntaxError: Identifier 'b' has already been declared

var c;
let c; // SyntaxError: Identifier 'c' has already been declared
</code></pre>

<h1><code>const</code></h1>

<p><code>const</code> is quite similar to <code>let</code>—it's block-scoped and has TDZ. There are, however, two things which are different.</p>

<h2>No re-assigning</h2>

<p>Variable declared using <code>const</code> can't be re-assigned.</p>

<pre><code>const a = 42;
a = 43; // TypeError: Assignment to constant variable.
</code></pre>

<p>Note that it doesn't mean that the value is immutable. Its properties still can be changed.</p>

<pre><code>const obj = {};
obj.a = 42;
console.log(obj.a); // 42
</code></pre>

<p>If you want to have an immutable object, you should use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze" rel="noreferrer"><code>Object.freeze()</code></a>.</p>

<h2>Initializer is required</h2>

<p>You always must specify a value when declaring a variable using <code>const</code>.</p>

<pre><code>const a; // SyntaxError: Missing initializer in const declaration
</code></pre>


blocks|key|1365019|text|let是es6的一部分。这些函数将以简单的方式解释不同之处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1365020|function+varTest()+{
++var+x+=+1;
++if+(true)+{
++++var+x+=+2;++//+same+variable!
++++console.log(x);++//+2
++}
++console.log(x);++//+2
}

function+letTest()+{
++let+x+=+1;
++if+(true)+{
++++let+x+=+2;++//+different+variable
++++console.log(x);++//+2
++}
++console.log(x);++//+1
}|code-block|syntax|javascript|1365021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>let is a part of es6. These functions will explain the difference in easy way.</p>

<pre><code>function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
</code></pre>


blocks|key|1580120|text|在MDN中检查此链接|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1580121|let+x+=+1;

if+(x+===+1)+{
let+x+=+2;

console.log(x);
//+expected+output:+2
}

console.log(x);
//+expected+output:+1|code-block|syntax|javascript|1580122|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let^0|1|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Check this link in
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" rel="nofollow noreferrer">MDN</a></p>

<pre><code>let x = 1;

if (x === 1) {
let x = 2;

console.log(x);
// expected output: 2
}

console.log(x);
// expected output: 1
</code></pre>


blocks|key|1580170|text|我希望将这些关键字链接到执行上下文，因为执行上下文在所有这一切中都很重要。执行上下文有两个阶段:创建阶段和执行阶段。此外，每个执行上下文都有一个变量Environment和Execution+(其词法环境)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1580171|在执行上下文的创建阶段，var、let和const仍将其变量存储在内存中，在给定执行上下文的变量Environment中具有未定义的值。不同之处在于执行阶段。如果在赋值之前引用用var定义的变量，那么它将是未定义的。不会引发任何异常。|1580172|但是，在声明变量之前，不能引用使用let或const声明的变量。如果您试图在声明它之前使用它，那么在执行上下文的执行阶段将引发异常。现在，由于执行上下文的创建阶段，变量仍然在内存中，但引擎不允许您使用它：|1580173|function+a(){
++++b;
++++let+b;
}
a();
>+Uncaught+ReferenceError:+b+is+not+defined|code-block|syntax|javascript|1580174|对于使用var定义的变量，如果引擎在当前执行上下文的变量Environment中找不到该变量，则它将沿着作用域链(外部环境)向上移动，并检查外部环境的变量Environment中的变量。如果它在那里找不到它，它将继续搜索范围链。但let和const并非如此。|1580175|let的第二个特性是它引入了块作用域。块由大括号定义。示例包括函数块、if块、for块等。当您在块内使用let声明变量时，该变量仅在块内可用。实际上，每次运行该块时，例如在for循环中，它都会在内存中创建一个新变量。|1580176|ES6还引入了const关键字来声明变量。const也是块作用域。let和const之间的不同之处在于，const变量需要使用初始化器声明，否则将生成错误。|1580177|最后，当涉及到执行上下文时，用var定义的变量将被附加到'this‘对象。在全局执行上下文中，这将是浏览器中的窗口对象。这不是let或const的情况。|1580178|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>I want to link these keywords to the Execution Context, because the Execution Context is important in all of this. The Execution Context has two phases: a Creation Phase and Execution Phase. In addition, each Execution Context has a Variable Environment and Outer Environment (its Lexical Environment). </p>

<p>During the Creation Phase of an Execution Context, var, let and const will still store its variable in memory with an undefined value in the Variable Environment of the given Execution Context. The difference is in the Execution Phase. If you use reference a variable defined with var before it is assigned a value, it will just be undefined. No exception will be raised. </p>

<p>However, you cannot reference the variable declared with let or const until it is declared. If you try to use it before it is declared, then an exception will be raised during the Execution Phase of the Execution Context. Now the variable will still be in memory, courtesy of the Creation Phase of the Execution Context, but the Engine will not allow you to use it:</p>

<pre><code>function a(){
    b;
    let b;
}
a();
&gt; Uncaught ReferenceError: b is not defined
</code></pre>

<p>With a variable defined with var, if the Engine cannot find the variable in the current Execution Context's Variable Environment, then it will go up the scope chain (the Outer Environment) and check the Outer Environment's Variable Environment for the variable. If it cannot find it there, it will continue searching the Scope Chain. This is not the case with let and const. </p>

<p>The second feature of let is it introduces block scope. Blocks are defined by curly braces. Examples include function blocks, if blocks, for blocks, etc. When you declare a variable with let inside of a block, the variable is only available inside of the block. In fact, each time the block is run, such as within a for loop, it will create a new variable in memory.</p>

<p>ES6 also introduces the const keyword for declaring variables. const is also block scoped. The difference between let and const is that const variables need to be declared using an initializer, or it will generate an error.</p>

<p>And, finally, when it comes to the Execution Context, variables defined with var will be attached to the 'this' object. In the global Execution Context, that will be the window object in browsers. This is not the case for let or const.</p>


blocks|key|1580212|text|我认为这些术语和大多数例子有点压倒一切，我个人遇到的主要问题是理解什么是"Block“。在某种程度上，我意识到，除了IF语句之外，块可以是任何大括号。函数或循环的左方括号{将定义一个新的块，在其中使用let定义的任何内容在同一事物(函数或循环)的右方括号}之后将不可用；考虑到这一点，更容易理解：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1580213|​|1580214|let+msg+=+"Hello+World";

function+doWork()+{+//+msg+will+be+available+since+it+was+defined+above+this+opening+bracket!
++let+friends+=+0;
++console.log(msg);

++//+with+VAR+though:
++for+(var+iCount2+=+0;+iCount2+<+5;+iCount2%2B%2B)+{}+//+iCount2+will+be+available+after+this+closing+bracket!
++console.log(iCount2);
++
++++for+(let+iCount1+=+0;+iCount1+<+5;+iCount1%2B%2B)+{}+//+iCount1+will+not+be+available+behind+this+closing+bracket,+it+will+return+undefined
++console.log(iCount1);
++
}+//+friends+will+no+be+available+after+this+closing+bracket!
doWork();
console.log(friends);|code-block|syntax|javascript|1580215|1580216|entityMap^0|1M|2|2D|1|2S|3|3J|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|O|$]]

<p>I think the terms and most of the examples are a bit overwhelming,
The main issue i had personally with the difference is understanding what a "Block" is.
At some point i realized, a block would be any curly brackets except for <code>IF</code> statement.
an opening bracket <code>{</code> of a function or loop will define a new block, anything defined with <code>let</code> within it, will not be available after the closing bracket <code>}</code> of the same thing (function or loop);
With that in mind, it was easier to understand:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let msg = "Hello World";

function doWork() { // msg will be available since it was defined above this opening bracket!
  let friends = 0;
  console.log(msg);

  // with VAR though:
  for (var iCount2 = 0; iCount2 &lt; 5; iCount2++) {} // iCount2 will be available after this closing bracket!
  console.log(iCount2);
  
    for (let iCount1 = 0; iCount1 &lt; 5; iCount1++) {} // iCount1 will not be available behind this closing bracket, it will return undefined
  console.log(iCount1);
  
} // friends will no be available after this closing bracket!
doWork();
console.log(friends);</code></pre>
</div>
</div>
</p>


blocks|key|1365204|text|我刚刚遇到了一个用例，我必须使用var而不是let来引入新变量。下面是一个案例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1365205|我想创建一个具有动态变量名的新变量。|1365206|let+variableName+=+'a';
eval("let+"+%2B+variableName+%2B+'=+10;');
console.log(a);+++//+this+doesn't+work|code-block|syntax|javascript|1365207|var+variableName+=+'a';
eval("var+"+%2B+variableName+%2B+'=+10;');
console.log(a);+++//+this+works|1365208|上面的代码不起作用，因为eval引入了一个新的代码块。由于var在function作用域中声明了一个变量，因此使用var的声明将在这段代码之外声明一个变量。|1365209|另一方面，let在块范围内声明了一个变量。因此，a变量将只在eval块中可见。|1365210|entityMap^0|G|3|M|3|0|0|0|0|C|4|T|3|1L|3|0|5|3|O|1|U|4|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|T|$]]

<p>I just came across one use case that I had to use <code>var</code> over <code>let</code> to introduce new variable. Here's a case:</p>
<p>I want to create a new variable with dynamic variable names.</p>
<pre><code>let variableName = 'a';
eval(&quot;let &quot; + variableName + '= 10;');
console.log(a);   // this doesn't work
</code></pre>
<pre><code>var variableName = 'a';
eval(&quot;var &quot; + variableName + '= 10;');
console.log(a);   // this works
</code></pre>
<p>The above code doesn't work because <code>eval</code> introduces a new block of code. The declaration using <code>var</code> will declare a variable outside of this block of code since <code>var</code> declares a variable in the function scope.</p>
<p><code>let</code>, on the other hand, declares a variable in a block scope. So, <code>a</code> variable will only be visible in <code>eval</code> block.</p>


blocks|key|1365279|text|仅当您希望在脚本中将变量设置为全局变量，或者希望在同一范围内重新声明同一变量时，才使用var关键字。随着ES2015的出现，当你想将变量设置为函数作用域、块作用域、循环作用域或不想在同一作用域中重新声明变量时，请使用let关键字。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1365280|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Use var keyword only when you want to set variable as globally in your script or you want to redeclare the same variable in the same scope.
As ES2015 came, use let keyword when you want to set variable as function scope, block scope ,loop scope or don't want to redeclare the variable in the same scope.</p>


<h3>ECMAScript 6 introduced <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" rel="noreferrer">the <code>let</code> statement</a>.</h3>
<p>I've heard that it's described as a <code>local</code> variable, but I'm still not quite sure how it behaves differently than the <code>var</code> keyword.</p>
<p>What are the differences?. When should <code>let</code> be used instead of <code>var</code>?</p>


What's the difference between using "let" and "var"?

ECMAScript 6引入了。我听说它被描述为一个local变量，但我仍然不太确定它的行为与var关键字有什么不同。有什么不同？何时应该使用let而不是var

问使用"let“和"var”有什么区别？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用"let“和"var”有什么区别？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用"let“和"var”有什么区别？
EN