总结ES6扩展运算符

含义

扩展运算符(spread)是三个点(...),好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3])
// 1 2 3
console.log(1,...[2,3,4],5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用。

function push(array,...items){
  array.push(...items);
}

function add(x, y){
return x + y;
}
const numbers =[4,38];
add(...numbers)// 42

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们都使用了扩展运算符。该运算符将一个数组，变为参数序列。

---

替换apply

扩展运算符可以展开数组，代替apply()将数组转化为函数参数的需求。

//ES5
Math.max.apply(null, [1, 3, 5]);

//ES6
Math.max(...[1, 3, 5]); 

---

合并数组

//ES5
var arr1 = [8]
var arr2 = [9,11,12,13]
arr1.push(arr2);
//[8,[9,11,12,13]]
Array.prototype.push.apply(arr1,arr2);
//[8,9,11,12,13]

// ES6
arr1.push(...arr2);
console.log(arr1)
//[8,9,11,12,13]

//可以直接写
var newArr = [...arr1, ...arr2]
console.log(newArr)

---

解构赋值

var [a, ...b] = [2,3,4,5,6];
console.log(a, b);
//2 [3,4,5,6]
var [c, ...d] = [2];
console.log(c, d);
//2 []
var [...x,y] = [2,3,4,5,6];
//Uncaught SyntaxError: Rest element must be last element

当扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

---

数组和对象的拷贝

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

console.log(arr1 === arr2) // false

arr2.push(4); // 修改arr2，不会影响arr1的值

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

对象也一样

var obj1 = {
    a: 1,
    b: 2
};

var obj2 = {...obj1};

console.log(obj1 === obj2); // false

obj2.c = 3; // 修改obj2不会影响obj1
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2, c: 3}

注意：扩展运算符拷贝是浅拷贝，只对数组或对象的第一层结构起作用

---

对象的扩展运算符

var {a, b, ...c} = {a : 12, b : 23, d : 34, c : 345}
//c ->{d:34,c:345}

var obj = {name : 'coco'}
var obj1 = {age : 27}
var newObj = {...obj, ...obj1};
var newObj1 = {obj, obj1};
console.log(newObj);//{name: "coco", age: 27}
console.log(newObj1);//{name: "coco"} {age: 27}

---

字符串转数组

var strArr = [...'kiwi']
console.log(strArr)
//["k","i","w","i"]