你该知道的JavaScript小技巧——ES6语法篇

【这是我参与更文挑战的第 11 天，活动详情查看： 更文挑战”】
废话不多说 我们直接开始。

1. 扩展运算符{ ...}

首当其冲的当然是我们的...——扩展运算符（展开运算符）他不仅可以对数组进行操作甚至连对象 都要礼让他三分。 咱们直接上代码吧

数据的展开

//数据的展开  在这里我们直接声明一个数组
let arr = [1, 2, 3, 4, 5]
console.log([...arr]); //1， 2，3， 4， 5
//数组的合并
let arr1 = [6, 7, 8]
  console.log([...arr, ...arr1]);  // [1, 2, 3, 4, 5, 6, 7, 8]
  
//以及将字符串转成数据

首先 咱们定一个字符串  test
let str = test

let arr2 = [...str]

  console.log([...arr2]);  // ["t", "e", "s", "t"]

剩余运算符

function num(...arr) {
    for (let item of arr) {
        console.log(item);
    }
}
  console.log(num(arr)); //1， 2，3， 4， 5
  
//赋值  
var [a,...temp]=[1, 2, 3, 4];
console.log(a); //1
console.log(temp);   //2, 3, 4  

async和await

async和await 他们两个的结合 可以让 异步代码想同步代码一样。

async

async 返回的是一个promise对象，而且 这个对象的结果是有async执行函数的返回值所决定的听到这句话 大家是不是觉得很拗口？不急，咱们先来写段代码 来缕缕。

// 首先 咱们先声明一个函数 
  function fn() {}
//那么  我们只要这这个函数前面添加上 async 这个函数 就会成为一个异步函数

  async function fn() {
    return new Promise((res, rej) => {
      res('响应OK')
    })
  }

  // const result = fn();  
  console.log(fn());// 返回的结果为 "响应OK"
//大家 可以看到的是 我一开始的时候 调用了fn()函数 并且在 函数 执行时 有返回了一个新的 promise函数， 而且 fn函数 成功的值 就是我们promise的值。

await 必须要放在async函数内部。
await的右侧一般是个promise对象。
await返回的是promise成功的值，并且 如果出现错误 就会抛出错误要通过 try...cath补货处理。

  //创建一个 promise对象
  const  P = new Promise((res, rej) => {
    res('成功的值')
  })

  // await  必须放在async里面
  async function fn() {
    let result = await P  //await的返回结果是 promise返回的成功的值

    console.log(result);
  }


  fn()  //结果为 成功的值
  
  //那么失败了呢？ 首先继续回到刚才的代码上面
  
  const  P = new Promise((res, rej) => {
    // res('成功的值')
    rej('失败啦')
  })

  async function fn() {
    try{
      let result = await P
    }catch(e){
      console.log(e);
    }

    console.log(result);
  }


  fn()  //结果为 失败啦