ES6之Set和Map

Set和Map数据结构

Set

Set是es6的新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构

用法：

const s = new Set();
[1,2,3,3,2,1,6].forEach(x => s.add(x));
for(let i of s){
    console.log(i);//1 2 3 6
}

上面代码通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。

Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

//以数组为参数
const items =new Set([1,2,3,4,5,5,5,5]);
//以类数组对象作为参数
const set=new Set(document.querySelectorAll('div'));

注意：对Set来说，5和’5’是两个不同的值，而NaN是相同值。

Set 实例的属性和方法

Set 结构的实例有以下属性。

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。

操作方法

• Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
• Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
• Set.prototype.clear()：清除所有成员，没有返回值。

注意：Set结构并不是一个数组，但是Array.from方法可以将 Set 结构转为数组。其实这样也就可以通过把原数组转化为Set结构而去重，之后再通过Array.from把Set 结构转为数组。这就可以实现数组去重。

遍历操作

• Set.prototype.keys()：返回键名的遍历器
• Set.prototype.values()：返回键值的遍历器
• Set.prototype.entries()：返回键值对的遍历器
• Set.prototype.forEach()：使用回调函数遍历每个成员

注意：Set的遍历顺序就是插入顺序。

注意：keys方法、values方法、entries方法返回的都是遍历器对象。所以还需要用 遍历 遍历器对象的方法来访问里面的值。

注意：由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

let set = new Set([111,222,333]);
console.log(set.keys());
console.log(set.values());

具体的遍历方法我推荐用for...of，

let set = new Set([111,222,333]);
for(let item of set.keys()){
    console.log(item);//111  222  333
}//set.values()和上面输出是一样的就不举例了

entries方法的具体用法

let set = new Set([111, 222, 333]);
console.log(set.entries());
for (let item of set.entries()) {
    console.log(item);
}

由此可见其实可以说Set键名和键值是同一个值

注意：其实Set 结构的实例默认可遍历，这就意味着，可以直接用for...of循环遍历 Set。

let set = new Set([111, 222, 333]);
for (let item of set) {
    console.log(item);//111  222  333
}

细心的同学有没有发现这样跟用for...of循环遍历 keys方法和values方法返回的遍历器对象的结果是一样的。

其实是因为Set的默认遍历器生成函数就是它的values方法。

Set 结构的实例还可以使用forEach()的方法遍历

let set=new Set([1,4,9]);
set.forEach((value, key)=> console.log(key +' : '+ value))
//1 : 1
//4 : 4
//9 : 9

//写下面这些是为了后面可以更好的理解
const set = new Set([
            ['foo', 1],
            ['bar', 2]
        ]);
for (let item of set.keys()) {
            console.log(item);
        }
//["foo",1]
//["bar",2]
//通过解构赋值来从set.keys()获取k和v
for (let [k, v] of set.keys()) {
            console.log(k, v);
        }
//foo 1
//bar 2
//第一个参数[]是取的是set的键值也就是["foo",1]，其实键也是一样的值
set.forEach(
            ([key, value]) => console.log(key, value)
        )
//foo 1
//bar 2
//这里输出的value和key实际上都是相同的值
set.forEach(
            (value, key) => console.log(value, key)
        )

上面代码说明，forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致，依次为键值、键名、集合本身（上例省略了该参数）。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。

Map

Map是se6新增的数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。这就很好的弥补了Object 结构只能“字符串—值”对应的缺点，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

上面代码使用 Map 结构的set方法，将对象o当作m的一个键，然后又使用get方法读取这个键，接着使用delete方法删除了这个键。

上面的例子展示了如何向 Map 添加成员。作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。具体如下：

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

是不是感觉有点懵了，为什么这样的二维数组会在新建 Map 实例时，就指定了两个键name和title。

实际上，Map构造函数接受数组作为参数，实际上执行的是下面的算法。

const items = [
  ['name', '张三'],
  ['title', 'Author']
];
const map = new Map();
items.forEach(
  ([key, value]) => map.set(key, value)
);

具体来说，就是通过forEach()方法来获取items中的每一个数组项，如：[‘name’, ‘张三’]，然后将这个数组项解构赋值给[key,value]，也就是说，此时key已经为’name’,value已经为’张三’，之后再通过set()方法，将key作为map的一个键，value为key的键值。

事实上，不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构（详见《Iterator》一章）都可以当作Map构造函数的参数。这就是说，Set和Map都可以用来生成新的 Map。

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1
const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

这里可能会有点想不通为什么可以这样来生成新的 Map

其实，如果上面的都理解的话，就比较好明白：

实际上，还是通过xxx.forEach(([key, value]) => yyy.set(key, value));这种方式（底层做的）来生成的，只要能用这种方法来遍历，都能生成新的Map。

如果对同一个键多次赋值，后面的值将覆盖前面的值。

const map =newMap();
map.set(1,'aaa');
map.get(1)//"aaa"
map.set(1,'bbb');
map.get(1)// "bbb"

注意：Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。

//例1
const map =newMap();
const k1 =['a'];
const k2 =['a'];
map
.set(k1,111)
.set(k2,222);
map.get(k1)// 111
map.get(k2)// 222
//例2
const map =newMap();
map.set(['a'],555);
map.get(['a'])// undefined

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

Map结构的属性和操作方法

size属性

size属性返回Map结构的成员总数

Map.prototype.set(key, value)

set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。set方法返回的是当前的Map对象，因此可以采用链式写法。即let map = new Map().set(1,'a').set(2,'b').set(3,'c');

Map.prototype.get(key)

get方法读取key对应的键值，如果找不到key，返回undefined。

Map.prototype.has(key)

has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

Map.prototype.delete(key)

delete方法删除某个键，返回true。如果删除失败，返回false。

Map.prototype.clear()

clear方法清除所有成员，没有返回值。

遍历方法

• Map.prototype.keys()：返回键名的遍历器。
• Map.prototype.values()：返回键值的遍历器。
• Map.prototype.entries()：返回所有成员的遍历器。
• Map.prototype.forEach()：遍历 Map 的所有成员。

注意：Map 的遍历顺序就是插入顺序。

const map =new Map([
['F','no'],
['T','yes'],
]);
console.log(map);
//Map(2){"F" => "no","T" => "yes"}
for(let key of map.keys()){
  console.log(key);
}
// "F"
// "T"
for(let value of map.values()){
  console.log(value);
}
// "no"
// "yes"
for(let item of map.entries()){
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for(let [key, value] of map.entries()){
  console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for(let [key, value] of map){
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

上面代码最后的那个例子，表示 Map 结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。

此外，Map 还有一个forEach方法，与数组的forEach方法类似，也可以实现遍历。

map.forEach(function(value, key, map){
  console.log("Key: %s, Value: %s", key, value);
});
//Key:F,Value:no
//Key:T,Value:yes

如果想学的更加深入，推荐去看阮一峰的教程
https://www.bookstack.cn/read/es6-3rd/spilt.3.docs-set-map.md