剩余运算符
在 ES6
发布前,处理非固定数量的函数参数需要借助 arguments
属性,arguments
不是真正的数组,但却可以使用索引提取成员值,具有 length
属性,这种特殊的数据结构被称为类数组对象,在 ES6
前,通常会借助 Array
原型中的 slice
方法实现类数组对象转数组:
function fn() {
var args = Array.prototype.slice.call(arguments);
}
使用 ES6
中新增的剩余运算符可以很好的解决这个问题,通过在集合中最后一个成员前添加 ...
,可以将未绑定变量的成员进行打包为一个新的集合(参数列表、数组解构中使用会打包为数组,对象解构中使用会打包为新的对象),让我们来看一下示例:
- 参数列表(与箭头函数可以完美结合)
function fn(zero, ...args) {
console.log(zero, args);
}
fn(0, 1, 2);
// => 0 (2) [1, 2]
- 数组解构(被忽略的成员值不会被打包)
var arr = [0, 1, 2, 3];
var [zero, , ...rest] = arr;
console.log(zero, rest);
// => 0 (2) [2, 3]
- 对象解构
var obj = {
zero: 0,
one: 1,
two: 2
}
var {zero, ...rest} = obj;
console.log(zero, rest);
// => 0 {one: 1, two: 2}
扩展运算符
与剩余运算符的长相相同,扩展运算符也是 ...
,有时我们会将它们统称为“三个点运算符”,事实上,它们的名称是根据使用场景进行切换的,剩余运算符的作用主要是打包,而扩展运算符则相反,主要起到分散的作用,示例:
- 参数列表
function fn() {
console.log(...arguments);
}
fn(0, 1, 2);
// => 0 1 2
- 数组
var arr = [0, 1, 2];
console.log(...arr);
// => 0 1 2
通过扩展运算符与数组解构语法可以很方便的将打散后的成员聚合为新的数组,以下代码实现了在不使用 concat
方法的情况下将两个数组聚合为一个新的数组:
var firstArr = [0, 1, 2];
var secondArr = [3, 4, 5]
console.log([...firstArr, ...secondArr]);
// => [0, 1, 2, 3, 4, 5]
需要注意的是,扩展运算符不能直接对对象使用,需要转为可迭代才可以,这里我们先不做讨论,后续迭代器部分会详细说明ES5
中,使用 apply 方法可以为方法绑定新的作用域,并传递不定数量的参数,但是由于参数是通过数组的形式传递,书写起来往往会非常冗长,使用 ES6 中的扩展运算符则可以很好的解决这个问题,通过对 arguments 打散处理,可以很方便的动态扩展参数
解构到这里就告一段落了,后续会写一下模板字符串(多行字符串)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。