zoukankan      html  css  js  c++  java
  • 详解ES6中的 let 和const

      前  言

    JRedu

    ECMAScript 6 是 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。

     ES6 与上一个版本 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

    那今天就让我们来详细了解一下let 和 const .

     1、let 

    1.1let简介

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

    {
    let a = 10;
    var b = 1;
    console.log(a);
    }
    //console.log(b);

    // a ReferenceError: a is not defined.a没有定义。
    // b 1

    //for循环的计数器,就很合适使用let命令。
    for (let i = 0; i < 10; i++) {
    // ...
    }
    console.log(i);
    // ReferenceError: i is not defined
    //上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。

    var a = [];
    for (var i = 0; i < 10; i++) {
    a[i] = function () {
    console.log(i);
    };
    }
    a[6](); // 10
    // 变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i

    var a = [];
    for (let i = 0; i < 10; i++) {
    a[i] = function () {
    console.log(i);
    };
    }
    a[6](); // 6
    // 变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6

    1.2不存在变量提升


    var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined
    let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
    // var 的情况
    console.log(foo); // 输出undefined
    var foo = 2;

    // let 的情况
    console.log(bar); // 报错ReferenceError
    let bar = 2;

    1.3暂时性死区

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

    if (true) {
    // TDZ开始
    tmp = 'abc'; // ReferenceError
    console.log(tmp); // ReferenceError

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

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

    1.4不能重复声明

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

    // 报错Uncaught SyntaxError: Identifier 'a' has already been declared 未捕获的SyntaxError:标识符a'a已经声明了
    if(true) {
    let a = 10;
    var a = 1;
    }

    // 报错
    if(true) {
    let a = 10;
    let a = 1;
    }

    //因此,不能在函数内部重新声明参数。
    function func(arg) {
    let arg; // 报错
    }

    function func(arg) {
    {
    let arg; // 不报错
    }
    }

    1.5块级作用域

          

    ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
    第一种情况,内层变量可能会覆盖外层变量。

     

    var t = new Date();
    function f() {
    console.log(t);
    if (false) {
    var t = 'hello world';
    }
    }
    f(); // undefined
    // if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

    /*第二种情况,用来计数的循环变量泄露为全局变量。*/
    var s = 'hello';
    for (var i = 0; i < s.length; i++) {
    console.log(s[i]);
    }
    console.log(i); // 5
    // 变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。
    var s = 'hello';
    for (let i = 0; i < s.length; i++) {
    console.log(s[i]);
    }
    console.log(i); // 报错,未定义。

    // ES6的块级作用域
    function f1() {
    let n = 5;
    if (true) {
    let n = 10;
    }
    console.log(n); // 5
    }
    // 上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是10。

    //ES6 允许块级作用域的任意嵌套。
    {{{{{let insane = 'Hello World'}}}}};

    //外层作用域无法读取内层作用域的变量。
    {{{{
    {let insane = 'Hello World'}
    console.log(insane); // 报错
    }}}};

    //内层作用域可以定义外层作用域的同名变量
    {{{{
    let insane = 'Hello World';
    {let insane = 'Hello World'}
    }}}};


    // 自执行函数 写法
    (function () {
    var tmp = a;

    }());

    // 块级作用域写法
    {
    let tmp = a;

    }

     

    2.const

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

    const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

    const PI = 3.1415;

    PI // 3.1415

    PI = 3;

    // TypeError: Assignment to constant variable.分配常数变量

     

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

        if (true) {

     const MAX = 5;

    }

        

    MAX // Uncaught ReferenceError: MAX is not defined

     

    3、只能在声明的位置后面使用。

    if (true) {

     console.log(MAX); // ReferenceError

     const MAX = 5;

    }

        //上面代码在常量MAX声明之前就调用,结果报错。

    4、const声明的常量,也与let一样不可重复声明。

    var message = "Hello!";

    let age = 25;

     

    // 以下两行都会报错

    const message = "Goodbye!";

    const age = 30;

  • 相关阅读:
    Power of Cryptography
    Radar Installation
    Emag eht htiw Em Pleh
    Help Me with the Game
    89. Gray Code
    87. Scramble String
    86. Partition List
    85. Maximal Rectangle
    84. Largest Rectangle in Histogram
    82. Remove Duplicates from Sorted List II
  • 原文地址:https://www.cnblogs.com/lixishimeng/p/7082064.html
Copyright © 2011-2022 走看看