ES6-let const变量

最新推荐文章于 2022-07-13 15:05:06 发布

原创最新推荐文章于 2022-07-13 15:05:06 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#let-const

本文对比了ES5中var变量的局限性与ES6中let和const的优势，包括变量名唯一性、常量定义及块作用域的支持，并通过实例展示了如何使用let解决常见的点击事件问题。

1.es5中var变量的缺陷：

1.变量名可重复 2.无法限制变量的修改 3.没有块作用域

    <script>
        /**
         * 1. es5 声明变量的方法 var
         * 缺陷：1.变量名可重复 2.无法限制变量的修改 3.没有块作用域
         * @type {number}
         */
        //1.变量名可重复
        var a=8;
        var a=9;

        //2.无法定义常量（无法限制变量的修改）
        var BAST_URL='http://'  // 这个还是变量，而不是常量

        //3.没有块作用域
        {
            var b=10;  //b 变量的作用域是以函数为单位
        }
        console.log(window.b); //在代码块外依然可以被调用

    </script>

2.ES6中let和const变量的优点：

1.变量名不可重复 2.可以限制变量的修改 3.有块作用域

    <script>
        /**
         * 2.es6 声明变量的方法  let 或者 const
         * 优点：1.变量名不可重复 2.可以限制变量的修改 3.有块作用域
         */
        //1.变量名不可重复
        let a=5;
        let a=6; // 执行时这会报变量重复声明的错误

        //2.可以定义常量（可以限制变量的修改）
        const BAST_URL='http://';  // 这个不是变量，而是常量
        BAST_URL='https://'; // 这里修改BAST_URL变量会报错

        //3.有块作用域
        {
            let b=3;  // b 变量的作用域是在这个{}块范围
            console.log(b); // 可以访问b变量
        }
        console.log(b); // 不可以访问b变量,未定义
    </script>

3.let变量的常见用法

界面上有三个按钮，分别给三个按钮添加点击事件

结果：打印都是3

<button class="btn">button1</button>
<button class="btn">button2</button>
<button class="btn">button3</button>

<script>
    var btns=document.getElementsByClassName('btn');
    console.log(btns.length);
    for(var i=0;i<btns.length;i++){
        btns[i].onclick=function () {
            alert(i); // 打印都是3 , 因为i的作用域是以函数为单位，而不是以{}块为单位
        }
    }
</script>

es5解决上述问题
使用闭包改变 i 的作用域


<script>
    var btns=document.getElementsByClassName('btn');
    console.log(btns.length);
    for(var i=0;i<btns.length;i++){
        (function (i) {
            btns[i].onclick=function () {
                alert(i); // 打印都是0,1,2 , 现在i的作用域是在每一个闭包函数中
            }
        })(i)
    }
</script>

ES6解决上述问题：
将 for 循环中的 var 改成 let

<script>
    var btns=document.getElementsByClassName('btn');
    console.log(btns.length);
    for(let i=0;i<btns.length;i++){
        btns[i].onclick=function () {
            alert(i); // 打印都是0,1,2 , 因为i的作用域是{},每一个块中都有对应的i
        }
    }
</script>