Array Includes，乘方运算符，async/await

1. Array Includes

在ES7之前，如果想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1
在ES7中，可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false
includes函数可以检测出NaN
arr.includes(valueToFind[,fromIndex])

const names = ["abc","nba","why",NaN];

if(names.includes("why")){
    console.log("include why");
}

// 从索引2开始检索
if(names.includes("why",2)){
    console.log("include why from 2");
}

// -1
console.log(names.indexOf(NaN));
// true
console.log(names.includes(NaN));

2. 乘方运算符

在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成
在ES7中，增加了 ** 运算符，可以对数字来计算乘方

// 27
console.log(Math.pow(3,3));
// 27
console.log(3**3);

3. async/await

3.1. 异步函数

3.1.1. async function介绍

async关键字用于声明一个异步函数
- async是asynchronous单词的缩写，异步、非同步
- sync是synchronous单词的缩写，同步、同时

async异步函数可以有很多写法

async function foo1(){}

const foo2 = async function(){}

const foo3 = async ()=>{}

class Person{
    async foo(){}
}

3.1.2. 异步函数执行流程

异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行

async function foo(){
    console.log("async");
}

/**
script start
async
script end
*/
console.log("script start");
foo();
console.log("script end");

异步函数有返回值时，和普通函数会有区别，返回值一定是Promise

async function foo(){
    return "Hello World";
}

const result = foo();
// Promise { 'Hello World' }
console.log(result);

情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中

// 	情况一：异步函数的返回值被包裹到Promise.resolve中
// Hello World
foo().then(res=>{
    console.log(res);
})

情况二：如果异步函数的返回值是Promise，Promise.resolve的状态会由Promise决定

// 情况二：异步函数的返回值是Promise，状态会由Promise决定
async function foo1(){
    return new Promise((resolve)=>{
        resolve("Hello World");
    })
}
// Hello World
foo1().then(res=>{
    console.log(res);
})

情况三：如果异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定

// 情况三：异步函数的返回值是一个对象并且实现了thenable，状态会由then方法来决定
async function foo2(){
    return {
        then: function(resolve,reject){
            resolve("Hello World");
        }
    }
}
// Hello World
foo2().then(res=>{
    console.log(res);
})

如果在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递

async function foo3() {
  throw new Error("error message");
}
foo3()
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log("error",err);
  });

3.2. await关键字

async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的

await关键字有什么特点呢?

通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise
await会等到Promise的状态变成fulfilled状态之后继续执行异步函数

await之后的代码相当于在Promise的then中执行，必须等到await之后的代码执行结束才能继续执行

function requestData(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve("Hello World");
        },10000);
    })
}

async function foo(){
    const result = await requestData();

    console.log(result);
    console.log("code1");
    console.log("code2");
}

/**
Hello World
code1
code2
*/
foo();

如果await后面是一个普通的值，那么会直接返回这个值

async function foo(){
    const result = await "123";

    console.log(result);
}
// 123
foo();

如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值

// resolve
async function foo(){
    const result = await {
        then: function(resolve,reject){
            resolve("123");
        }
    };

   return result;
}
// res 123
foo().then(res=>{
    console.log("res",res);
}).catch(err=>{
    console.log("err",err);
})


// reject
async function foo1(){
    const result = await {
        then: function(resolve,reject){
            // resolve("123");
            reject("123");
        }
    };

    return result;
}

// err 123
foo1().then(res=>{
    console.log("res",res);
}).catch(err=>{
    console.log("err",err);
})

如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的reject值

async function foo2(){
    const result = await new Promise((resolve,reject)=>{
        // resolve("123");
        reject("123"); 
    });

    console.log("result",result);
}

// err 123
foo2().then(res=>{
    console.log("res",res);
}).catch(err=>{
    console.log("err",err);
})

W.T.的博客

JavaScript学习笔记07-ES7