相信JS的新特性我們都一直在使用，不得不說(shuō)，每個(gè)版本的新特性都能給我們帶來(lái)不一樣的"爽"體驗(yàn)。那么，你知道你使用的JS特性是哪個(gè)版本發(fā)布的呢？

?

面試官:你都在用哪個(gè)版本的JS新特性？蔡姬我:別急，我先總結(jié)一番。

?

那就讓我們一起來(lái)回顧下那些年使用過(guò)的JS特性。

ES2015(ES6)

• let/const關(guān)鍵字
• 字符串模版語(yǔ)法
• 函數(shù)傳參默認(rèn)值
• 箭頭函數(shù)
• 導(dǎo)入導(dǎo)出
• 解構(gòu)賦值
• rest參數(shù)
• class類
• Promise

let/const

解決之前只有函數(shù)才有作用域的問(wèn)題

{
  var a=1
  let b=2
  const c=3
  b=10
  c=20 // => Assignment to constant variable
}
a // => 1
b // b is not defined

由此可見(jiàn)，var 聲明的變量是沒(méi)有作用域的，使用 let 后就聲明塊級(jí)作用域了，值得注意的是用 const 聲明的變量是不可以修改的

字符串模版語(yǔ)法

解決變量拼接字符串的繁瑣寫法

以前寫法:

let name = '販賣前端仔'
const str = '公眾號(hào)：' + name

ES6之后:

let name = '販賣前端仔'
const str = `公眾號(hào)：${name}`

函數(shù)傳參默認(rèn)值

以前寫法:

function test(a,b){
  if(typeof b === 'undefined'){
    b = '我是沒(méi)有傳入的參數(shù)'
  }
}

ES6寫法:

function test(a,b = '我是不傳入數(shù)據(jù)時(shí)的默認(rèn)數(shù)據(jù)'){
}

箭頭函數(shù)

解決了this的指向問(wèn)題。egg:小程序的使用場(chǎng)景

clickEdit(){
  setTimeout(() => {
    console.log('ES6的箭頭函數(shù)測(cè)試')
  }, 1000)
}

導(dǎo)入導(dǎo)出

創(chuàng)建一個(gè)文件，用來(lái)向外提供一些方法

const add = (a,b) => a + b
const reduce = (a,b) => a - b
export {add,reduce}

App引入

import {add,reduce} from "./index.js"
console.log(add(1,2)) // => 3
console.log(reduce(2,1)) // => 1 

解構(gòu)賦值

數(shù)組解構(gòu)賦值

const [a,b] = [1,2]
console.log(a,b) // => 1,2

對(duì)象解構(gòu)賦值

let obj={
  name:'前端仔',
  age:18
}
const {name,age} = obj
console.log(name,age) // =>前端仔，18

rest參數(shù)

rest就是為解決傳入的參數(shù)個(gè)數(shù)不一定，它本身是一個(gè)數(shù)組。用來(lái)替代 arguments 對(duì)象

function getParams(...params) {
  return params.length
}
console.log(getParams()) // => 0
console.log(getParams(2)) // => 1
console.log(getParams(3,6,10)) // => 3

class類

可以通過(guò) class 方式來(lái)聲明類

class Calculator {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  add() {
    return this.x + this.y
  }
  reduce() {
    return this.x - this.y
  }
}
const fn = new Calculator(1, 2)
console.log(fn.add()) // => 3
console.log(fn.reduce()) // => -1

Promise

處理多個(gè)請(qǐng)求的先后順序問(wèn)題，也避免地獄回調(diào)，"金字塔"代碼

new Promise((reslove, reject) => {
  return setTimeout(() => {
    reslove('販賣前端仔')
    // reject('我是出錯(cuò)的數(shù)據(jù)')
  }, 1000)
})
  .then((res) => {
    console.log(res) // => 販賣前端仔
  })
  .catch((err) => {
    console.log(err) // => 我是出錯(cuò)的數(shù)據(jù)
  })

setTimeout 模擬前端請(qǐng)求后臺(tái)數(shù)據(jù)返回需要1秒的時(shí)候，當(dāng)數(shù)據(jù)返回后將結(jié)果使用 reslove 出去，結(jié)果在 then 可以獲取到，然后再進(jìn)行下一步的操作

再舉個(gè)??，前端常用的 axios 插件，它其實(shí)也是 return 出一個(gè) promise 對(duì)象

axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then((res=>) {
  console.log(res)
})
.catch((err)=>{
  console.log(err)
})

ES2016(ES7)

• includes
• 指數(shù)運(yùn)算符

相比ES6，ES7主要擴(kuò)展了兩個(gè)新特性

includes()

const number = [1,2,3]
console.log(number.includes(1)) // => true
console.log(number.includes(4)) // => false

指數(shù)運(yùn)算符

console.log(2**3) // => 8
console.log(3**2) // => 9

ES207(ES8)

• async/await

新增async/await

在方法函數(shù)前添加關(guān)鍵字 async ，需要同步執(zhí)行的程序前添加關(guān)鍵字 await ，即等程序執(zhí)行完后才繼續(xù)往下執(zhí)行

async clickFn(){
  const one = await this.One()
  const two = await this.Two(one)
}

ES2018(ES9)

• rest運(yùn)算符
• 擴(kuò)展運(yùn)算符

增強(qiáng)rest運(yùn)算符

const options = {
  name:'張三',
  age:19,
  marry:true
}
const {marry,...others} = options
console.log(marry) // => true
console.log(others) // => {name:'張三',age:19}

擴(kuò)展運(yùn)算符

對(duì)象前添加擴(kuò)展運(yùn)算符 ... 就會(huì)淺拷貝對(duì)象屬性復(fù)制給新的對(duì)象，舉個(gè)??

const options = {
  name:'張三'
}
const person = {age:19,...options}
console.log(person) // => {age:19,name:'張三'}

由上可見(jiàn)，擴(kuò)展運(yùn)算符和rest運(yùn)算符其實(shí)是相反的方法。一個(gè)是展開(kāi)對(duì)象屬性，一個(gè)是合并對(duì)象屬性

ES2020(ES11)

• BigInt
• 可選鏈操作符
• 雙問(wèn)號(hào)操作符

BigInt

可以采用以下的任意一種聲明一個(gè)BigInt類型變量

const num = 123456n
const num = BigInt(222222)

可選鏈操作符

以前訪問(wèn)深層次屬性的寫法:

data() {
  return {
    obj: {
      userInfo: {
        name: "hzq",
        tel: "1234567778",
        other: { name: "hzq2", title: "名字" }
      },
      title: "哈哈"
    },
 }
 }
//獲取對(duì)象內(nèi)部的other對(duì)象的name屬性值值
mounted(){
 console.log(this.obj && this.obj.useInfo && this.obj.userInfo.other && this.obj.userInfo.other.name)
}
//this.obj寫的有點(diǎn)累...

使用ES11后:

data() {
  return {
    obj: {
      userInfo: {
        name: "hzq",
        tel: "1234567778",
        other: { name: "hzq2", title: "名字" }
      },
      title: "哈哈"
    },
 }
 }
//可選鏈獲取對(duì)象內(nèi)部的other對(duì)象的name屬性值
mounted(){
 //簡(jiǎn)直不要太爽??
 console.log(this.obj?.userInfo?.other?.name)
}

可選鏈的使用還遠(yuǎn)遠(yuǎn)不止獲取屬性這么簡(jiǎn)單，它還可以訪問(wèn) 數(shù)組

function getLeadingActor(movie) {
  return movie.actors?.[0]?.name
}

意猶未盡？再來(lái)一個(gè)??

const arr=[1,2,3]
// 之前的寫法
if(arr.length) {
 arr.map(res => {
  // 處理你的邏輯
 })
}
// 可選鏈的寫法
arr?.map(res => {
   // 處理你的邏輯
})

雙問(wèn)號(hào)操作符

我們時(shí)常會(huì)遇到這樣的情形：變量判斷為空的時(shí)候，我們用三元運(yùn)算符去給變量設(shè)置默認(rèn)值，是這么寫：

let c = a ? a : b
let c= a || b

這兩種寫法其實(shí)是有一個(gè)弊端的，它們都會(huì)過(guò)濾掉所有的假值，如：（0,' ',false）,這些值或許是正常情況下有效的輸入值，平時(shí)實(shí)際生產(chǎn)環(huán)境可能不會(huì)遇到，為此忽略了這個(gè)問(wèn)題

為解決此問(wèn)題，nulllish 橫空出世，用 ?? 表示，它可以在第一項(xiàng)僅為null或undefined時(shí)才設(shè)置默認(rèn)值

let c = a ?? b
//等價(jià)于
let c = a !== undefined  && a !== null ? a : b

中秋快到了，??不夠，我還要

let a = null
let b = a ?? 500   // 500
let c = 0 // 真實(shí)有效的輸入值
let d =c ?? 9000  // 0
//如果是傳統(tǒng)寫法
let x = c ? c:9000  // 9000

前端人直呼:"學(xué)不動(dòng)了，拜托各位大佬不要再卷了"