js新特性

1. Promise

MDN文档

我们首先定义一个promise方法

function setName(newName) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(newName === 'jack'){
        resolve(newName)
      }else{
        reject(`【${newName}】 is not a good name, sorry.`)
      }
    }, 1000)
  })
}

第一次调用，给到参数为“Tom”，promise异常对调，进入reject回调中，在catch中接收回调。

setName('Tom').then(res => {
  console.log(`我的名字是【${res}】`)
}).catch(err => {
  console.log(err)
})
// console:【Tom】 is not a good name, sorry.

第二次调用，给到参数为“jack”，promise正常对调，进入resolve回调中，在then中接收回调。

setName('jack').then(res => {
  console.log(`我的名字是【${res}】`)
}).catch(err => {
  console.log(err)
})
// console: 我的名字是【jack】

2. async/await

MDN文档

async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

任意一个名称都是有意义的，先从字面意思来理解。async是“异步”的简写，而 await可以认为是 async wait 的简写。所以应该很好理解 async用于申明一个 function 是异步的，而 await用于等待一个异步方法执行完成。

await只能出现在 async函数中

我们还是以上面的例子做一个演示：

还是定义一个promise方法

function setName(newName) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(newName === 'jack'){
        resolve(newName)
      }else{
        reject(`【${newName}】 is not a good name, sorry.`)
      }
    }, 1000)
  })
}

我们再定义一个带有async的方法，在该方法中调用setName('jack')，结果按照我们预料到的一样运行。

async function getName() {
  var name = await setName('jack')
  console.log(`我的名字是【${name}】`)
}
getName()
// console: 我的名字是【jack】

第二次调用，我们将setName('tom')的参数换成'tom'。

async function getName() {
  var name = await setName('tom')
  console.log(`我的名字是【${name}】`)
}
getName()
// console: Uncaught (in promise) 【tom】 is not a good name, sorry.

我们发现，控制台报错了。原因是在第二次调用时，我们给的参数是'tom', 这让 promise函数进入了reject回调中。

但问题是，我们已经在reject回调中做了异常的处理，为什么还会在控制台上报错呢。

其实我们需要在async函数中使用try-catch来捕获异常，如下：

async function getName() {
  try {
    var name = await setName('tom')
    console.log(`我的名字是【${name}】`)
  } catch (err) {
    console.log(err)
  }
}
getName()
// console: 【tom】 is not a good name, sorry.

我们在try中执行正常回调的代码，如果有异常发生，则在catch中捕获异常，做异常处理。

3. 展开操作符

展开操作符可用于对象或数组，示例：

对象:

var tom = {
  age: 20,
}
var jack = {
  name: 'jack',
  ...tom
}
console.log(jack)
// console: {name: "jack", age: 20}

如果两个对象中有重复的key值，结果是如何呢？

var tom = {
  age: 20,
}
var jack = {
  name: 'jack',
  age: 18,
  ...tom,
}
console.log(jack)
// console: {name: "jack", age: 20}

var tom = {
  age: 20,
}
var jack = {
  ...tom,
  name: 'jack',
  age: 18,
}
console.log(jack)
// console: {age: 18, name: "jack"}

从上面的例子中可以看到，后面的key值会覆盖前面的key值。

数组:

var arr = [1,2,3,4,5]
var arr1 = [...arr, 6,7,8]
console.log(arr1)
// console: [1, 2, 3, 4, 5, 6, 7, 8]

4. 剩余参数

function sum(a, b, ...c) {
  return a + b + c.reduce((total, num) => total + num )
}
let num = sum(1, 2, 3, 4, 5)
console.log(num)
// console: 15

如上所示，参数c是由剩余参数组成的一个数组。

5. 字符串插值

常用在拼接字符串时。使用${}将数据包裹，使用`来包裹整个字符串。

const name = 'jack'
const age = 20
var userInfo = `名字:${name}, 年龄:${age}`
console.log(userInfo)
// console: 名字:jack, 年龄:20

6. 简写属性

这是原本的写法

const name = 'jack'
const age = 20
var userInfo = {
  name: name,
  age: age
}
console.log(userInfo)
// console: {name: "jack", age: 20}

简写：

const name = 'jack'
const age = 20
var userInfo = {
  name,
  age
}
console.log(userInfo)
// console: {name: "jack", age: 20}

7. 解构赋值

对象

var userInfo = {
  name: 'jack',
  age: 20,
  school: {
    schoolName: 'demo school',
    grade: 'First grade 6 class'
  }
}

let { name, age, school: { schoolName, grade } } = userInfo
console.log(name)
// console: jack
console.log(age)
// console: 20
console.log(schoolName)
// console: demo school
console.log(grade)
// console: First grade 6 class

在需要获取嵌套的对象数据时，可以这样获取：let { school: { schoolName, grade } } = userInfo

数组

const arr = [1, 2, 3, 4, 5]
let [a, b, ...c] = arr
console.log(a)
// console: 1
console.log(b)
// console: 1
console.log(c)
// console: [3, 4, 5]

如果我们想间隔取值，可以使用, ,来获取。也可以使用上面说到的【剩余参数】来获取剩余的数组。

注意：此处的剩余参数需写到最后。

结语：

以上几个特性，是我在开发过程中时常会用到的，每个新特性在使用中都会给予我巨大的快乐。不论是写法得简便，还是逻辑得清晰。都让我的开发效率得到了巨大的提升。所以，用起来吧！✊✊✊