原文: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); }