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)})
複製程式碼

ES7 ES8 新特性

2:求冪運算子（**）

相關文章