let 和 var

相信有很多前端工程师除了在声明函数时会用到 function 其余的变量声明一律使用 var, 不过随着浏览器对es6逐渐支持我们应该学着使用 let 和 const 而不是使用存在诸多弊端的 VAR

var 存在着哪些弊端呢？

• 没有块级作用域，很容易声明全局变量
• 变量提升
• 可以重复声明

典型的面试题

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

arr[6](); // 期望输出 6 实际输出 10
arr[7](); // 期望输出 7 实际输出 10
arr[8](); // 期望输出 8 实际输出 10

在ES6诞生之前我们的解决方法基本是这样的

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

arr[6](); // 6
arr[7](); // 7
arr[8](); // 8

ES6诞生以后呢

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

arr[6](); // 6
arr[7](); // 7
arr[8](); // 8

是不是简单了很多, 这一切都要归功于let的块级作用域, 这里使用 var 声明的i是全局变量, 当for循环执行完成以后, i的值已经变成了10, 而在 console.log(i) 的时候访问的同样是全局下的 i 因此我们会发现无论执行哪个函数 i 的值都是10;
而使用 let 呢, 因为 let 声明的变量只在 let 命令所在的代码块内有效, 所以每一次循环的i其实都是一个新的变量, 而当执行 console.log(i) 时, js会沿着作用域链首先找到最近的 i 并输出, 因此会输出我们所期望的 i 值.

除了存在块级作用域 相对于 var 不同之处还有

• 不存在变量提升

console.log(a); // undefined;
var a = 1;

console.log(b); // b is not defined
let b = 2;

这里用 var 声明变量时, 因为存在变量提升, 在声明之前访问该变量会输出 undefined 并不会报错, 而使用 let 声明的变量在声明之前访问则会报错, 这样更符合人的常规逻辑.

• 暂时性死区

var a = 123;

if (true) {
  a = 'abc'; // a is undefined;
  let a;
}

暂时性死区规定在声明之前就使用这些变量，就会报错。和没有变量提升类似, 这些功能主要是为了减少程序运行时的错误, 使代码更加规范.

• 不允许重复声明

let c = 2;
let c = 3; // Identifier 'c' has already been declared

同一个作用域内 不允许重复声明同一个变量。

• 不会成为全局对象(window)的属性

var a = 3;
console.log(window.a); // 3
let b = 4;
console.log(window.b); // undefined;

const

除了 let 有时候我们也许更需要 const

const 和 let 的唯一区别就是，const 不可以被更改，所以当声明变量的时候，尤其是在声明容易被更改的全局变量的时候，尽量使用 const。