... in ES6

在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 }

有两个需要注意的地方

1. rest参数后面不能再有其它参数
2. 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
})