譯者按:轉(zhuǎn)眼ES6發(fā)布2年了，×××解一下ES7與ES8特性了！

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的青浦網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

• 原文: ES7 and ES8 Features

• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯，并且對源代碼進(jìn)行了大量修改。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

我曾寫過一篇關(guān)于ES6博客《10個最佳ES6特性》，這次我打算聊聊ES7和ES8特性。

ES7只有2個特性:

• includes()
• 指數(shù)操作符

ES8尚未發(fā)布(2017年1月)，下面是它已經(jīng)完成起草的一些特性：

• Object.values()
• Object.entries()
• padStart()
• padEnd()
• Object.getOwnPropertyDescriptors()
• 函數(shù)參數(shù)列表結(jié)尾允許逗號
• Async/Await

Array.prototype.includes()

不使用ES7

使用indexOf()驗(yàn)證數(shù)組中是否存在某個元素，這時需要根據(jù)返回值是否為-1來判斷：

let arr = ['react', 'angular', 'vue'];

if (arr.indexOf('react') !== -1)
{
    console.log('React存在');
}

使用ES7

使用includes()驗(yàn)證數(shù)組中是否存在某個元素，這樣更加直觀簡單：

let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))
{
    console.log('React存在');
}

指數(shù)操作符

不使用ES7

使用自定義的遞歸函數(shù)calculateExponent或者M(jìn)ath.pow()進(jìn)行指數(shù)運(yùn)算：

function calculateExponent(base, exponent)
{
    if (exponent === 1)
    {
        return base;
    }
    else
    {
        return base * calculateExponent(base, exponent - 1);
    }
}

console.log(calculateExponent(7, 3)); // 輸出343
console.log(Math.pow(7, 3)); // 輸出343

使用ES7

使用指數(shù)運(yùn)算符**，就像+、-等操作符一樣：

console.log(7**3);

Object.values()

不使用ES8

使用Object.keys()遍歷對象的屬性值，需要通過屬性名key去獲取屬性值：

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

Object.keys(obj).forEach((key) =>
{
    console.log(obj[key]); // 輸出1, 2, 3
});

使用ES8

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

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

Object.entries()

不使用ES8

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

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

Object.keys(obj).forEach((key) =>
{
    console.log(key + ": " + obj[key]); // 輸出a: 1, b: 2, c: 3
})

使用ES8

使用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
})

padStart()

不使用ES8

console.log('0.00')             
console.log('10,000.00')    
console.log('250,000.00')  

輸出結(jié)果如下：

0.00
10,000.00
250,000.00

使用ES8

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

console.log('0.00'.padStart(20))            
console.log('10,000.00'.padStart(20))    
console.log('250,000.00'.padStart(20))    

輸出結(jié)果如下：

                0.00
           10,000.00
          250,000.00

padEnd()

不使用ES8

console.log('0.00 ' + '0.00' )          
console.log('10,000.00 ' + '10,000.00' )    
console.log('250,000.00 ' + '250,000.00')  

輸出如下：

0.00 0.00
10,000.00 10,000.00
250,000.00 250,000.00

使用ES8

使用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

Object.getOwnPropertyDescriptors()

azatsBooks對象的定義如下：

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

不使用ES8

使用Object.getOwnPropertyDescriptor()獲取單個屬性的屬性描述符。

獲取azatsBooks對象的books屬性的屬性描述符：

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'books'));

/** 輸出books屬性的屬性描述
[object Object] {
  configurable: true,
  enumerable: true,
  value: ["React Quickly"],
  writable: true
}
**/

獲取azatsBooks對象的lastest方法的屬性描述符：

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'latest'));

/** 輸出lastest方法的屬性描述
[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
}
**/

使用ES8

Object.getOwnPropertyDescriptors()相當(dāng)于Object.getOwnPropertyDescriptor()的復(fù)數(shù)形式，可以獲取對象的所有自身屬性的描述符：

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
  }
}
**/

函數(shù)參數(shù)列表結(jié)尾允許逗號

不使用ES8

var f = function(a,
  b,
  c,
  d // d之后不能帶逗號
   ) { 
  console.log(d)
}

使用ES8

var f = function(a,
  b,
  c,
  d, // d之后允許帶逗號
) { 
  console.log(d)
}

允許逗號之后，可以避免一些不必要的報(bào)錯。(如果你希望實(shí)時監(jiān)控JavaScript應(yīng)用的錯誤，歡迎免費(fèi)使用Fundebug)

Async/Await

使用Promise

使用Promise寫異步代碼，會比較麻煩：

axios.get(`/q?query=${query}`)
    .then(response => response.data)
    .then(data =>
    {
        this.props.processfetchedData(data);
    })
    .catch(error => console.log(error));

使用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)
})

Async/Await是寫異步代碼的新方式，以前的方法有回調(diào)函數(shù)和Promise。相比于Promise，它更加簡潔，并且處理錯誤、條件語句、中間值都更加方便，因此有望替代Promise，成為新一代的一步代碼編寫方式。對細(xì)節(jié)感興趣的話，可以查看[Fundebug]()翻譯的《Async/Await替代Promise的6個理由》。

關(guān)于Fundebug:

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/08/28/es7-and-es8/