ES6功能扩展let声明和const声明

ES6之前，JS只有全局作用域和函数作用域，由于缺乏块级作用域，导致出现了很多怪异行为。ES6的新语法让开发者可以更好的控制作用域，本文详细介绍ES6新引入的块级作用域、let声明和const声明

let声明

let声明的用法与var声明相同。let声明可以把变量的作用域限制在当前代码块中，从而避免了由于变量提升导致的问题。

var声明中的变量提升

function getValue(condition){
  if(condition){
    var value = 'hello';
    return value;
  }else{
　　//此处可访问变量value，值为undefined
    return null;
  }
　//此处可访问变量value，值为undefined
}

上面的示例，在预编译阶段，javascript引擎会将上面的函数修改成下面这样

function getValue(condition){
  var value;
  if(condition){
    value = 'hello';
    return value;
  }else{
　　//此处可访问变量value，值为undefined
    return null;
  }
　//此处可访问变量value，值为undefined
}

变量value的声明被提升到函数顶部，而初始化操作依然留在原处，如果不注意，很可能引起错误。使用let声明就不会有这样的问题。

function getValue(condition){
  if(condition){
    let value = 'hello';
    return value;
  }else{
　　//变量value在此处不存在
    return null;
  }
　//变量value在此处不存在
}

如果condition为true，执行完if语句中的代码，value立刻被销毁。如果condition为false，就永远不会声明并初始化value

禁止重复声明

假设作用域中已经存在某个标识符，此时再使用let关键字声明它就会抛出错误

var count = 3;
let count = 5; //Uncaught SyntaxError: Identifier 'count' has already been declared

const声明

const用于声明常量，常量值一旦被设定后不可更改，所以每个通过const声明的常量必须进行初始化

类似于变量，常量也只在当前代码块中有效，一旦执行到代码块外会立即被销毁，所以常量同样也不会被提升到作用域顶部

if(condition){
  const num = 30; 
}
//此处无法访问num

禁止重复声明

与let类似，在同一作用域内用const声明已经存在的标识符也会导致语法错误

var count = 3;
const count = 5; //Uncaught SyntaxError: Identifier 'count' has already been declared

const声明不允许修改绑定，但允许修改值，所以用const声明对象后，可以修改该对象的属性值

const person = {
  name: 'wmui'
}

person.name = 'hello'
console.log(person) // {name: 'hello'}

person = {name: 'hello'}; // Uncaught TypeError: Assignment to constant variable

临时死区

从作用域顶部到声明变量语句之前的这个区域，被称为临时死区(temporal dead zone)，简称为TDZ。由于let和const声明的变量不会被提升到作用域顶部，所以在声明之前访问这些变量，会引发错误。

if(true){
    console.log(typeof value); // undefined
    var value = 'hello';
}

if(true){
  console.log(typeof value); // Uncaught ReferenceError: value is not defined
  let value = 'hello';
}

但是在let或const声明的作用域之外使用该变量就不会报错

console.log(typeof value); // undefined
if(true){
  let value = "blue";
}

循环绑定

一直以来，由于使用var声明的变量在循环外仍然可以访问，导致想要在循环中创建函数变的很困难。

var arr = [];
console.log(i)
for(var i = 0; i < 10;i++){
  arr.push(function(){
    console.log(i)
  })
}

arr.forEach(function(item){
  item()
})

上面代码中，预期的结果是输出数字0-9，但它却输出了10次10。这是因为循环结束后，变量i在外部的结果是10，而每次循环内部的函数引用的同一个变量i，于是就打印了十次10

为解决这个问题，可以在循环中使用立即调用函数表达式(IIFE)，以强制生成计数器变量的副本

var arr = [];
console.log(i)
for(var i = 0; i < 10;i++){
  arr.push(function(v){
    return function(){
      console.log(v)
    }
  }(i))
}

arr.forEach(function(item){
  item()
})

在循环内部，IIFE表达式为接受的每一个变量i都创建了一个副本并存储为变量v，这个变量的值就是相应迭代创建的函数所使用的值，因此调用每个函数都会像从0-9循环一样得到期望的值

虽然功能是实现了，但是代码不仅冗余而且不容易理解，于是let声明模仿上例中IIFE，简化了循环过程。

let arr = [];
console.log(i)
for(let i = 0; i < 10;i++){
  arr.push(function(){
    console.log(i)
  })
}

arr.forEach(function(item){
  item()
})

使用let声明后，每次循环时创建一个新变量i，并将其初始化为i的当前值，所以循环内部创建的每个函数都能得到属性它们自己的i的副本

对于for/in循环和for/of循环也是一样

let arr = [], obj = {a:1,b:2,c:3};

for(let key in obj) {
  arr.push(function(){
    console.log(key)
  })
}

arr.forEach(function(item){
  item()
})
// a
// b
// c

对于const声明来说，由于其无法改变变量的值，所以无法使用普通的for循环。但是可以在for/in循环中使用，这是因为for/in循环中每次迭代不会修改已有绑定

let arr = [], obj = {a:1,b:2,c:3};

for(const key in obj) {
  arr.push(function(){
    console.log(key)
  })
}

arr.forEach(function(item){
  item()
})
// a
// b
// c

属性变量

对var声明的变量来说，如果处于全局作用域，它们会自动成为window对象的属性。而如果使用let或const声明的变量，不会成为window对象的属性

// 示例1
var RegExp = "hello";
console.log(RegExp);//'hello'
console.log(window.RegExp);//'hello'

// 示例2
let RegExp = "hello";
console.log(RegExp);//'hello'
console.log(window.RegExp);//function RegExp() { [native code] }

因此，如果希望在window对象下定义变量，要使用var声明。如果不希望，则使得let或const

最佳实践

默认情况下建议使用const，因为大部分变量的值在初始化后不应再改变，预料外的变量值的改变是很多bug的源头，只有确实需要改变变量的值时使用let