ES6中的 Set、Map 、扩展运算符（三个点）、rest运算符（三个点）

偶然看到某大厂的一个面试题，于是有了本次学习笔记
原题大概是这样的：用一行代码实现数组去重

比如：var arr1 = [1,2,4,2,3,5,1,3];
数组去重有多种实现方式，但用一行代码能搞定？
是的，查阅资料真有答案！

// 方法一：
var arr1 = [1,2,4,2,3,5,1,3];
var arr2 = [...new Set(arr1)];
console.log(arr2);// [1, 2, 4, 3, 5]

// 方法二：
var arr1 = [1,2,4,2,3,5,1,3];
var arr2 = Array.from(new Set(arr1));
console.log(arr2);// [1, 2, 4, 3, 5]

第一行是题目，第三行是输出验证结果，确实第二行就搞定了数组去重！
看到 […new Set(arr1)] 的时候，第一反应是：还有这种操作，感觉好高大上有木有！

先来搞明白这三个点是什么鬼东西

es6 扩展运算符(…)
扩展运算符用三个点号表示，其功能是把数组或类数组对象展开成一系列用逗号隔开的参数序列

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

感觉挺好用，再看看其他用法

var arr1 = [1,2];
var arr2 = [3,4,5];
function addItems(arr, ...items) {
    arr.push(...items);
};
addItems(arr1,...arr2);
console.log(arr1);// [1, 2, 3, 4, 5]

arr.push(…items) 和 addItems(arr1,…arr2) 这两行是函数的调用，都使用了扩展运算符将数组变为参数序列
注意这行：function addItems(arr, …items) { 这里的三个点并不是扩展运算符，而是 rest运算符

es6 rest运算符(…)
rest运算符也是三个点，其功能与扩展运算符恰好相反，把逗号隔开的参数序列组合成一个数组

var arr = [1,2,3];
function fn(...args) {// rest运算符 组合数组
    console.log(args);// [1, 2, 3]

};
fn(...arr);// 扩展运算符 展开数组
console.log(...arr);// 1 2 3

当然了，这三个点还有很多很多妙用，在此暂不深入研究

那么 new Set() 又是什么东东？

es6 提供了两种新的数据结构 Set 和 Map

Set 是一个构造函数，用来生成 Set 数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值
初始化 Set 可以接受一个数组或类数组对象作为参数，也可以创建一个空的 Set

var s1 = new Set();
var s2 = new Set([1, 2, 3]);
console.log(s1);// Set(0) {}
console.log(s2);// Set(3) {1, 2, 3}

在 Set 中成员的值是唯一的，重复的值自动被过滤掉

var s1 = new Set([1, 2, 2, 3, 1, 4]);
console.log(s1);// Set(4) {1, 2, 3, 4}

Set 的一些属性方法：
size：返回成员总数
add(value)：添加某个值，返回Set结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为Set的成员
clear()：清除所有成员，没有返回值

var set = new Set([1,2]);
set.add(3);// 添加成员
console.log(set.size);// 3 成员总数
console.log(set);// Set(3) {1, 2, 3}
set.add([4,5]);// 添加成员
console.log(set.size);// 4 成员总数
console.log(set.has(2));// true 有该成员
console.log(set);// Set(4) {1, 2, 3, [4, 5]}
set.delete(2);// 删除成员
console.log(set);// Set(3) {1, 3, [4, 5]}
console.log(set.has(2));// false 没有该成员
set.clear();// 清除所有成员
console.log(set);// Set(0) {}

得益于数据结构 Set 查找更快速高效，但也因为数据结构的内部数据是无序的，无法实现按下标改查，排序等操作

var arr = [1,2,3,'a',4,'b'];
var set = new Set(arr);
console.log(set[0]);// undefined
console.log(set['a']);// undefined

Map 是一个构造函数，用来生成 Map 数据结构，它类似于对象，也是键值对的集合，但是“键”可以是非字符串
初始化 Map 需要一个二维数组，或者直接初始化一个空的 Map

var m1 = new Map();
var m2 = new Map([['a', 123], ['b', 456], [3, 'abc']]);
console.log(m1);// Map(0) {}
console.log(m2);// Map(3) {"a" => 123, "b" => 456, 3 => "abc"}

Map 的一些操作方法：
set(key, value)：设置键值对
get(key)：获取键对应的值
has(key)：是否存在某个键
delete(key)：删除某个键值对，返回一个布尔值，表示删除是否成功

var map = new Map([['a', 123], ['b', 456], [3, 'abc']]);
map.set('c',789);
console.log(map.get('c')); // 789
console.log(map.has('b')); // true 此key存在
map.delete(3); // true 成功删除key
console.log(map); // Map(3) {"a" => 123, "b" => 456, "c" => 789}

传统 Object 只能用字符串作键，Object 结构提供了“字符串 — 值”的对应
Map 结构提供了“值 — 值”的对应，是一种更完善的 Hash 结构实现
如果你需要“键值对”的数据结构，Map 比 Object 更快速 更高效 更合适

遍历Map和Set对象

var map = new Map([['a', 123], ['b', 456], [3, 'abc'],['c', 789]]);
map.forEach((val,key,obj)=>{
    console.log('val: '+val);
    console.log('key: '+key);
    console.log(obj);
}); // 结果如下图

var set = new Set(['a','b','c','d']);
set.forEach((val,key,obj)=>{
    console.log('val: '+val);
    console.log('key: '+key);
    console.log(obj);
});// 结果如下图

当然，还可以使用es6中的 for of 遍历

var map = new Map([['a', 123], ['b', 456], [3, 'abc'],['c', 789]]);
for (const [key,val] of map) {
    console.log(key+' : '+val);
}
// a : 123
// b : 456
// 3 : abc
// c : 789

var set = new Set(['a','b','c','d']);
for (const val of set) {
    console.log(val);// a b c d
}

有没有发现 Set 没有类似 get 的方法，怎么取值呢？
可以用上面的遍历取值，或者可以把 Set 转成真正的数组

第一种方法：使用扩展运算符把类似数组对象的 Set 展开并放在数组里

var set = new Set(['a','b','c','d']);
var arr = [...set];
console.log(arr);// ["a", "b", "c", "d"]

第二种方法：使用 Array.from() 方法转成真正的数组对象

var set = new Set(['a','b','c','d']);
var arr = Array.from(set);
console.log(arr);// ["a", "b", "c", "d"]

小结：
回归主题，用一行代码实现数组去重，至此已解决
利用 Set 内部成员的唯一性不可重复性，再配合扩展运算符，很轻松一行代码搞定
当我们在解决一个问题的时候，相关联的知识点也应该去学习，这样进步更快一点
es6 很多新特性真的即方便又高效