es6块级作用域

在阮一峰老师的es6教程中关于let的理解

• 原例使用var导致的变量提升

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
/*
此时
a[1]();
a[2]();
a[3]();
...
a[8]()；
a[9]()；
返回值都是10
*/

• 使用var帮助理解

/*
for循环中console.log(i)中的i都是一样的值
因为var的i存在变量提升，在每一次for循环后
 a[i] = function () {
   console.log(i);
  };
  中a[i]中的i的值都是一样的
为什么都是一样的？
*/

//循环拆开理解
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}

//第一次循环 
{
  i =  0 ;
  a[0] = function () {
    console.log(i);
  };
}

//第二次循环
{
  i =  1 ;//此时上一次循环中的i值重新赋值为1
  a[1] = function () {
    console.log(i);
  };
}

//第三次循环
{
  i =  2 ;//此时以上循环中的i值都重新赋值为2
  a[2] = function () {
    console.log(i);
  };
}

//一直到第十次循环
{
  i =  9 ;//此时以上循环中的i值都重新赋值为10
  a[9] = function () {
    console.log(i);
  };
}

//因为每一次循环结束后i的值都会被下一次循环的得到的新的i的值改变，一直到最后一次循环结束，那么每次循环得到的值都是最后一次循环得到的值，因为var变量提升导致

a[6]();//10

• 使用let

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

// 此时
a[1]();//1
a[2]();//2
a[3]();//3
a[4]();//4
...
a[9]();//9

• 使用let帮助理解

//因为是let声明的变量不存在变量提升

//第一次循环 
{
  let i =  0 ;
  a[0] = function () {
    console.log(i);
  };
}

//第二次循环
{
  let i =  1 ;//i不会改变，作用域还在这个块中
  a[1] = function () {
    console.log(i);
  };
}

//一直到第十次循环
{
  i =  9 ;//i不会改变，作用域还在这个块中
  a[9] = function () {
    console.log(i);
  };
}

• 帮助理解let作用域

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。