ES6中的Map
今天小編和大家一起探討一下引用類型中的map，在其中會有一些map與數組聯合應用，還有和map類似的weakmap類型的說明，這篇文章同時也增加了一些操作數組的辦法和實際應用。大家也可以關注我的微信公眾號，蝸牛全棧。
一、map的聲明
let s = new Set([1,2,3]) console.log(s) // Set(3){1,2,3}
// map中的數據不會出現重複的情況，如果重複，會將重複的元素去掉。可以應用這一特性，對數組進行去重等處理 let s = new Set([1,2,3,1]) console.log(s) // Set(3){1,2,3}
二、向map中添加元素：使用add方法
let s = new Set([1,2,3]) s.add("school") console.log(s) // Set(4){1,2,3,"school"}
// 可以通過鏈式添加，將元素添加到map中 let s = new Set([1,2,3]) s.add("school").add("bus") console.log(s) // Set(5){1,2,3,"school","bus"}
三、刪除map中的元素：使用delete方法
let s = new Set([1,2,3]) s.delete(2) console.log(s) // Set(2){1,3}
四、清空map內的全部元素：調用clear方法
let s = new Set([1,2,3]) s.clear() console.log(s) // Set(0){}
五、判斷map中是否含有某個元素：調用has方法
let s = new Set([1,2,3]) console.log(s.has(2)) // true
六、獲取map中元素個數：調用size
let s = new Set([1,2,3]) console.log(s.size) // 3
七、map的遍歷
let s = new Set([1,2,3]) s.forEach(item => console.log(item)) // 1 2 3 for(let item of s){ console.log(item) // 1 2 3 } for(let item of s.keys()){ console.log(item) // 1 2 3 } for(let item of s.values()){ console.log(item) // 1 2 3 } // 對於map，key和value是一樣的 for(let item of s.entries()){ console.log(item) // [1,1] [2,2] [3,3] }
八、實際應用
1、數組去重
let arr = [1,2,3,3,3,2,1] let s = new Set(arr) console.log(s) // Set(3){1,2,3} console.log([...s]) // [1,2,3] console.log(Array.from(s)) // [1,2,3]
2、數組合併後去重
let arr1 = [1,2,3,4] let arr2 = [2,3,4,5,6] let s = new Set([...arr1,...arr2]) console.log(s) // Set(6){1,2,3,4,5,6} console.log([...s]) // [1,2,3,4,5,6] console.log(Array.from(s)) // [1,2,3,4,5,6]
3、求兩個數組的交集
let arr1 = [1,2,3,4] let arr2 = [2,3,4,5,6] let s1 = new Set(arr1) let s2 = new Set(arr2) let result = new Set(arr1.filter((item) => s2.has(item))) console.log(result) // Set(3){2,3,4}
4、求兩個數組差集
let arr1 = [1,2,3,4] let arr2 = [2,3,4,5,6] let s1 = new Set(arr1) let s2 = new Set(arr2) let s3 = new Set(arr1.filter((item) => !s2.has(item))) let s4 = new Set(arr2.filter((item) => !s1.has(item))) console.log(s3) // Map(1){1} console.log(s4) // Map(1){5,6} console.log([...s3,...s4]) // [1,5,6]
九、WeakMap：裡面只能存放Object，不能存放其他數據類型
let ws = new WeakSet() // ws.add(1) // 報錯:因為1不是Object類型，不能添加到WeakMap中 ws.add({ name:"lilei" }) ws.add({ age:12 }) console.log(ws) // WeakSet{{...},{...}}
1、刪除對象
let ws = new WeakSet() // ws.add(1) // 報錯：Invalid value used in weak set ws.add({ name:"lilei" }) ws.add({ age:12 }) ws.delete({ name:"lilei" }) console.log(ws) // WeakSet{{...},{...}} 刪除之後沒有生效，因為對象是引用數據類型，添加對象的地址和刪除元素的地址不一致，導致不能刪除
let ws = new WeakSet() const obj1 = {name:"lilei"} const obj2 = {age:12} ws.add(obj1) ws.add(obj2) console.log(ws) // WeakSet{{...},{...}} ws.delete(obj1) console.log(ws) // WeakSet{{...}} // 已經刪除了{name:"lilei"}內容，主要就是因為對象屬於引用類型，直接在delete寫對象與前一個對象在堆記憶體中指向的不是同一個地址 console.log(ws.has(obj2)) // true 判斷內部是否含有obj2對象，與map相同，使用has函數
2、循環遍歷：js中不能對WeakMap類型數據進行循環遍歷，這個與垃圾回收（GC）有關，具體機制小編還不是很清楚，在今後的文章中會補上這一課。
let ws = new WeakSet() const obj1 = {name:"lilei"} const obj2 = {age:12} ws.add(obj1) ws.add(obj2) ws.forEach(item => console.log(item)) // 報錯：ws.forEach is not a function
