ES6新增语法：使用 let 和 const 关键字声明变量以及 let、const、var三者的区别

1、ES6 简介

1.1 什么是 ES6 ?

ES 的全称是 ECMAScript ，它是由 ECMA 国际标准化组织，制定的一项脚本语言的标准化规范。

ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。

1.2 为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript 语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性 。
• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。

2、ES6 的新增语法—— let

let

ES6中新增的用于声明变量的关键字。

• let 声明的变量只在所处于的块级有效

		// 1. let关键字就是用来声明变量的
		let a = 10;
		console.log(a);   // 10

        // 2. 使用let关键字声明的变量具有块级作用域{}
        if (true) {
            let b = 20;
            console.log(b);  // 20
            if (true) {
                let c = 30;
            }
            console.log(c);  // c is not defined
        }
        console.log(b);  // b is not defined

        // 3. 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
        if (true) {
            let num = 100;
            var abc = 200;
        }
        console.log(abc);  // 200
        console.log(num);  // num is not defined

注意：使用 let 关键字声明的变量才具有块级作用域，使用 var 声明的变量不具备块级作用域特性。

• 使用 let 关键字声明变量可以防止循环变量变成全局变量

        // 4. 防止循环变量变成全局变量
        for (var i = 0; i < 3; i++) { }
        console.log(i);  // 3
        
        for (let j = 0; j < 3; j++) { }
        console.log(j);  // j is not defined

• 不存在变量提升

        // 5. 使用let关键字声明的变量没有变量提升
        // 相当于 var x;
        console.log(x);  // undefined
        var x = 100;
        console.log(y);  // Cannot access 'y' before initialization
        let y = 200;

• 暂时性死区

        // 6. 使用let关键字声明的变量具有暂时性死区特性
        var number = 10;
        if (true) {
            console.log(number);   // Cannot access 'number' before initialization
            let number = 20;
        }

3、let 经典面试题

（1）使用 var 关键字声明变量

        // 此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值
        var arr = [];
        for (var i = 0; i < 2; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        arr[0](); // 2
        arr[1](); // 2

经典面试题图解：此题的关键点在于变量 i 是全局的，函数执行时输出的都是全局作用域下的 i 值。

（2）使用 let 关键字声明变量

        // 此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，
        // 函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.
        let arr1 = [];
        for (let i = 0; i < 2; i++) {
            arr1[i] = function () {
                console.log(i);
            }
        }
        arr1[0](); // 0
        arr1[1](); // 1

经典面试题图解：此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值。

总结：所以使用 let 关键字声明变量可以防止循环变量变成全局变量。

4、ES6 的新增语法—— const

const

作用：声明常量，常量就是值（内存地址）不能变化的量。

• 具有块级作用域

        // 1. 使用const关键字声明常量具有块级作用域
        if (true) {
            const a = 10;
            if (true) {
                const a = 20;
                console.log(a);  // 20
            }
            console.log(a); // 10
        }
        console.log(a);  // a is not defined

• 声明常量时必须赋值

        // 2. 使用const关键字声明的常量必须赋初始值
        // const PI;  // Missing initializer in const declaration
        const PI = 3.14;

• 常量赋值后，值不能修改

        // 3. 常量声明后值不可更改 
        // PI = 100;   // Assignment to constant variable.
        const ary = [100, 200];
        ary[0] = 123;
        console.log(ary);  // [123, 200]
        ary = [1, 2];
        console.log(ary);  // Assignment to constant variable

5、let、const、var 的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改