深入理解es6中強大的【...】操作符

... 運算符， 是ES6里一個新引入的運算法， 也叫展開/收集運算符（也被叫做延展操作符 － spread operator），本篇文章講解一下其具體的用法。

基礎用法1：展開

const a = [2, 3, 4]
const b = [1, ...a, 5]
console.log(b);// [1, 2, 3, 4, 5]

基礎用法2：收集

function foo(a, b, ...c) {
    console.log(a, b, c)
}
foo(1, 2, 3, 4, 5); // 1, 2, [3, 4, 5]

基礎用法3：把類數組轉換為數組

const nodeList = document.getElementsByClassName("test");
const array = [...nodeList];
  
console.log(nodeList); // HTMLCollection [ div.test, div.test ]
console.log(array); // Array [ div.test, div.test ]

使用 ... 就可以實現類數組到數組的轉換， 轉換之后， 就可以使用數組的各種方法了。那么這個操作符出來之前是如何轉換的呢？見下面例子：

// es5
function bar() {
    var args = Array.prototype.slice.call(arguments);
    args.push(4, 5, 6);
    return args;
}
console.log(bar(1, 2, 3)); // [1, 2, 3, 4, 5, 6]
// es6
function foo(...args) {
    args.push(4, 5, 6);
    return args;
}
console.log(foo(1, 2, 3)); // [1, 2, 3, 4, 5, 6]

基礎用法4：為數組新增成員

const peoples = ["jone", "jack"];
const mrFan = "吳亦凡";
const all = [...peoples, mrFan];
console.log(all); //  ["jone", "jack", "吳亦凡"]

基礎用法5：為對象新增屬性

const obj = { name: 'jack', age: 30 }
const result = { ...obj, sex: '男', height: '178cm' }
console.log(result); // {name: "jack", age: 30, sex: "男", height: "178CM"}

基礎用法6：合並數組或數組對象

const a = [1, 2, 3];
const b = [4, 5, 6];
const result = [...a, ...b]; //  [1, 2, 3, 4, 5, 6] 

數組對象也一樣

基礎用法7：合並對象

const people = {
    name: 'Lucy',
    age: 30,
    sex: '女'
};
const base = {
    age: 22,
    job: 'teacher',
    height: '168cm'
}
const all = { ...people, ...base }; 
console.log(all); // {name: "Lucy", age: 22, sex: "女", job: "teacher", height: "168cm"}

注：相同的屬性會覆蓋掉

我是分割線

高級用法1：復制引用類型的數據

const people = {
    name: 'Lucy',
    age: 30,
    sex: '女',
    hobbies: ['play games', 'basketball', 'swim']
};
const result = { ...people, ...people.hobbies };
console.log(result); // {0: "play games", 1: "basketball", 2: "swim", name: "Lucy", age: 30, sex: "女", hobbies: Array(3)}

高級用法2：增加條件屬性

例子1：

const people = {
    name: 'Lucy',
    age: 30,
    sex: '女',
    hobbies: ['play games', 'basketball', 'swim']
};
const attrs = ['basketball', 'swim']
const result = attrs ? { ...people, attrs } : people
console.log(result); // {name: "Lucy", age: 30, sex: "女", hobbies: Array(3), attrs: Array(2)}

例子2：

const people = {
    name: 'Lucy',
    age: 30,
    sex: '女',
    hobbies: ['play games', 'basketball', 'swim']
};
const attrs = ['basketball', 'swim']
const result = {
    ...people,
    ...(attrs && { attrs })
}
console.log(result); // {name: "Lucy", age: 30, sex: "女", hobbies: Array(3), attrs: Array(2)}

類似於給對象添加屬性

高級用法3：默認結構和添加默認屬性

默認解構：我們知道， 當結構一個對象的時候， 如果這個對象里沒有某個屬性， 解出來是undefined , 我們可以添加默認值來解決：

const people = {
    name: 'Lucy',
    age: 30,
};
let { name, age, sex = 'female' } = people;
console.log(name, age, sex); // Lucy 30 female