zoukankan      html  css  js  c++  java
  • let和const命令

    一、let命令

      1、基本语法

      ES6新增了let命令,用于声明变量。其语法与var类似,但是所声明的变量只在let命令所在的代码块内有效。

    {
        let a = 1;
        var b = 2;
    }
    console.log(a); // ReferenceError: a is not defined
    console.log(b); // 2

       上面的代码在代码块中分别用let和var声明了两个变量,然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的输出了正确的值。这表明,let声明的变量只在其所在的代码块内有效。

       下面来个经典的例子:

    // var
    {
        var arr = [];
        for (var i = 0; i < 10; i++) {
            arr[i] = function() {
                console.log(i);
            };
        }
        arr[3](); // 10
    }

      上面的代码中,变量i是var声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内,被赋给数组arr的函数内部的console.log(i)中的i指向全局中的i。也就是说,所有数组arr的成员中的i指向的都是同一个i,导致运行时输出的是最后一轮的i值,也就是10。

    // let
    {
        var arr = [];
        for (let i = 0; i < 10; i++) {
            arr[i] = function() {
                console.log(i);
            };
        }
        arr[3](); // 3
    }

       上面的代码中,变量是let声明的,当前的i只在本轮循环有效。所以每一次循环的i其实都是一个新的变量,于是最后输出的是3。大家可能会问,如果每一轮循环变量i都是重新声明的,那它怎么知道上一轮循环的值从而计算出本轮循环的值呢?这是因为JavaScript引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

       另外,for循环还有一个特别之处,就是设置循环变量的那一部分是一个父作用域,而循环体内部是一个单独的子作用域。

    {
        for (let i = 0; i < 2; i++) {
            let i = 'SophiaLee';
            console.log(i);
        }
        // SophiaLee
        // SophiaLee
    }

      2、不存在变量提升

      var命令会发生“变量提升”的现象,即变量可以在声明之前使用,值为undefined。这种现象多少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才能使用。

      为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则会报错。

    // var
    {
        console.log(a); // undefined
        var a = 5;
    }
    // let
    {
        console.log(b); // ReferenceError: b is not defined
        let b = 1;
    }

      在上面的代码中,变量a用var命令声明会发生变量提升,当脚本开始运行时,变量a就已经存在,但是没有值,所以输出undefined。变量b用let命令声明则不会发生变量提升。这表明在声明它之前,变量b是不存在的,这时如果用到它,就会抛出错误。

      3、暂时性死区

      只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。

      ES6明确规定,如果区块中存在let和const命令,则这个区域对这些命令声明的变量从一开始就形成封闭的作用域。只要在声明之前使用这些变量,就会报错。总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上成为“暂时性死区(TDZ)”。

    // 暂时性死区
    {
        if (true) {
            // TDZ开始
            a = 1;
            console.log(a); // ReferenceError: a is not defined
            let a; // TDZ结束
            console.log(a); // undefined
            a = 2;
            console.log(a); // 2
        }
    }

      上面的代码中,在let命令声明变量a之前,都属于变量a的“死区”。

      另外,有些“死区”比较隐蔽,不太容易发现。

    {
        function a(x = y, y = 2) {
            return [x, y];
        }
        a();  // ReferenceError: y is not defined
    }

      上面的代码中,调用a函数之所以报错,是因为参数x的默认值等于另一个参数y,而此时y还没有声明,属于“死区”。如果y的默认值是x,就不会报错。

    {
        function a(x = 1, y = x) {
            return [x, y];
        }
        a();  // [1, 1]
    }
    {
        // 不报错
        var x = x;
        // 报错
        let x = x; // ReferenceError: x is not defined    
    } 

      总之,暂时性死区的本质就是,只要进入当前作用域,所要使用的变量已经存在,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

      4、不允许重复声明

      let不允许在同一作用域内重复声明同一个变量。

    {
        // 报错
        let a = 1;
        // var a = 2;
    }
    {
        function a(arg) {
            let arg;
        }
        a(); // SyntaxError: Identifier 'arg' has already been declared
    }
    {
        function a(arg) {
            {
                let arg; // 不报错
            }
        }
        a();
    }

    二、const命令

      1、基本用法

      const声明一个只读的常量。一旦声明,常量的值就不能改变。

    {
        const PI = 3.1415926;
        console.log(PI); // 3.1415926
    
        PI = 4; // TypeError: Assignment to constant variable.
    }

      上面的代码说明改变常量的值会报错。

      const声明的变量不得改变值,这意味着,const一旦声明常量,就必须立即初始化,不能留到后面赋值。(只声明不赋值会报错)

      const的作用域与let命令相同:只在声明所在的块级作用域内有效。

      const命令声明的变量也不会提升,同样存在暂时性死区,只能在声明之后使用。

      2、本质

      const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(Number、String、Boolean)而言,值就保存在变量指向的内存地址中,因此等同于常量。但对于复合类型的数据(主要是对象和数组)而言,变量指向的内存地址保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不可变的,这完全不能控制。因此,将一个对象声明为常量时必须非常小心。

    {
        const person = {};
        // 为person添加一个属性,可以成功
        person.name = 'SophiaLee';
        console.log(person.name); // SophiaLee
    
        // 将person指向另一个对象,就会报错
        person = {}; // TypeError: Assignment to constant variable. 类型错误:赋值给常量变量
    
    }

      上面的代码中,常量person储存的是一个地址,这个地址指向的是一个对象。不可变的只是这个地址,即不能把person指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

      再看另一个例子:

    {
        const arr = [];
        arr.push('Hello'); // 可执行
        arr.length = 0; // 可执行
        arr = ['World']; // 报错 TypeError: Assignment to constant variable.
    }

      上面的代码中,常量arr是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给arr,就会报错。

      

      

  • 相关阅读:
    坐标变化
    labelme VOC
    threejs物体设置中心坐标
    IfcProjectOrderTypeEnum
    IfcCostItemTypeEnum
    利用Mono.Cecil动态修改程序集来破解商业组件(仅用于研究学习)
    依赖注入框架Autofac的简单使用
    阿里技术嘉年华官网上线啦!
    Silverlight 4以下版本模拟鼠标双击事件
    iOS学习系列 利用ASIHTTPRequest实现异步队列
  • 原文地址:https://www.cnblogs.com/SophiaLees/p/12641033.html
Copyright © 2011-2022 走看看