ES6,小笔记

最新推荐文章于 2025-01-18 20:54:12 发布

转载最新推荐文章于 2025-01-18 20:54:12 发布 · 516 阅读

拜读了阮大神的《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表达式。