ES6,小笔记

关注

转载最新推荐文章于 2026-03-10 01:18:42 发布 541 阅读 AI 写同款· GEO 优化 ›

ES6 学习笔记 ES6 引入了许多新特性，如let/const解构表达式箭头函数Promise等，极大地提升了 JavaScript 的开发效率和代码可读性。掌握这些新特性，能够帮助我们编写更加现代化和高效的 JavaScript 代码。阅读详情

拜读了阮大神的《ECMAScript 6入门》一书，非常易懂，做一下笔记。

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

二、ES6和ECMAScript 2015有什么关系？
      ES6 的第一个版本，2015年6月发布，正式名称就是《ECMAScript 2015标准》（简称 ES2015）。
      ES6 既是一个历史名词，也是一个泛指，含义是5.1版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017等等。
      而ES2015 则是正式名称，特指该年发布的正式版本的语言标准。一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

三、什么是Babel转码器？
      Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

四、ES6新增了什么？
      1、变量和变量的作用域（定义变量加入了 let const）
      2、解构赋值
      3、字符串的扩展
      4、正则的扩展
      5、数值的扩展
      6、数组的扩展
      7、函数的扩展
      8、对象的扩展
      9、Symbol
   10、Set 和 Map 数据结构
   11、Proxy
   12、Reflect
   13、Promise 对象
   14、Iterator 和 for...of 循环
   15、Generator 函数的语法
   16、Generator 函数的异步应用
   17、async 函数
   18、Class
   19、Decorator
   20、Module 的语法
   13、Module 的加载实现
   14、Iterator 和 for...of 循环
   15、Generator 函数的语法
   16、Generator 函数的异步应用
   17、async 函数

五、什么是let?
      ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
      for循环的计数器，就很合适使用let命令。

六、let有哪些特性？
      1、let声明的变量只在它所在的代码块有效。


   
    
     
      6
     
     
      7
     
     
      8
     
     
      9
     
     
      10
     
     
      11
     
     
      12
     
     
      13
     
     
      14
     
     
      15
     
     
      16
     
     
      17
     
     
      18
     
     
      19
     
     
      20
     
     
      21
     
     
      22
     
     
      23
     
     
      24
     
     
      25
     
     
      26
     
     
      27
     
     
      28
     
     
      29
     
     
      30
     
     
      31
     
     
      32
     
     
      33
     
     
      34
     
     
      35
     
     
      36
     
     
      37
     
     
      38
     
    
    
   
   
    
     
      
     
     
     
      
      
       a 
       // ReferenceError: a is not defined.
      
      
       b 
       // 1
      
      
      
       //片断2
      
      
       for 
       (
       let 
       i 
       = 
       0
       ; 
       i 
       < 
       10
       ; 
       i
       ++
       ) 
       {
       }
      
      
       console
       .
       log
       (
       i
       )
       ;
      
      
       //ReferenceError: i is not defined
      
      
       //计数器i只在for循环体内有效，在循环体外引用就会报错。
      
      
      
       //片断3
      
      
       var 
       a 
       = 
       [
       ]
       ;
      
      
       for 
       (
       var 
       i 
       = 
       0
       ; 
       i 
       < 
       10
       ; 
       i
       ++
       ) 
       {
      
      
         
       a
       [
       i
       ] 
       = 
       function 
       (
       ) 
       {
      
      
           
       console
       .
       log
       (
       i
       )
       ;
      
      
         
       }
       ;
      
      
       }
      
      
       a
       [
       6
       ]
       (
       )
       ; 
       // 10
      
      
       //变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。
      
      
      
       //片断4
      
      
       var 
       a 
       = 
       [
       ]
       ;
      
      
       for 
       (
       let 
       i 
       = 
       0
       ; 
       i 
       < 
       10
       ; 
       i
       ++
       ) 
       {
      
      
         
       a
       [
       i
       ] 
       = 
       function 
       (
       ) 
       {
      
      
           
       console
       .
       log
       (
       i
       )
       ;
      
      
         
       }
       ;
      
      
       }
      
      
       a
       [
       6
       ]
       (
       )
       ; 
       // 6
      
      
       //变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。
      
      
      
       //片断5
      
      
       for 
       (
       let 
       i 
       = 
       0
       ; 
       i 
       < 
       3
       ; 
       i
       ++
       ) 
       {

      2、不存在变量提升(声明提前)
      let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。


   
    
     
      1
     
     
      2
     
     
      3
     
     
      4
     
     
      5
     
     
      6
     
     
      7
     
     
      8
     
     
      9
     
     
      10
     
    
    
   
   
    
     
      
     
     
      
     
     
      
       // var 的情况
      
      
       console
       .
       log
       (
       foo
       )
       ; 
       // 输出undefined
      
      
       var 
       foo 
       = 
       2
       ;
      
      
      
       // let 的情况
      
      
       console
       .
       log
       (
       bar
       )
       ; 
       // 报错ReferenceError
      
      
       let 
       bar 
       = 
       2
       ;
      
      
      
       //上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

      3、暂时性死区
      ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
      也就是说，凡是let 存在的块级作用域，他所声明的变量，不再与作用域外的同名变量有关系，并且，在作用域内let声明之前使用此变量，也会报错。
      let一旦出现，使用变量就必须遵从let，并且在let之后。对外，将在外，君令有所不受；对内，非令不行。

      “暂时性死区”也意味着typeof不再是一个百分之百安全的操作。
      在没有let之前，如果一个变量根本没有被声明，使用typeof反而不会报错。
      typeof undeclared_variable // "undefined"
      在使用let后，
         typeof x; // ReferenceError
         let x;
      变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

      ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。
      总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
      4、不允许重复声明
      let不允许在相同作用域内，重复声明同一个变量。因此，不能在函数内部重新声明参数。

七、块级作用域
      1、为什么需要块级作用域？
      ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
      第一种场景，内层变量可能会覆盖外层变量。


   
    
     
      1
     
     
      2
     
     
      3
     
     
      4
     
     
      5
     
     
      6
     
     
      7
     
     
      8
     
     
      9
     
     
      10
     
    
    
   
   
    
     
      
     
     
      
     
     
      
       var 
       tmp 
       = 
       new 
       Date
       (
       )
       ;
      
      
      
       function 
       f
       (
       ) 
       {
      
      
         
       console
       .
       log
       (
       tmp
       )
       ;
      
      
         
       if 
       (
       false
       ) 
       {
      
      
           
       var 
       tmp 
       = 
       "hello world"
       ;
      
      
         
       }
      
      
       }
      
      
      
       f
       (
       )
       ; 
       // undefined

上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

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

      上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。
      2、ES6的块级作用域

ES6允许块级作用域的任意嵌套。外层作用域无法读取内层作用域的变量。
内层作用域可以定义外层作用域的同名变量。

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

ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

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

      3、do 表达式
   本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。在块级作用域以外，没有办法得到t的值，因为块级作用域不返回值，除非t是全局变量。
   现在有一个提案，使得块级作用域可以变为表达式，也就是说可以返回值，办法就是在块级作用域之前加上do，使它变为do表达式。