Map 和 Set 的遍历方式

Map

简单使用

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key  +"  "+ value);
}
// 0  zero
// 1  one

var b=new Map([['a',1],['b',2]])
b.forEach((item,index) => {console.log(item,index)})
//1 "a"
//2 "b"

Map中key为对象时的取值小提示

var o={a:1};
var myMap=new Map([[{a:1},1],['b',2]]);
myMap.set({a:1},100);
myMap.set(o,"o"); 
console.log(myMap.get({a:1}))//undefined  这种取值方式，取不到值
console.log(myMap.get(o))// 'o'  正确的取值方式
console.log(myMap);//{{…} => 1, "b" => 2, {…} => 100, {…} => "o"}
//展开后
// [[{a:1},1],['b',2],[a:1,100],[{a:1},"o"]]

上方的myMap打印出来是

[[{a:1},1],['b',2],[a:1,100],[{a:1},"o"]]

Map小结：

• 我们看到有三个Key是{a:1}的键。
• 只有key是通过set一个变量对象时，才能正确取到key是对象上的value

Map数数组的关系

var kvArray = [["key1", "value1"], ["key2", "value2"]];

// 使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象
var myMap = new Map(kvArray);

myMap.get("key1"); // 返回值为 "value1"

// 使用Array.from函数可以将一个Map对象转换成一个二维键值对数组
console.log(Array.from(myMap)); // 输出和kvArray相同的数组

// 或者在键或者值的迭代器上使用Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

Set

简单使用 new Set([iterable]);

var mySet = new Set([1, 2, 3, 4, 5]);
console.log(mySet.has(1));

mySet.forEach(function(item,index,obj) {
  console.log(item,index,obj);
});
// 1 1 Set(5) {1, 2, 3, 4, 5}
// 2 2 Set(5) {1, 2, 3, 4, 5}
// 3 3 Set(5) {1, 2, 3, 4, 5}
// 4 4 Set(5) {1, 2, 3, 4, 5}
// 5 5 Set(5) {1, 2, 3, 4, 5}

for(i of mySet){console.log(i)}//也是可以的

通过...来转数组

var mySet2 = new Set([1, 2, 3, 4]);
mySet2.size; // 4
[...mySet2]; // [1, 2, 3, 4]

应用 - 数组去重

转为Set 再通过[...set] 转回数组

const numbers = [20,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5,20]
console.log([...new Set(numbers)]) 
// [20, 3, 4, 2, 5, 6, 7, 32]

遍历 Map 和 Set

• 都可用forEach来遍历
• 都可用for of 来遍历
• 都不可用map来遍历

类型判断

Object.prototype.toString.call(new Map([['a',1],['b',2]]) )
// "[object Map]"

Object.prototype.toString.call(new Set([[1, 2, 3, 4, 5]]) )
// "[object Set]"