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']