ES6——解構、擴展運算符、合並數組、new Set

參考：　https://www.cnblogs.com/chrischjh/p/4848934.html

　　　　https://www.imooc.com/article/72520

　　　　https://www.cnblogs.com/ajaemp/p/11820339.html

　　　　https://www.jianshu.com/p/d599c212b3fa

 

1. 解構：

　　解構的作用是可以快速取得數組或對象當中的元素或屬性，而無需使用arr[x]或者obj[key]等傳統方式進行賦值

 

　　1).數組解構賦值:　

var arr = ['this is a string', 2, 3];

//傳統方式
var a = arr[0],
    b = arr[1],
    c = arr[2];

//解構賦值
var [a, b, c] = arr;

console.log(a);//this is a string
console.log(b);//2
console.log(c);//3

 

　　2). 對象賦值解構：

var obj = {
    name: 'chris',
    sex: 'male',
    age: 26,
    son: {
        sonname: '大熊',
        sonsex: 'male',
        sonage: 1
    }
};

var {name, sex, age, son} = obj;
console.log(name + ' ' + sex + ' ' + age); //chris male 26
console.log(son); // { sonname: '大熊', sonsex: 'male', sonage: 1 }

 

 

2. 擴展運算符：

　　

　　擴展運算符用三個點號表示，功能是把數組或類數組對象展開成一系列用逗號隔開的值

 

var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var arr = [1, 2, 3];

//傳統寫法
foo(arr[0], arr[1], arr[2]);
//使用擴展運算符
foo(...arr);
//1
//2
//3

 

　特殊應用場景：　

var arr = [1, 2, 3];

//數組深拷貝
var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //true, 說明arr和arr2指向同一個數組
console.log(arr===arr3); //false, 說明arr3和arr指向不同數組

//把一個數組插入另一個數組
var arr4 = [...arr, 4, 5, 6];
console.log(arr4);//[1, 2, 3, 4, 5, 6]

//字符串轉數組
var str = 'love';
var arr5 = [...str];
console.log(arr5);//[ 'l', 'o', 'v', 'e' ]

 

 

3. 合並數組：

let arr1 = ['a', 'b']
let arr2 = ['c', 'c']
let arr3 = ['d', 'e']
// ES5 的合並數組
arr1.concat(arr2, arr3)
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合並數組
let arr4 = [...arr1, ...arr2, ...arr3] //...實現解構 // [ 'a', 'b', 'c', 'd', 'e' ]
 // 不過，這兩種方法都是淺拷貝，使用的時候需要注意

 

 

4. new Set:

　　1). 數組去重

　　　　

var arr = [1,2,3,3,1,4];
[...new Set(arr)]; // [1, 2, 3, 4]
Array.from(new Set(arr)); // 將new Set后的數據轉為數組，[1, 2, 3, 4]
[...new Set('ababbc')].join(''); // "abc" 字符串去重
new Set('ice doughnut'); //["ice","doughnut"]

 

　　2). 並集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

　　

　　3). 交集

　　

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

 

　　4). 差集

 

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

 

5. new Set與擴展運算符一起使用

let set =new Set(['a','b','c','a']);
console.log(set);//Set[3]{'a','b','c'} size:3
console.log(set.size);//3


var c = [...set]; //需加中括號，否則會報錯
console.log(c);//['a','b','c']