乐趣区

关于javascript:ES6中的Map

jiezi

明天小编和大家一起探讨一下援用类型中的 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
退出移动版