ES6知识笔记

Posted 2021-08-08 过往将来

文章目录

• • ES6 简介
  • ES6新增关键字:
  • let 和 var 的区别
  • const 命令
  • ES6 解构赋值
  • ES6 数组模型的解构赋值的样例
  • ES6 Symbol 简介
  • ES6 Promise 状态
  • Promise 状态的缺点
  • then 方法
  • async 简介
  • async 返回值
  • await 简介
  • await 返回值

ES6 简介

1. 2015年6月,ES6成为国际标准
2. 目前主流浏览器都知识ES6的特性,其中 Chrome 和 Firefox 浏览器对 ES6 新特性最好,IE7~11 基本不支持 ES6。

ES6新增关键字:

1. let 声明的变量旨在let命令所在的代码块内有效.
2. const 声明一个只读的常量,一旦声明,常量的值就不能改变

let 基本用法
{
  let a = 0;
  a   // 0
}
a   // 报错 ReferenceError: a is not defined

let 和 var 的区别

1. let 只是在代码块内有效,var 是在全局范围内有效
2. let 只能声明一次,var 可以多次声明
3. let 不存在变量提升,var存在变量提升

    console.log(a);  //ReferenceError: a is not defined
    let a = "apple";
     
    console.log(b);  //undefined
    var b = "banana";

4. 变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。
5. 变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

const 命令

1. const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
2. const基本用法:

    const PI = "3.1415926";
    PI  // 3.1415926
    
    const MY_AGE;  // SyntaxError: Missing initializer in const declaration    

3. const 暂时性死区

    var PI = "a";
    if(true){
      console.log(PI);  // ReferenceError: PI is not defined
      const PI = "3.1415926";
    }

4. ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

ES6 解构赋值

1. 解构赋值是对赋值运算符的扩展
2. 解构赋值针对数组或者对象进行模式匹配,然后对其中的变量进行赋值
3. 解构赋值在代码上简洁易读,语义更明晰,方便了复杂对象中数据字段的获取

ES6 数组模型的解构赋值的样例

1. 基本解构赋值

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

2. 可嵌套解构赋值

    let [a, [[b], c]] = [1, [[2], 3]];
    // a = 1
    // b = 2
    // c = 3

3. 可忽略解构赋值

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

4. 不完全解构赋值

    let [a = 1, b] = []; 
    // a = 1, b = undefined
 

5. 剩余运算符解构赋值

    let [a, ...b] = [1, 2, 3];
    //a = 1
    //b = [2, 3]

6. 字符串等解构赋值
   在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

    let [a, b, c, d, e] = 'hello';
    // a = 'h'
    // b = 'e'
    // c = 'l'
    // d = 'l'
    // e = 'o'

7. 解构默认值

    
    let [a = 2] = [undefined]; 
    // a = 2

ES6 Symbol 简介

1. ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
2. ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。
3. Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

    let sy = Symbol("KK");
    console.log(sy);   // Symbol(KK)
    typeof(sy);        // "symbol"
     
    // 相同参数 Symbol() 返回的值不相等
    let sy1 = Symbol("kk"); 
    sy === sy1;       // false

ES6 Promise 状态

1. Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。
2. Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

Promise 状态的缺点

1. 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
3. 当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

then 方法

1. then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。
2. then 方法的特点: 在 javascript 事件队列的当前运行完成之前，回调函数永远不会被调用。

    const p = new Promise(function(resolve,reject){
      resolve('success');
    });
     
    p.then(function(value){
      console.log(value);
    });
     
    console.log('first');
    // first
    // success

async 简介

1. async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。
2. async 语法:async function name([param[, param[, ... param]]]) { statements }
3. name : 函数名
4. param :要传递给函数的参数的名称
5. statements: 函数体语句。

async 返回值

1. async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

    async function helloAsync(){
        return "helloAsync";
      }
      
    console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
     
    helloAsync().then(v=>{
       console.log(v);         // helloAsync
    })

2. async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
3. await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

    function testAwait(){
       return new Promise((resolve) => {
           setTimeout(function(){
              console.log("testAwait");
              resolve();
           }, 1000);
       });
    }
     
    async function helloAsync(){
       await testAwait();
       console.log("helloAsync");
     }
    helloAsync();
    // testAwait
    // helloAsync

await 简介

1. await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
2. [return_value] = await expression;
3. expression: 一个 Promise 对象或者任何要等待的值。

await 返回值

1. 返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。
2. 如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

    
    function testAwait (x) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(x);
        }, 2000);
      });
    }
     
    async function helloAsync() {
      var x = await testAwait ("hello world");
      console.log(x); 
    }
    helloAsync ();
    // hello world