ES7,ES8新特性

今天要來翻翻老梗了，有關於ES6的使用，在前端工程代碼里面已經很普遍了，但是限於兼容性的限制，並沒有過多的應用到具體實踐中。ES7和ES8相關新特性的更新又讓人忍不住去試試水。

ES7新特性

ES7在ES6的基礎上添加了三項內容：求冪運算符（**）、Array.prototype.includes()方法、函數作用域中嚴格模式的變更。

求冪運算符（**）

Math.pow()的簡寫

2 ** 2 = 4與Math.pow(2,2) = 4的效果是等同的

Array.prototype.includes()

這個方法是檢查一個數組中是否有某個元素

['a', 'b', 'c'].includes('a')     // true
['a', 'b', 'c'].includes('d')     // false

當接收兩個參數的時候，第二個參數是檢測開始的下標，默認從零開始

['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false

類比於indexOf，indexOf得出的是元素的位置（下標），如果元素不存在的時候則返回-1

有一個特殊點：indexOf並不能識別NaN，返回了令人匪夷所思的結果

還有一個特殊點：includes認為+0和-0是一樣的

ES8新特性

異步函數(Async functions)

為了避免回調函數多層嵌套的問題，異步函數的出現完美的解決了這個問題，從promise到async await,異步函數和異步回調的流程更加清晰和明了。

var promise = new Promise((resolve, reject) => {
  this.login(resolve)
})
.then(() => this.getInfo())
.catch(() => { console.log("Error") })

resolve是成功之后的回調，reject失敗之后的回調

當有多個請求任務的時候promise會出現很多的then，如此看來，整個流程也不是很清晰。

之后引入了另外一種異步編程機制：Generator 

Generator函數的用法如下：

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

Generator的特點如下：1，函數聲明的* 2內部的yield關鍵字。除此之外使用方法和普通函數一樣。

但是關鍵字yield相當於一種阻遏機制，需要手動觸發，一下示例演示Generator的用法：

因為yield是一種阻遏機制，分析一下用法：

var gen = function* () {
  const f1 = yield this.login()
  const f2 = yield this.getInfo()
};

ES8引入了async函數，使得異步操作變得更加方便。簡單說來，它就是Generator函數的語法糖。

async function asyncFunc(params) {
  const result1 = await this.login()
  const result2 = await this.getInfo()
}

Object.entries()和Object.values()

該方法會將某個對象的可枚舉屬性與值按照二維數組的方式返回。若目標對象是數組時，則會將數組的下標作為鍵值返回。如果對象的key值是數字，則返回值會對key值進行排序，返回的是排序后的結果。例如：

Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
Object.entries([1, 2])                //[['0', 1], ['1', 2]]
Object.entries({ 3: 'a', 4: 'b', 1: 'c' })    //[['1', 'c'], ['3', 'a'], ['4', 'b']]
Object.values({ one: 1, two: 2 })            //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' })    //['c', 'a', 'b']

字符串填充：padStart和padEnd

ES8提供了新的字符串方法-padStart和padEnd。padStart函數通過填充字符串的首部來保證字符串達到固定的長度，反之，padEnd是填充字符串的尾部來保證字符串的長度的。該方法提供了兩個參數：字符串目標長度和填充字段，其中第二個參數可以不填，默認情況下使用空格填充。

'Vue'.padStart(10)           //'       Vue'
'Vue'.padStart(10, '_*')           //'_*_*_*_Vue'
'JavaScript'.padStart(8, 'Hi')     //'JavaScript'
'Vue'.padEnd(10, '_*')           //'Vue_*_*_*_'
'JavaScript'.padEnd(8, 'Hi')     //'JavaScript'

Object.getOwnPropertyDescriptors()

該方法會返回目標對象中所有屬性的屬性描述符，該屬性必須是對象自己定義的，不能是從原型鏈繼承來的。先來看個它的基本用法：

let obj = {
  id: 1,
  name: 'test',
  get gender() {
    console.log('gender')
  },
  set grade(g) {
    console.log(g)
  }
}
Object.getOwnPropertyDescriptors(obj)

//輸出結果為：
{
  gender: {
    configurable: true,
    enumerable: true,
    get: f gender(),
    set: undefined
  },
  grade: {
    configurable: true,
    enumerable: true,
    get: undefined,
    set: f grade(g)
  },
  id: {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  },
  name: {
    configurable: true,
    enumerable: true,
    value: 'test',
    writable: true
  }
}

方法還提供了第二個參數，用來獲取指定屬性的屬性描述符。

let obj = {
  id: 1,
  name: 'test',
  get gender() {
    console.log('gender')
  },
  set grade(g) {
    console.log(g)
  }
}
Object.getOwnPropertyDescriptor(obj, 'id')

//輸出結果為：
{
  id: {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  }
}

類比於Object.assign()

assign方法只能拷貝一個屬性的值，而不會拷貝它背后的復制方法和取值方法。Object.getOwnPropertyDescriptors()主要是為了解決Object.assign()無法正確拷貝get屬性和set屬性的問題，Object.getOwnPropertyDescriptors方法配合Object.defineProperties方法，就可以實現正確拷貝。

let obj = {
  id: 1,
  name: 'test',
  get gender() {
    console.log('gender')
  }
}
let obj1 = {}
Object.defineProperties(obj1, Object.getOwnPropertyDescriptors(obj))
Object.getOwnPropertyDescriptors(obj1)

//輸出結果為：
{
  gender: {
    configurable: true,
    enumerable: true,
    get: f gender(),
    set: undefined
  },
  id: {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  },
  name: {
    configurable: true,
    enumerable: true,
    value: 'test',
    writable: true
  }
}

以上的是部分ES7,ES8新特性，積極學習ES的新特性，這些新特性用起來能極大地方便和精簡自己的編碼邏輯。