Spread操作符(...)是比较新的特性,但是在ES6的规范中,没有找到单独的章节对这个操作符进行说明,这个操作符主要用在两种情况下:函数传参和数组生成,这节主要讲解第一种情况。
规范的12.3.6.1中对函数参数列表的解释如下:
ArgumentList : ... AssignmentExpression
1. Let list be an empty List.
2. Let spreadRef be the result of evaluating AssignmentExpression.
3. Let spreadObj be GetValue(spreadRef).
4. Let iterator be GetIterator(spreadObj).
5. ReturnIfAbrupt(iterator).
6. Repeat
a. Let next be IteratorStep(iterator).
b. ReturnIfAbrupt(next).
c. If next is false, return list.
d. Let nextArg be IteratorValue(next).
e. ReturnIfAbrupt(nextArg).
f. Append nextArg as the last element of list.
从上面描述的第四步中可以清晰看到,Spread操作符后面的表达式应该是个iterator,如果不是第五步会报错。iterator是什么,后面具体的章节中在讲。在JS中,数组,字符串本身就是iterator,但是对象不是。
下面开始看示例,代码来了:
Math.max.apply(null,[-1, 5, 11, 3]);//旧写法
Math.max(-1, ...[-1, 5, 11], 3);//Spread操作符
Math.max(...[-1, 5, 11, 3]);
'use strict';
var arr = [];
arr = arr.concat([1,2,3]);
Array.prototype.push.apply(arr,[4,5,6]);//旧写法
console.log(arr);//1,2,3,4,5,6
arr.push(7,...[8,9],10);//Spread操作符
console.log(arr);//1,2,3,4,5,6,7,8,9,10
new Date(...[2015, 12, 23])//Spread操作符创建Date
function foo(x,y,z) {
console.log( x, y, z );
}
foo( ...[1,2,3] ); // 1 2 3
foo(3,...[4,5]);//3 4 5
上面都是数组的例子,下面看个字符串的:
'use strict';
var arr = [];
arr.push(..."abc");
console.log(arr);//["a", "b", "c"]
var obj = {
"1":"abc",
"2":"cde"
}
arr.push(...obj);//Uncaught TypeError: is not a function
*以上全部代码在Chrome 47下通过测试