扩展运算符（...）在Array、Function和Object中的运用

... 运算符

...运算符是ES6中新增的扩展运算符，在ES6中运用在Array和Function中，在ES7中支持Object，...运算符是将一个数组转为以逗号分隔的序列。

...[1,2,3]	=>	1,2,3

...运算符在Array中的运用

通过push函数，将一个数组添加到另一个数组的尾部。

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
// 0 1 2 3 4 5

通过...展开数组完成数组克隆

var arr1 = [1, 2, 3];
var arr2 = [...arr1];
console.log(arr2);
/// [1, 2, 3]

元素节点也可以展开

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

...运算符在Function中的运用

在函数中传递的参数我们可以通过...收集arguments

(function(...arg){
	console.log(arg)
})(1,2,3,4,5)
// [1, 2, 3, 4, 5]

当一个函数可以可以传递N个参数时我们可以使用...收集arguments参数。
比如下面的求和函数

function sum(...arg) {
    let sum = 0;
    arg.forEach((num) => {
        sum += num;
    })
    return sum;
}
console.log(sum(1, 2, 3, 4, 5))
// 15

... 运算符在Object中的运用

展开Object后再进行合成

let username = {
    name: 'CrazysRabbit',
}
let userage = {
    age: 20,
}
let obj = {
    ...username,
    ...userage
}

console.log(obj)
// {name: "CrazysRabbit", age: 20}