es6 中的let,const

在es6中，let的作用和var差不多，都是用来声明变量的，但是他们之间的区别在于作用域不同，大家都知道在js中没有块级作用域，例如：

for(var i=0;i<10;i++){
   console.log(i)
}

在上面的代码中，i的作用域范围是由执行环境决定的，如果是在全局环境中执行，则i的作用域就是全局的，如果是在某一个函数中执行，则i的作用域就是在此函数中，例如：

function test(){
  for(var i=0;i<10;i++){
     console.log(i) //0,1,2,3,4,5,6,7,8,9
  }
 console.log("执行后的i="+i)  // i=10 
}
test();
console.log("全局作用域还会存在i吗,i="+i); //Uncaught ReferenceError: i is not defined(…)

那如果此时我么就只需要块级作用域怎么办？此时可以用let，例如：

function f1() {
  var a = 8;
  let n = 5;
  if (true) {
      let n = 10;
      var a = 20
  }
  document.write(n); // 5
  document.write(a); // 20
}
f1();

用var声明的循环：

for(var i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);

你会发现循环体外的i变量被污染了，如果在外部再使用i时就会出现问题，这是开发者不想看到的。我们再利用let声明，就可以解决这个问题。

用let声明的循环

for(let i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);

你执行时会发现控制台报错了，找不到循环体外的i变量。通过两种声明的比较，可以明白let在防止程序数据污染上还是很有用处的。我们要努力去习惯用let声明，减少var声明去污染全局空间，在vue的使用中也要注意这点。

 

例如下面代码，体会下let和var的区别

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

此时输出的是6，如果换成var ,得到的结果是怎样了？

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

为什么会得到这种结果了？

变量 `i` 作用的 block 是 `for` 循环，当 `a[i]` 被调用的时候会引用 `i` 的值（查找作用域），在循环的时候代表不同的值，输出的也是不同的值。

 如果用let声明i，对于每个a[i]()都有一个独立的i，故a[i]()会打印出该轮循环时i的值；
a[6]()会输出6……

而var i的情况是i是全局的，无论a[i]()中的i取何值，对应函数中i的值都是同一个i……由于循环结束后i=10，所以输出10。 

 

例如：

var messages = ["喵！", "我是一只会说话的猫！", "回调（callback）非常有趣!"];
    for (var i = 0; i < messages.length; i++) {
      setTimeout(function () {
        alert(messages[i]);
      }, i * 1500);
    }

此时会输出三个“undefined”,原因是因为循环本身和三次setTimeout共享变量i，

当循环结束执行时，i的值为3（因为messages.length的值为3），此时回调尚未被触发。

所以当第一个timeout执行时，调用messages[i]，此时i的值为3，所以猫咪最终打印出来的是messages[3]的值亦即undefined。

 

const 声明的常量，有如下特点。

// 1）一旦声明不值不可改变
const PI = 3.1415;
PI // 3.1415
 
PI = 3;
PI // 3.1415
 
const PI = 3.1;
PI // 3.1415

//2）也具有块级作用域
if (true) {
  const max = 5;
}
document.write(max);  // ReferenceError 常量MAX在此处不可得 

//3）变量不可提升，必须先声明后食用
if (true) {
  document.write(MAX); // ReferenceError
  const MAX = 5;
}

//4）不可重复
var message = "Hello!";
let age = 25;
 
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;