[譯]ECMAScript 6中的參數解構和forEach()

原文:http://www.2ality.com/2013/02/foreach-es6.html

---

本文將對ECMAScript 6中的解構(destructuring)語法做簡要介紹,以及講解一下如何利用解構來讓數組方法forEach()的使用更加方便.

解構

ECMAScript 6中的解構特性具體是指:賦值操作的目標(可以理解為賦值語句的左值)可以是一個模式(pattern),該模式可以進入賦值操作的右值(可以是一個數組或者一個普通對象)的內部,將右值內部的某個數組元素的值(右值為數組的情況)或者某個屬性的值(右值為普通對象的情況)賦值給左值模式中包含的某個變量.下面的這個例子演示了解構是如何應用在變量聲明語句中的:

> let { first: f, last: l } = { first: 'Jane', last: 'Doe' };
> f
'Jane'
> l
'Doe'

另外一個例子,你還可以交換兩個變量x和y的值:

[x,y] = [y,x];

解構特性也可以運用在形參的位置.下面的這個函數有兩種形參:第一種形參(positional)是位置形參(根據形參的排列位置來傳遞對應的實參),剩下的形參(named1和named2)是命名形參(根據形參的名稱來傳遞對應的實參),其中,命名形參被包裝在一個稱之為選項對象(options object)的對象字面量中(其實這個對象也就是第二個位置形參).

function foo(positional, { named1, named2 }) {
    return [ positional, named1, named2 ];
} 

調用上面的函數效果如下:

> foo(123, { named1: 'abc', named2: 'def' })
[ 123, 'abc', 'def' ]
> foo(123, { named2: 'def', named1: 'abc' })
[ 123, 'abc', 'def' ]

你還可以為位置形參和命名形參指定默認參數值(也是ES6特性),擁有默認參數值的形參在函數調用時可以省略對應的傳入實參 ^[1].

解構和forEach()

ES6中的解構參數(Destructuring parameter)很適合與Array.prototype.forEach()方法配合使用,如下:

let items = [ ['foo', 3], ['bar', 9] ];
items.forEach(([word, count]) => console.log(word+' '+count));

在這個例子中,forEach()方法的參數是一個箭頭函數(arrow function),這也是ECMAScript 6中一種新的函數表達式的書寫方式 ^[2].在這個例子中,數組中的元素還可以是一個常規對象:

let items = [ {word:'foo', count:3}, {word:'bar', count:9} ];
items.forEach(({word, count}) => console.log(word+' '+count)); 

其中的對象子面量:

{ word, count }

就是下面這種常見寫法的縮寫形式:

{ word: word, count: count }

因此,你還可以把上面的語句寫成:

items.forEach(({word: w, count: c}) => console.log(w+' '+c));

另外,ECMAScript 6新增的for-of循環語句中也可以使用解構 ^[3]:

for ([word, count] of items) {
    console.log(word+' '+count);
}

參考文章

1. Keyword parameters in JavaScript and ECMAScript.next
2. ECMAScript.next: arrow functions and method definitions
3. ECMAScript.next: for-of, iterators, generators