ES6中的Map

飛鷹3995發表於2021-06-20

今天小編和大家一起探討一下引用型別中的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

 

相關文章