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]"
複製代碼