前端入门学习笔记（二十一）JavaScript入门（四）Map和Set，iterable

Map

Map是一组键值对的结构，具有极快的查找速度。
前面为键，后面为对应的值，键、值可以为任意类型

var m = new Map([['Michael', 95], ['Bob', 75], [19, 85]]);

m.get('Michael'); // 95
m.get(19); // 85

一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Map属性与操作方法

属性方法	作用
size属性	size属性返回 Map 结构的成员总数。
set(key, value)	set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。 set方法返回的是当前的Map对象，因此可以采用链式写法。
get(key)	get方法读取key对应的键值，如果找不到key，返回undefined。
has(key)	has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
delete(key)	delete方法删除某个键，返回true。如果删除失败，返回false。
clear()	clear方法清除所有成员，没有返回值。

在使用set和Map（）的时候需要注意有特定的格式，否则可能无法添加键值。
比如Map里面需要 [ ] 来添加键值，
而set中使用 [ ] 会把整个 [ ] 的内容（包括 [ ] ）当成一个键/值

var m = new Map([['yello',1],['red', 2]]); // newMap
m.set('blue',233,'Adam', 67);//'Adam', 67不会添加
m.has('Adam'); // 是否存在key 'Adam': false
m.size;//3
m.get('blue'); // 233
m.delete('blue'); // 删除key 'blue'
m.get('blue'); // undefined
m.clear();//清空

Map遍历方法

• for of

• keys()：返回键名的遍历器。

var m = new Map([['yellow',1],['red', 2]]); // newMap
for(var key of m.keys()){
    console.log(key + "," + m.get(key));//yellow,1 red,2
}

• values()：返回键值的遍历器。

for (var key of m.values()){
   console.log(key);//1 2
}

• entries()：返回所有成员的遍历器。

console.log(...m.entries());//[ 'yellow', 1 ], [ 'red', 2 ]

• forEach()：遍历 Map 的所有成员。

m.forEach((k,v) => {
    console.log(k + ',' + v);//1,yellow 2,red
})

• for of

for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);//yellow=1 red=2
}

---

Set

Set是一种没有重复的值的数据结构

var s = new Set([1, 2, 3, 3, '3']);
console.log(s); // Set {1, 2, 3, "3"}

可以看出3被去除了（3和 ‘3’ 不是同一种数据类型，所以依然存在）

因为set没有重复的值这一特性，可以用来实现数组去重

var arr = [1,1,2,2,3,3];
var s = new Set(arr);
s.size;//3
console.log([s]);//1,2,3;

Set属性与操作方法（与Map相似）

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

Set的遍历

• keys()：返回键名的遍历器
• values()：返回键值的遍历器），且因为Set没有键值之分，所以keys（）与values（）方法相同
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员
• for of

用法与Map遍历方法相同

---

iterable

ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。
具有iterable类型的集合可以通过新的for … of循环来遍历。

for of 遍历演示如下

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

注意，forEach()方法是ES5.1标准引入的，你需要测试浏览器是否支持。
forEach()方法演示如下

//Map
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

//Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);//A C C
});

//array
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});