ES6 学习 let & const

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20087231/article/details/83178068

1.let

1.1 作用于只局限于当前代码块，var作用于当前函数的作用域

        {
            let str = '张三';
            var str1 = '李四';
            console.log(str);
            console.log(str1);
        }
        console.log(str1);
        console.log(str);

 1.2 使用let申明的变量作用域不会被提升

{
            console.log(str1); // undefined
            var str1 = '李四';
}

{
            console.log(str1); // Uncaught ReferenceError: str1 is not defined
            let str1 = '李四';
}

1.3 在相同的作用域下不能申明相同的变量

{
            var str = '张三';
            var str = '李四';
            console.log(str); // 李四
}

{
            let str = '张三';
            let str = '李四';
            console.log(str); // Uncaught SyntaxError: Identifier 'str' has already been declared
}

1.4 for循环体现let的父子作用域

var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                console.log('点击了第 ' + i + ' 个按钮');
            }
        }

 for 循环同步的，事件触发是异步的，事件作用域下找不到i，在for里面找到的都是5，以前解决方案是通过闭包来解决

 var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            (function(i) {
                btns[i].onclick = function() {
                    console.log('点击了第 ' + i + ' 个按钮');
                }
            })(i);
        }

 使用let，for循环的i和事件的i都是单独的

let btns = document.querySelectorAll('button');
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                console.log('点击了第 ' + i + ' 个按钮');
            }
        }

 2. const 申明常量

2.1 只在当前代码块有效

2.2 作用域不能被提升

2.3 同一作用域下不能重复申明

2.4 申明的常量必须赋值

{
            const name; // Uncaught SyntaxError: Missing initializer in const declaration
            name = '张三';
            console.log(name);
        }

2.5 常量申明不能被修改

{
            const name = '张三';
            name = '李四';
            console.log(name); // Uncaught TypeError: Assignment to constant variable.
        }

2.6 对象特例，根据栈区的地址修改堆区的值

const obj = {
            name: '张三'
        };
        console.log(obj.name); // 张三
        obj.name = '李四';
        console.log(obj.name); // 李四