JavaScript ES6的新特性

今天就跟大家聊聊有關JavaScript ES6的新特性，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。ES6 主要是為了解決 ES5 的先天不足，比如 JavaScript 里并沒有類的概念，但是目前瀏覽器的 JavaScript 是 ES5 版本，大多數高版本的瀏覽器也支持 ES6，不過只實現了 ES6 的部分特性和功能。

JavaScript ES6 添加了一系列新的語言特性，其中一些特性比其它更具有開創性以及更廣的可用性。比如像 ES6 類 這樣的特性，雖然新奇，但其實僅僅是在 JavaScript 中創建類的已有方法之上的一種語法糖。而像生成器（generator）這樣的功能，雖然非常強大，但卻是為了針對性的任務所保留的。

從在過去的12個月里所從事的不同 JavaScript 相關項目中，我發現有 5 個 ES6 特性是不可或缺的，因為它們真正簡化了 JavaScript 普通任務的完成方式。

1. 箭頭函數（Arrow Functions）
2. Promises
3. 異步函數（Async Functions）
4. 解構（Destructuring）
5. 默認和剩余參數（Default and Rest Parameters）

1) JavaScript 箭頭函數

在 ES6 JavaScript 中，我最喜歡的新增特性之一并不是一個全新特性，而是一個我每次使用都能讓我微笑的新語法。我說的就是箭頭函數，它提供了一種極致優雅和簡潔的方式來定義匿名函數。

簡而言之，箭頭函數就是丟掉了關鍵字 function，然后用一個箭頭 => 來分離一個匿名函數的參數部分和函數體：

(x, y) => x * y;

這相當于:

function(x, y){
    return x * y;
}

或者:

(x, y) => {
    var factor = 5;
    var growth = (x-y) * factor;
}

完全等價于:

function(x, y){
    var factor = 5;
    var growth = (x-y) * factor;
}

在使用傳統的匿名函數時，箭頭函數還消除了一個關鍵的錯誤源，即函數內的 this 對象的值。使用箭頭函數，this 是基于詞法綁定，這僅僅是意味著它的值被綁定到父級作用域的一種奇特的方式，并且永遠不會改變。如果一個箭頭函數定義在一個自定義對象 countup 中，this 值毫無疑問地指向 countup。比如：

var countup = {
    counter: 15,

    start:function(){
        window.addEventListener('click', () => {
            alert(this.counter) // correctly alerts 15 due to lexical binding of this
        })
    }
};

countup.start();

對比傳統匿名函數，this 的值在哪變化取決于它被定義的上下文環境。當在上面的例子中嘗試引用 this.counter，結果將返回 undefined，這種行為可能會把很多不熟悉動態綁定的復雜性的人搞糊涂。使用箭頭函數，this 的值總是可預測并且容易推斷的。

對于箭頭函數的詳細講解， 請看 “Overview of JavaScript Arrow Functions“.

2) 默認和剩余參數（Default and Rest Parameters）

最后，我最想提出的ES6的兩個特性是處理函數參數。幾乎我們在JavaScript中創建的每個函數都接受用戶數據，所以這兩個特性在一個月中不止一次地派上用場。

默認參數（Default Parameters）

我們都使用過一下模式來創建具有默認值的參數：

function getarea(w,h){
  var w = w || 10
  var h = h || 15
  return w * h
}

有了ES6對默認參數的支持，顯式定義的參數值的日子已經結束：

function getarea(w=10, h=15){
  return w * h
}
getarea(5) // returns 75

關于 ES6 默認參數的更多詳情 在這.

剩余參數（Rest Parameters）

ES6中的 Rest Parameters 使得將函數參數轉換成數組的操作變得簡單。

function addit(...theNumbers){
  // get the sum of the array elements
    return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0) 
}

addit(1,2,3,4) // returns 10

通過在命名參數前添加3個點 ...，在該位置和之后輸入到函數中的參數將自動轉換為數組。

沒有 Rest Parameters, 我們不得不做一些復雜的操作比如 手動將參數轉換為數組 ：

function addit(theNumbers){
    // force arguments object into array
    var numArray = Array.prototype.slice.call(arguments) 
    return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)
}

addit(1,2,3,4) // returns 10

Rest parameters 只能應用于函數的參數的一個子集，就像下面這樣，它只會將參數從第二個開始轉換為數組：

function f1(date, ...lucknumbers){
    return 'The Lucky Numbers for ' + date + ' are: ' + lucknumbers.join(', ')
}

alert( f1('2017/09/29', 3, 32, 43, 52) ) // alerts "The Lucky Numbers for 2017/09/29 are 3,32,43,52"

3) JavaScript Promises

JavaScript ES6 Promises 使異步任務的處理方式變成線性， 這是大多數現代Web應用程序中的一項任務。 而不是依靠回調函數 —— 通過JavaScript框架（如jQuery）普及。JavaScript Promises 使用一個中心直觀的機制來跟蹤和響應異步事件。它不僅使調試異步代碼變得更容易，而且使得編寫它也是一種樂趣。

所有 JavaScript Promise 都是通過 Promise() 構造函數開始和結束:

const mypromise = new Promise(function(resolve, reject){
 // 在這編寫異步代碼
 // 調用 resolve() 來表示任務成功完成
 // 調用 reject() 來表示任務失敗
})

在內部使用 resolve() 和 reject() 方法，當一個 Promise 被完成或拒絕時，我們可以分別向一個 Promise 對象發出信號。 then() 與 catch() 方法隨后可以被調用，用以處理完成或拒絕 Promise 后的工作。

我用下面一個被注入 XMLHttpRequest 函數的 Promise 的變種，來一個接一個的檢索外部文件內容：

function getasync(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

getasync('test.txt').then((msg) => {
    console.log(msg) // echos contents of text.txt
    return getasync('test2.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text2.txt
    return getasync('test3.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text3.txt
})

要掌握 JavaScript Promises 的關鍵點，例如 Promise 鏈和并行執行 Promise，請閱讀 “Beginner’s Guide to Promises“.

4) JavaScript 異步函數

除了 JavaScript Promise，異步函數進一步重寫了傳統的異步代碼結構，使其更具可讀性。每當我向客戶展示帶有async 編程功能的代碼時，第一個反應總是令人驚訝，隨之而來的是了解它是如何工作的好奇心。

一個異步函數由兩部分構成:

1) 一個以 async 為前綴的常規函數

async function fetchdata(url){
    // Do something
    // Always returns a promise
}

2) 在異步函數（Async function）內，使用 await 關鍵字調用異步操作函數

一個例子勝過千言萬語。下面是基于上面示例重寫的 Promise，以便使用 Async functions代替：

function getasync(url) { // same as original function
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

async function fetchdata(){ // main Async function
    var text1 = await getasync('test.txt')
    console.log(text1)
    var text2 = await getasync('test2.txt')
    console.log(text2)
    var text3 = await getasync('test3.txt')
    console.log(text3)
    return "Finished"
}

fetchdata().then((msg) =>{
    console.log(msg) // logs "finished"
})

上面的例子運行時會輸出“test.txt”，“test2.txt”，“test3.txt”，最后是“Finished”。

如你所見，在異步函數中，我們把異步函數 getasync() 當作是同步函數調用 – 沒有 then() 方法或回調函數通知進行下一步。無論何時遇到關鍵字 await，執行都會暫停，直到 getasync() 解決，然后再轉到異步函數中的下一行。結果與純粹的基于 Promise，使用一串 then 方法的方式一樣。

要掌握異步函數，包括如何 await 并行執行函數，請閱讀 “Introduction to JavaScript Async Functions- Promises simplified”

5) JavaScript 解構

除了箭頭函數，這是我每天使用最多的 ES6 功能。ES6 解構并非一個新功能，而是一個新的賦值語法，可以讓您快速解壓縮對象屬性和數組中的值，并將它們分配給各個變量。

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name, hobby} = profile // destructure profile object
console.log(name) // "George"
console.log(hobby) // "Tennis"

這里我用解構快速提取 profile 對象的 name 和 hobby 屬性 。

使用別名，你可以使用與你正在提取值的對象屬性不同的變量名：

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name:n, hobby:h} = profile // destructure profile object
console.log(n) // "George"
console.log(h) // "Tennis"

嵌套對象解構

解構也可以與嵌套對象一起工作，我一直使用它來快速解開來自復雜的JSON請求的值：

var jsondata = {
    title: 'Top 5 JavaScript ES6 Features',
    Details: {
        date: {
            created: '2017/09/19',
            modified: '2017/09/20',
        },
        Category: 'JavaScript',
    },
    url: '/top-5-es6-features/'
};

var {title, Details: {date: {created, modified}}} = jsondata
console.log(title) // 'Top 5 JavaScript ES6 Features'
console.log(created) // '2017/09/19'
console.log(modified) // '2017/09/20'

解構數組

數組的解構與在對象上的工作方式類似，除了左邊的花括號使用方括號代替：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Dennis"

你可以跳過某些數組元素，通過使用逗號（，）：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a,,b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Sandy"

對我而言，解構消除了傳統方式提取和分配對象屬性和數組值的所有摩擦。要充分掌握ES6解構的復雜性和潛力，請閱讀”Getting to Grips with ES6: Destructuring“.

看完上述內容，你們對JavaScript ES6的新特性有進一步的了解嗎？如果還想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。