ES6中的let和const关键字

最新推荐文章于 2024-08-20 16:40:46 发布

努力成长的__小白

最新推荐文章于 2024-08-20 16:40:46 发布

阅读量1.1k

点赞数

分类专栏：前端开发文章标签： es6

本文链接：https://blog.csdn.net/qq_55151340/article/details/123637809

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的let和const关键字。let用于声明块级作用域的变量，避免了变量提升和重复声明，同时存在暂时性死区。const则用于声明常量，其值不可更改，但需要注意的是，常量对象的属性或数组元素是可以修改的。文章还讨论了块级作用域与函数声明的影响，以及如何在ES6中正确使用let和const来防止内存泄漏和提高代码质量。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // let关键字，声明变量
        // 特点
        // 1.不存在变量提升
        // console.log(a);//报错
        // let a=111;
        //2.let存在块作用域，块作用域是if else  while等的大括号内
        {
            let a=111;
        }
        console.log(a);//报错
        {
            var b=111;
        }
        console.log(b);//b
        // 因此let更适合for循环，只在本轮的有效
        var a=[];
        for(let i=0;i<7;i++)
        {
           a[i]=function (){
               console.log(i);
            }
        }
        a[6]();//6

        var a=[];
        for(var i=0;i<7;i++)
        {
           a[i]=function (){
               console.log(i);
            }
        }
        a[6]();//7 因为循环结束后,i是全局变量是不会自动消失，会导致内存泄漏
        // 每一个a[i]都是7，因为var for{}是不算块作用域，所以i是全局变量，所以i是会被覆盖的

        // 3.let不影响作用域链
        {
            let a=111;
            function f(){
              console.log(a);//111
            }
        }

        // 4.在同一作用域声明变量不能重复 var可以重复声明，不能在函数内部重新声明参数。
        let a=111;
        let a=222;//报错
        


        // 5.暂时性死区
        // 在let命令声明变量tmp之前，都属于变量tmp的“死区”
        // ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，
        //从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
        if (true) {
            // TDZ开始
              tmp = 'abc'; // ReferenceError
              console.log(tmp); // ReferenceError

              let tmp; // TDZ结束
             console.log(tmp); // undefined

              tmp = 123;
             console.log(tmp); // 123
              }

              function bar(x = y, y = 2) {
              return [x, y];
              }
               bar(); // 报错,因为在y=2之前，就x=y,在y=2之前属于死区
            // 不报错
          var x = x;
          let x = x;// 报错
           // ReferenceError: x is not defined


           //块作用域和函数声明
           //    允许在块级作用域内声明函数。
          //函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
          //同时，函数声明还会提升到所在的块级作用域的头部。
          //在es5里面函数声明只能在顶级作用域和函数作用域中声明
          
          function f() { console.log('I am outside!'); }
          (function () {
            //    function f() { console.log('I am inside!'); }  ES5提升
            //    var f = undefined; ES6提升 相当于var声明
          if (false) {
                 // 重复声明一次函数f
               function f() { console.log('I am inside!'); }
                }
             f();
           }());
        //    ES5会得到I am inside  因为在if内声明的函数f会被提升到函数头部

        //    ES6会报错
        // 考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。
        //如果确实需要，也应该写成函数表达式，而不是函数声明语句。

        // 块级作用域内部，优先使用函数表达式
          {
             let a = 'secret';
             let f = function () {
              return a;
             };
            }
    </script>


   <script>
    // const关键字 是声明常量的，const声明一个只读的常量。一旦声明，常量的值就不能改变
    // 注意的点
    // 1.需要赋值
    const NAME='qqqq';
    // const GAE;//报错
    // 2.常量的值不能被修改
        NAME='1qqq';//报错
    // 与let是一样的有块作用域
    // 与let是一样的有不能变量提升，存在同样存在暂时性死区，const声明的常量，也与let一样不可重复声明。
    // 3.重要的特点
    // 并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动
    // 对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量
    // 但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址）
    //，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
    const foo = {};
    // 为 foo 添加一个属性，可以成功
    foo.prop = 123;
    foo.prop // 123
    // 将 foo 指向另一个对象，就会报错
    foo = {}; // TypeError: "foo" is read-only
   //不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的
   const a = [];
    a.push('Hello'); // 可执行
    a.length = 0;    // 可执行
    a = ['Dave'];    // 报错

    //将对象冻结，应该使用Object.freeze方法

    // 注意ES6内let和const class 声明的变量不属于全局对象（window）的属性
    var a = 1;
    // 如果在 Node 的 REPL 环境，可以写成 global.a
    // 或者采用通用方法，写成 this.a
    window.a // 1

     let b = 1;
     window.b // undefined


     //ES2020 在语言标准的层面，引入globalThis作为顶层对象。
     //也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。
   </script>
</body>
</html>

努力成长的__小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6中的let和const关键字

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫

专栏目录