let 和 const

1. let

let的作用，和var是类似的。是用来声明变量的

let声明的变量有一些特性：

• 块作用域

• 不能声明提前

• 在同一个块作用域中，不允许重复声明变量

• 暂时性死区

1.1 基本使用

let a=200;
console.log(a); // 200

a=400;
console.log(a); // 400
// 从这个层面来讲，和var是一样的效果

1.2 块级作用域

在es5中，变量的作用域只有两种：

• 全局作用域: 全局变量

• 函数作用域: 局部变量

let 则提供了块作用域的用法，也就是 let 声明的变量只在它所在的代码块有效。一般{}围起来的就是一个代码块。

{
    let b = 20;
    var c = 30;
    console.log(b); // 20
    console.log(c); // 30
}
console.log(c); // 30
console.log(b); // ReferenceError: b is not defined.

//
// 在进行for循环时，使用let来声明计数器变量，如下:
for (let i = 0; i < 10; i++) {
         //.......      
 }    
 // 使用let声明的变量，只在当前块有效果
 console.log(i); // ReferenceError: i is not defined
 // 此处说明，这个i并不是一个全局变量，而是块级变量。

1.3 不能声明提前

和var对比，var可以声明提前，但是let不可以。

{
    console.log(s);
    let  s = "let es6"
    console.log(s)
}

1.4 不能重复声明

在同一个块级作用域中，不能重复声明

{
    let a=100;
    let a=200;
    console.log(a);
}

在不同的作用域中，我们是可以声明的。

let a=400;  //全局的
console.log(a);
{
    let a=100;  //块级的
    console.log(a);
}    

1.5 暂时性死区–(面试)

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”,temporal dead zone。

var tmp = 123;

if (true) {
    tmp = 'abc'; // ReferenceError
    let tmp = 456;
}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

var tmp = 'hello';
if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束 (在这之前 tmp 不可用，有全局变量 tmp 也不行)
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

1.6 let应用

//给li循环绑定点击事件，当点击的时候，分别弹出0，1，2，3
//一般可能会这么写?

var lis = document.getElementsByTagName("li");    
for(var i = 0; i < lis.length; i++){
    lis[i].onclick=function(){
        alert(i)
    }
}    

//执行之后，发现每一个li点击之后弹出的都是4，并不是我们期望的0，1，2和3。

原因何在？

其实，我们一定要搞清楚，代码的编写和执行是分开的。换言之，事件的执行一定是分两个过程：

• 注册过程，绑定过程

• 触发了，执行注册好代码

在注册的过程中，for语句一定会执行。但是函数中的alert是不会执行的

循环完毕，相当于是如下代码：

 lis[0].onclick=function(){
     alert(i)
 }
 lis[1].onclick=function(){
     alert(i)
 }
 lis[2].onclick=function(){
     alert(i)
 }
 lis[3].onclick=function(){
     alert(i)
 }

其中的i，由于没有执行，仍然是i。循环完毕，i的值已经是4了。

然后，当我们点击具体的某一个li时，才会真正的执行function代码。此时，i的值就是外部的i，都会弹出4。

let 可以解决这个问题

for(let i=0;i<lis.length;i++){
    lis[i].onclick=function(){
        alert(i)
    }
}
//测试，ok

for循环的 { } 是一个代码块，每一个代码块中使用 let 声明了各自的变量 i，形成各自的块作用域 事件处理函数运行时找的就是自己所在块作用域的 i 。实际上，let 的出现，其实就是为了解决这一类的问题。

2. const

const 是用于定义常量的。const 定义的常量是不能修改的。

const PI=3.1415926;
console.log(PI);
PI=3.14; // 报错
console.log(PI)

• 不存在声明提前

• 只在当前的块级作用域内有效

• 不能重复声明

• 存在暂时性死区

2.1 对于引用数据类型

2.1.1 不能直接修改指向

const person = {
    name:'lucky',
    age:20,
    address:'中山西路666号'
}
person = {}; //报错

2.1.2 但是可以修改属性

const person = {
    name:'lucky',
    age:20,
    address:'中山西路666号'
}
person.age=21; // 允许
console.log(person);

实际上，我们说const真正不变的是常量保存的内容。如果是基本数据类型，就是值。如果是引用数据类型，就是指对象的地址，地址不变就ok。

3. 使用建议

如果这个值需要变化，就使用let。

如果这个值不会变化，就使用const。