• js-ES6学习笔记-let命令


    1、let命令

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

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

      下面的代码如果使用var,最后输出的是10

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

      上面代码中,变量ivar声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。(常见于闭包的考察)

      如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6。

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

      上面代码中,变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6

      JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

      另外,for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部是一个单独的子作用域

      不存在变量提升

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

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

      暂时性死区

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

      ES6明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错

      总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

      “暂时性死区”也意味着typeof不再是一个百分之百安全的操作(会使typeof报错)。

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

      不允许重复声明

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

    2、块级作用域

      ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

      第一种场景,内层变量可能会覆盖外层变量。

      第二种场景,用来计数的循环变量泄露为全局变量。

      let实际上为JavaScript新增了块级作用域。

    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); // 5
    }

      上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10。

      块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

    // IIFE 写法
    (function () {
      var tmp = ...;
      ...
    }());
    
    // 块级作用域写法
    {
      let tmp = ...;
      ...
    }

      块级作用域与函数声明

      ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。

      ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。

      ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

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

  • 相关阅读:
    JS中iframe子页面与父页面之间通信
    .NET 大数据量并发解决方案
    angular的性能分析 -随记
    第二次作业
    自我介绍
    总结作业
    2019春第四次课程设计实验报告
    2019春第三次课程设计实验报告
    2019春第二次课程设计实验报告
    第十二周作业
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6387632.html
Copyright © 2020-2023  润新知