ES7 ES8 新特性

es7

• includes()
• 指數操做符

1：Array.prototype.includes

includes()的做用，是查找一個值在不在數組裏，若在，則返回true，反之返回false。 基本用法：

['a', 'b', 'c'].includes('a')     // true
['a', 'b', 'c'].includes('d')     // false複製代碼

Array.prototype.includes()方法接收兩個參數：要搜索的值和搜索的開始索引。當第二個參數被傳入時，該方法會從索引處開始日後搜索（默認索引值爲0）。若搜索值在數組中存在則返回true，不然返回false。 且看下面示例：

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

那麼，咱們會聯想到ES6裏數組的另外一個方法indexOf，下面的示例代碼是等效的：

['a', 'b', 'c'].includes('a')          //true
['a', 'b', 'c'].indexOf('a') > -1      //true複製代碼

此時，就有必要來比較下二者的優缺點和使用場景了。

• 簡便性

從這一點上來講，includes略勝一籌。熟悉indexOf的同窗都知道，indexOf返回的是某個元素在數組中的下標值，若想判斷某個元素是否在數組裏，咱們還須要作額外的處理，即判斷該返回值是否>-1。而includes則不用，它直接返回的即是Boolean型的結果。

• 精確性

二者使用的都是 === 操做符來作值的比較。可是includes()方法有一點不一樣，兩個NaN被認爲是相等的，即便在NaN === NaN結果是false的狀況下。這一點和indexOf()的行爲不一樣，indexOf()嚴格使用===判斷。請看下面示例代碼：

let demo = [1, NaN, 2, 3]

demo.indexOf(NaN)        //-1
demo.includes(NaN)       //true複製代碼

上述代碼中，indexOf()方法返回-1，即便NaN存在於數組中，而includes()則返回了true。

提示：因爲它對NaN的處理方式與indexOf不一樣，假如你只想知道某個值是否在數組中而並不關心它的索引位置，建議使用includes()。若是你想獲取一個值在數組中的位置，那麼你只能使用indexOf方法。

includes()還有一個怪異的點須要指出，在判斷 +0 與 -0 時，被認爲是相同的。

[1, +0, 3, 4].includes(-0)    //true
[1, +0, 3, 4].indexOf(-0)     //1複製代碼

在這一點上，indexOf()與includes()的處理結果是同樣的，前者一樣會返回 +0 的索引值。

注意：在這裏，須要注意一點，includes()只能判斷簡單類型的數據，對於複雜類型的數據，好比對象類型的數組，二維數組，這些，是沒法判斷的

2:求冪運算符（**）

基本用法

3 ** 2           // 9
複製代碼

效果同：

Math.pow(3, 2)   // 9
複製代碼

** 是一個用於求冪的中綴算子，比較可知，中綴符號比函數符號更簡潔，這也使得它更爲可取。 下面讓咱們擴展下思路，既然說**是一個運算符，那麼它就應該能知足相似加等的操做，咱們姑且稱之爲冪等，例以下面的例子，a的值依然是9：

let a = 3
a **= 2
// 9

複製代碼

ES8

• Object.values()
• Object.entries()
• padStart()
• padEnd()
• Object.getOwnPropertyDescriptors()
• 函數參數列表結尾容許逗號
• Async/Await

1:Object.values()

使用Object.values()遍歷對象的屬性值，無需使用使用屬性名：

let obj = {a: 1, b: 2, c: 3}

Object.values(obj).forEach(value =>{ console.log(value); // 輸出1, 2, 3})

2:Object.entries()

使用Object.entries()遍歷對象的屬性名和屬性值：

let obj = {a: 1, b: 2, c: 3}; 
Object.entries(obj).forEach(([key, value]) =>{   
 console.log(key + ": " + value); // 輸出a: 1, b: 2, c: 3
})
複製代碼

3:padStart()

使用padStart()能夠在字符串前面填充指定的字符串：

console.log('0.00'.padStart(20))
console.log('10,000.00'.padStart(20))   
console.log('250,000.00'.padStart(20))複製代碼

輸出結果以下：

0.00 
 10,000.00
250,000.00
複製代碼

4:padEnd()

使用padEnd()能夠在字符串後面填充指定的字符串：

console.log('0.00'.padEnd(20) + '0.00' ) 
console.log('10,000.00'.padEnd(20) + '10,000.00' )    
console.log('250,000.00'.padEnd(20) + '250,000.00')複製代碼

輸出以下：

0.00                0.00
10,000.00           10,000.00
250,000.00          250,000.00
複製代碼

5:Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()至關於Object.getOwnPropertyDescriptor()的複數形式，能夠獲取對象的全部自身屬性的描述符：

azatsBooks對象的定義以下：

let azatsBooks = {    
books: ['React Quickly'],    
get latest()    {  
      let numberOfBooks = this.books.length;       
      if (numberOfBooks == 0) return undefined;      
      return this.books[numberOfBooks - 1];   
}};複製代碼

console.log(Object.getOwnPropertyDescriptors(azatsBooks)) 
/** 輸出azatsBooks對象全部自身屬性的屬性描述[object Object] { 
 books: [object Object] {   
 configurable: true,  
  enumerable: true,   
 value: ["React Quickly"], 
   writable: true 
 }, 
 latest: [object Object] {  
  configurable: true,   
 enumerable: true,  
  get: function get latest() {  
    let numberOfBooks = this.books.length  
    if (numberOfBooks == 0) return undefined   
   return this.books[numberOfBooks - 1]    },   
 set: undefined  }}**複製代碼

6: 函數參數列表結尾容許逗號

var f = function(a, 
 b, 
 c, 
 d, // d以後容許帶逗號
) { 
  console.log(d)}
複製代碼

7: Async/Await

Async/Await使得異步代碼看起來像同步代碼，這正是它的魔力所在：

async fetchData(query) =>{  
  try    {      
  const response = await axios.get(`/q?query=${query}`); 
       const data = response.data;     
   return data;    }    
catch (error)    {      
  console.log(error)   
 }} 
fetchData(query).then(data =>{    this.props.processfetchedData(data)})
複製代碼