[译]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