ES6中块级作用域的横空出世(let、var、const)

let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1. 不允许重复声明；
2. 块儿级作用域（局部变量）；
3. 不存在变量提升；
4. 不影响作用域链；

let创建变量代码示例：

// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100 ; // 单个声明并赋值
let f = 521 , g = 'iloveyou', h = []; // 批量声明并赋值

不允许重复声明：

let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been
declared

块儿级作用域（局部变量）

let cat = "猫";
console.log(cat);
}
console.log(cat);
// 报错：Uncaught ReferenceError: cat is not defined

不存在变量提升

// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；

console.log(people1); // 可输出默认值
console.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升

不影响作用域链：

// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
		{
            let p = "大哥";
			var s;               //p的作用域是块(花括号内)级的，而s的作用域为全局
            function fn() {
                console.log(p); // 这里是可以使用的
            }
            fn();
        }

应用场景

以后声明变量使用 let 就对了；

let案例：点击div更改颜色

 // 获取div元素对象
        let items = document.getElementsByClassName('item');


        //ES5错误解法
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                items[i].style.background = 'pink'; 
                alert('点击了' + i + '个')
            }
            // 由于点击事件是异步的，i又是全局的，所以每个item用的i都是同一个i。

        }
        //ES5解法1
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                this.style.background = 'pink'; // 写法一：常规写法一般无异常
                alert('点击了' + i + '个')
            }
        }
        //ES5解法1
        for (var i = 0; i < items.length; i++) {
            //使用闭包，控制作用域
            (function (i) {
                items[i].onclick = function () {
                    items[i].style.background = 'pink'; // 写法二
                    alert('点击了' + i + '个')
                }
            })(i)
        }
        
        // ES6解法
        for (let i = 0; i < items.length; i++) {

            items[i].onclick = function () {
                // 修改当前元素的背景颜色
                // this.style.background = 'pink'; // 写法一：常规写法一般无异常
                items[i].style.background = 'pink'; // 写法二
                // 写法二：需要注意的是for循环内的i必须使用let声明 //点击事件是异步的
                // 如果使用var就会报错，因为var是全局变量，
                // 经过循环之后i的值会变成3，items[i]就会下标越界
                // let是局部变量
                // 我们要明白的是当我们点击的时候，这个i是哪个值
                // 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3
                // 由于let声明的是局部变量，每一个保持着原来的值
                // 点击事件调用的时候拿到的是对应的i
            }

        }

const 关键字

const 关键字用来声明 常量 ，const 声明有以下特点：

1. 声明必须赋初始值·；
2. 标识符一般为大写（习惯）；
3. 不允许重复声明；
4. 值不允许修改；
5. 块儿级作用域（局部变量）；

注:当常量为对象时，值不允许修改含义是指向的对象不能修改，但是可以改变对象内部的属性

const创建变量代码示例：

        // const声明常量
        const DOG = "旺财";
        console.log(DOG);
        // 1. 声明必须赋初始值；
        // const CAT;
        // 报错：Uncaught SyntaxError: Missing initializer in const  declaration
        
        // 2. 标识符一般为大写（习惯）；
        // const dog = "旺财"; // 小写也不错
        
        // 3. 不允许重复声明；
        // const CAT = "喵喵";
        // const CAT = "喵喵";
        // 报错：Uncaught SyntaxError: Identifier 'CAT' has already been declared
        
       //  注意：对数组元素的修改和对对象内部的修改是可以的（数组和对象存的是引用地址）；
        // 4. 值不允许修改；
        // const CAT = "喵喵";
        // CAT = "咪咪";
        // 特例：const arr = ['55','66'];
        // arr.push('77');  //arr的中已经接上了‘77’ 这是因为arr指向的地址并没有发生改变
        // 报错：Uncaught TypeError: Assignment to constant variable.
        
        // 5. 块儿级作用域（局部变量）；
        // {
        // const CAT = "喵喵";
        // console.log(CAT);
        // }
        // console.log(CAT);
        // 报错：Uncaught ReferenceError: CAT is not defined
  

应用场景：

声明对象类型使用 const，非对象类型声明选择 let；