在ES6中经常看到 ... 这个操作符，经常会让人看的头大，比如这样的代码
return {
...this.props,
...childMethods.reduce((acc, method) => ({
...acc,
[method]: this[method]
}), {})
};
rest参数
当我们不确定函数参数的时候经常使用arguments对象，ES6引入rest参数概念可以不再使用该对象
function add(...args) {
return args.reduce(((result, value) => result + value), 0);
}
add(1, 2, 3); // 6
rest参数也可以用于对象赋值
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
x // 1
y // 2
z // { a: 3, b: 4 }
有两个需要注意的地方
- rest参数后面不能再有其它参数
- rest参数不记入函数的
length属性
拓展运算符
拓展运算符也是...，是rest参数的逆运算，将一个数组转为逗号分隔的参数序列，运算符主要用于函数调用
console.log(...[1, 2, 3]);
console.log(1, 2, 3);
这两句一样一样的，与解构赋值结合
[first, ...rest] = [1, 2, 3]; // 效果同下
first = [1, 2, 3][0], rest = [1, 2, 3].slice(1);
[...'hello'] // [ "h", "e", "l", "l", "o" ]
在对象中也经常使用
var props = {
a:1,
b:2,
c:3
};
var obj = {
...props,
d: 4,
e: 5
}
等同于
var props = {
a: 1,
b: 2,
c: 3
};
var obj = Object.assign({}, props, {
d: 4,
e: 5
})