let和var

let 和 var的区别

1. let 不能重复声明，但var可以
2. let会产生块级作用域，且只在自己的作用域内生效，但var不受限制；在ES5中只有函数作用域和全局作用域，当我们在{}中使用了let或者const时，{}的范围就是一个块级作用域，此时let或const只能在{}中访问。

{
  let a = 1;
  var b = 2;
}
console.log(a);//报错
console.log(b);//2

3. let不存在变量提升

console.log(a);//undefined
var a = 1;
console.log(b);//报错
let b = 1;

4. let存在暂时性死域：当一个区域存在let声明时，这个区域就形成了一个封闭的作用域，在let声明前使用这个变量就会报错，也就是只能先声明再使用，这种语法也称为暂时性死域。

{
  let a = 1;
  {
    console.log(a);//报错
    let a =2;
  }
}

const声明的特点

• let的特性const都有，不能反复声明，存在块级作用域，不存在变量提升，也有暂时性死域的特点。
• let区别在于，const声明的是一个常量，一旦声明就无法修改。

const a = {};
a.b = 1;
console.log(a);//{b:1}

上述代码中我声明了一个常量对象a，但是a对象修改了，并没有报错，这是为什么呢？从本质上理解，const声明的变量并非变量的值不能修改，而是可以理解为变量的指向不能修改。
只是基本类型的数据，键值都在栈内存中，但对于复杂数据类型，变量指向的其实是堆内存中存放值所提供的一个地址。所以我们不能修改复杂数据类型的指向，这样就会报错：

const a = {};
a.b = 1;
console.log(a);//{b:1}
a = [];//这里直接修改了变量a的指向，不允许了。
console.log(a);//报错

for循环中let 和 var

一个问题

//使用var声明，得到3个3
var a = [];
for (var i = 0; i < 3; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[0](); //3
a[1](); //3
a[2](); //3
//使用let声明，得到0,1,2
var a = [];
for (let i = 0; i < 3; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[0](); //0
a[1](); //1
a[2](); //2

同样的代码，使用let 定义i和使用var定义i得到的是截然不同的结果。

前提：for循环怎么执行的

首先，对于一个for循环，设置循环变量的地方是一个父作用域，而循环体代码在一个子作用域内；别忘了for循环还有条件判断，与循环变量的自增。

for循序的执行顺序是这样的：设置循环变量(var i = 0) ==》循环判断(i<3) ==》满足执行循环体 ==》循环变量自增(i++)

使用这种逻辑改写上述代码
var：

var a = [];
{
  //我是父作用域
  var i = 0;
  if (0 < 3) {
    a[0] = function () {
      //我是子作用域
      console.log(i);
    };
  };
  i++; //为1
  if (1 < 3) {
    a[1] = function () {
      console.log(i);
    };
  };
  i++; //为2
  if (2 < 3) {
    a[2] = function () {
      console.log(i);
    };
  };
  i++; //为3
  // 跳出循环
}
//调用N次指向都是最终的3
a[0](); //3
a[1](); //3
a[2](); //3

let：

var a = []; {
    //我是父作用域
    let i = 0;
    if (i < 3) {
        //这一步模拟底层实现
        let k = i;
        a[k] = function () {
            //我是子作用域
            console.log(k);
        };
    };
    i++; //为1
    if (i < 3) {
        let k = i;
        a[k] = function () {
            console.log(k);
        };
    };
    i++; //为2
    if (i < 3) {
        let k = i;
        a[k] = function () {
            console.log(k);
        };
    };
    i++; //为3
    // 跳出循环
}
a[0](); //0
a[1](); //1
a[2](); //2

上述代码中，每次迭代新增了let k = i这一步，且这一步由底层代码实现，我们看不到；

这一行代码起到两个作用：

• 第一是产生了块级作用域，解释了这个块级作用域是怎么来的，由于块级的作用，导致3个k互不影响。
• 第二是通过赋值的行为让3个k都访问外部作用域的i，让三个k建立了联系，这也解释了自增时怎么知道上一步是多少。

一个例子

var a = []
for (let y = {i: 0}; y.i < 3; y.i++) {
    a[y.i] = function () {
        console.log(y.i);
    };
};
a[0]();
a[1]();
a[2]();

改写：

var a = []; {
    //我是父作用域
    let y = {
        i: 0
    };
    if (y.i < 3) {
        //这一步模拟底层实现
        let k = y;
        a[k.i] = function () {
            //我是子作用域
            console.log(k.i);
        };
    };
    y.i++; //为1
    if (y.i < 3) {
        let k = y;
        a[k.i] = function () {
            console.log(k.i);
        };
    };
    y.i++; //为2
    if (y.i < 3) {
        let k = y;
        a[k.i] = function () {
            console.log(k.i);
        };
    };
    y.i++; //为3
    // 跳出循环
}
a[0](); //3
a[1](); //3
a[2](); //3

注意，在模拟代码中为let k = y而非let k = y.i。我们始终使用let声明一个新变量用于保存for循环中的初始变量y，以达到创建块级作用域的目的，即使y是一个对象。

那为什么有了块级作用域，最终结果还是相同呢，这就涉及了深/浅拷贝的问题。由于y属于引用数据类型，let k = y 本质上是保存了变量 y 指向值的引用地址，当循环完毕时，y中的 i 已自增为3。

变量k因为块级作用域的原因虽然也是三个不同的k，但不巧的是大家保存的是同一个引用地址，所以输出都是3了。
大佬在这里。。