es6块级绑定中let and const的详细分析

function getValue(condition) {
if (condition) {
var value = "blue";
// 其他代码
return value;
} else {
// value 在此处可访问，值为 undefined
return null;
}
// value 在此处可访问，值为 undefined
}

function getValue(condition) {
if (condition) {
let value = "blue";
// 其他代码
return value;
} else {
// value 在此处不可用
return null;
}
// value 在此处不可用
}

var a = 30;
//报错
let a = 30;

var count = 30;
// 不会抛出错误
if (condition) {
let count = 40;
// 其他代码
}

// 有效的常量
const maxItems = 30;
// 语法错误：未进行初始化
const name;

const person = {
name: "Nicholas"
};
// 工作正常
person.name = "Greg";
// 抛出错误
person = {
name: "Greg"
};

if (condition) {
const maxItems = 5;
// 其他代码
}
// maxItems 在此处无法访问

for (var i = 0; i <p>输出的结果并不是预期的值而是10;是因为var声明导致的变量的提升。聪明的你肯定会想到使用块级绑定来进行变量声明</p><pre class="brush:php;toolbar:false">for (let i = 0; i <p>i在此处是不是会正常输出呢，其实不会，在这个例子中会导致报错，为什么呢？因为i在此处不可访问。本例中的变量 i 仅在 for 循环内部可用，一旦循环结束，该变量在任意位置都不可访问。</p><p>我们在来看看一下代码</p><pre class="brush:php;toolbar:false">var funcs = [];
for (var i = 0; i <p>你原本可能预期这段代码会输出 0 到 9 的数值，但它却在同一行将数值 10 输出了十次。这是因为变量 i 在循环的每次迭代中都被共享了，意味着循环内创建的那些函数都拥有对于同一变量的引用。在循环结束后，变量 i 的值会是 10 ，因此当 console.log(i) 被调用时，<br>每次都打印出 10 。</p><p>为了修正这个问题，开发者在循环内使用立即调用函数表达式（IIFEs），以便在每次迭代中强制创建变量的一个新副本，示例如下：</p><pre class="brush:php;toolbar:false">var funcs = [];
for (var i = 0; i <h3>循环内的 let 声明</h3><p>let 声明通过有效模仿上例中 IIFE 的作用而简化了循环。在每次迭代中，都会创建一个新的<br>同名变量并对其进行初始化。这意味着你可以完全省略 IIFE 而获得预期的结果，就像这样</p><pre class="brush:php;toolbar:false">var funcs = [];
for (let i = 0; i <p>我们是否会想到这个问题：为什么同样的代码使用let声明会导致不一样的结果呢?<br><strong>在循环中let声明每次都创建了一个新的i变量，因此在循环内部创建的函数获得了各自的i副本,而每个i副本的值都会在每次的循环迭代声明变量的时候确定了</strong></p><pre class="brush:php;toolbar:false">var funcs = [],
object = {
a: true,
b: true,
c: true
};
for (let key in object) {
funcs.push(function() {
console.log(key);
});
}
funcs.forEach(function(func) {
func(); // 依次输出 "a"、 "b"、 "c"
});

var funcs = [];
// 在一次迭代后抛出错误
for (const i = 0; i <p>在此代码中， i 被声明为一个常量。循环的第一次迭代成功执行，此时 i 的值为 0 。在<br>i++ 执行时，一个错误会被抛出，因为该语句试图更改常量的值。因此，在循环中你只能使<br>用 const 来声明一个不会被更改的变量<br>而另一方面， const 变量在 for-in 或 for-of 循环中使用时，与 let 变量效果相同。因<br>此下面代码不会导致出错：</p><pre class="brush:php;toolbar:false">var funcs = [],
object = {
a: true,
b: true,
c: true
};
// 不会导致错误
for (const key in object) {
funcs.push(function() {
console.log(key);
});
}
funcs.forEach(function(func) {
func(); // 依次输出 "a"、 "b"、 "c"
});