zoukankan      html  css  js  c++  java
  • es6读书笔记(一)——let

    文章内容摘自阮一峰的 ECMAScript 6 入门

    ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,

    • 只在let命令所在的代码块内有效,并且不存在变量提升(也叫预解释)。
    {
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1
    

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

    for循环的计数器,就很合适使用let命令。

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

      上面代码中,变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计另外,for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部是一个单独的子作用域。

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

    上面代码输出了3次abc,这表明函数内部的变量i和外部的变量i是分离的。

    • 暂时性死区 
      只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响
      var tmp = 123;
      
      if (true) {
        tmp = 'abc'; // ReferenceError
        let tmp;
      }
      View Code

      上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错
      ES6明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域(暂时性死区)凡是在声明之前就使用这些变量,就会报错

    • 暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量
      function bar(x = y, y = 2) {//逗号的结合性是从左到右,所以先计算x=y表达式,所有报错。
        return [x, y];
      }
      
      bar(); // 报错
      // 不报错
      var x = x;
      
      // 报错
      let x = x;
      // ReferenceError: x is not defined
      //在变量x的声明语句还没有执行完成前,就去取x的值,导致报错”x 未定义“
    • 不允许重复声明,let不允许在相同作用域内,重复声明同一个变量

    • ES6 声明变量的六种方法 

      ES5 只有两种声明变量的方法:var命令和function命令。ES6除了添加letconst命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有6种声明变量的方法。

  • 相关阅读:
    poj 3321 Apple Tree
    hdu 1520 Anniversary party
    Light OJ 1089 Points in Segments (II)
    Timus 1018 Binary Apple Tree
    zoj 3299 Fall the Brick
    HFUT 1287 法默尔的农场
    Codeforces 159C String Manipulation 1.0
    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)
    使用 TypeScript & mocha & chai 写测试代码实战(17 个视频)
    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)
  • 原文地址:https://www.cnblogs.com/tblj/p/6916207.html
Copyright © 2011-2022 走看看