Als ich ES6 lernte, wusste ich nicht, was ihre Anwendungsszenarien sind. Ich dachte nur, dass sie oft in der Array-Deduplizierung und Datenspeicherung verwendet werden Set ist eine Datenstruktur, die als Menge bezeichnet wird, und Map ist eine Datenstruktur, die als Wörterbuch bezeichnet wird. SetMapDieser Artikel ist in gitthub enthalten: github.com/Michael-lzg...
Set
selbst ist ein Konstruktor, der zum Generieren von Daten verwendet wird Struktur. Set Die Funktion kann ein Array (oder eine andere Datenstruktur mit iterierbarer Schnittstelle) als Parameter für die Initialisierung akzeptieren. Set Mit Objekten können Sie jede Art von Wert speichern, unabhängig davon, ob es sich um einen Grundwert oder eine Objektreferenz handelt. Es ähnelt einem Array, aber die Werte der Mitglieder sind eindeutig und es gibt keine doppelten Werte. Set
const s = new Set()
[2, 3, 5, 4, 5, 2, 2].forEach((x) => s.add(x))
for (let i of s) {
console.log(i)
}
// 2 3 5 4SetSpezielle Werte im Set Der im Objekt gespeicherte Wert ist immer eindeutig, daher muss festgestellt werden, ob die beiden Werte gleich sind. Es gibt mehrere Sonderwerte, die eine besondere Behandlung erfordern: Set
undefinedundefined
NaN gelten NaN und Set als gleich und nur eines davon sie können nicht wiederholt werden. NaNNaN
sizeconst items = new Set([1, 2, 3, 4, 5, 5, 5, 5]) items.size // 5
add(value)Set
delete(value) zurückgegeben. truefalse
has(value)Set
clear()s.add(1).add(2).add(2) // 注意2被加入了两次 s.size // 2 s.has(1) // true s.has(2) // true s.has(3) // false s.delete(2) s.has(2) // false
keys()values()entries()forEach()-Methode genauso wie die Set-Methode. keys
let set = new Set(['red', 'green', 'blue'])
for (let item of set.keys()) {
console.log(item)
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item)
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item)
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]valuesArray- und Set-Vergleich
Arrays indexOf-Methode Sethas
SetSet nur delete passieren kann. Ersteres ist hinsichtlich der Benutzerfreundlichkeit besser. Die vielen neuen Methoden Array, splice, Array (Sie können jedoch beide verwenden, um sie gegenseitig zu verwenden) mapfiltersomeAnwendung von SeteverySet1 Die const items = new Set([1, 2, 3, 4, 5]) const array = Array.from(items)
// 去除数组的重复成员 ;[...new Set(array)] Array.from(new Set(array))
Array.from3. Die Methoden Set und von Arrays können auch indirekt für
let set = new Set([1, 2, 3])
set = new Set([...set].map((x) => x * 2))
// 返回Set结构：{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5])
set = new Set([...set].filter((x) => x % 2 == 0))
// 返回Set结构：{2, 4} implementiert werden die Vereinigungsmengemap, die Schnittmengefilter und die DifferenzmengeSet
let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
// 并集
let union = new Set([...a, ...b])
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter((x) => b.has(x)))
// set {2, 3}
// 差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1}(Union)(Intersect) ähneln in ihrer Struktur
sind Arrays und arrayähnliche Objekte. Wenn die Methode WeakSet mit anderen Parametern als Arrays und arrayähnlichen Objekten aufgerufen wird, wird ein Fehler ausgegeben. Set
const b = [1, 2, [1, 2]] new WeakSet(b) // Uncaught TypeError: Invalid value used in weak set
add()
WeakSet-Attribut. for-of
WeakSetsize
. Das Aufkommen von Map ermöglicht die Verwendung verschiedener Arten von Werten als Schlüssel. key-value bietet eine „Wert-Wert“-Korrespondenz. key
Object 对象有原型， 也就是说他有默认的 key 值在对象上面， 除非我们使用 Object.create(null)创建一个没有原型的对象；Object 对象中， 只能把 String 和 Symbol 作为 key 值， 但是在 Map 中，key 值可以是任何基本类型(String, Number, Boolean, undefined, NaN….)，或者对象(Map, Set, Object, Function , Symbol , null….);Map 中的 size 属性， 可以很方便地获取到 Map 长度， 要获取 Object 的长度， 你只能手动计算const map = new Map()
map.set('foo', ture)
map.set('bar', false)
map.size // 2set(key, val): 向 Map 中添加新元素get(key): 通过键值查找特定的数值并返回has(key): 判断 Map 对象中是否有 Key 所对应的值，有返回 true，否则返回 false
delete(key): 通过键值从 Map 中移除对应的数据clear(): 将这个 Map 中的所有元素删除const m = new Map()
const o = { p: 'Hello World' }
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // falsekeys()：返回键名的遍历器values()：返回键值的遍历器entries()：返回键值对的遍历器forEach()：使用回调函数遍历每个成员const map = new Map([
['a', 1],
['b', 2],
])
for (let key of map.keys()) {
console.log(key)
}
// "a"
// "b"
for (let value of map.values()) {
console.log(value)
}
// 1
// 2
for (let item of map.entries()) {
console.log(item)
}
// ["a", 1]
// ["b", 2]
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value)
}
// "a" 1
// "b" 2
// for...of...遍历map等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value)
}
// "a" 1
// "b" 2Map 转为数组
let map = new Map() let arr = [...map]
数组转为 Map
Map: map = new Map(arr)
Map 转为对象
let obj = {}
for (let [k, v] of map) {
obj[k] = v
}对象转为 Map
for( let k of Object.keys(obj)）{
map.set(k,obj[k])
}在一些 Admin 项目中我们通常都对个人信息进行展示，比如将如下信息展示到页面上。传统方法如下。
<p class="info-item">
<span>姓名</span>
<span>{{info.name}}</span>
</p>
<p class="info-item">
<span>年龄</span>
<span>{{info.age}}</span>
</p>
<p class="info-item">
<span>性别</span>
<span>{{info.sex}}</span>
</p>
<p class="info-item">
<span>手机号</span>
<span>{{info.phone}}</span>
</p>
<p class="info-item">
<span>家庭住址</span>
<span>{{info.address}}</span>
</p>
<p class="info-item">
<span>家庭住址</span>
<span>{{info.duty}}</span>
</p>js 代码
mounted() {
this.info = {
name: 'jack',
sex: '男',
age: '28',
phone: '13888888888',
address: '广东省广州市',
duty: '总经理'
}
}我们通过 Map 来改造，将我们需要显示的 label 和 value 存到我们的 Map 后渲染到页面，这样减少了大量的html代码
<template>
<p id="app">
<p class="info-item" v-for="[label, value] in infoMap" :key="value">
<span>{{label}}</span>
<span>{{value}}</span>
</p>
</p>
</template>js 代码
data: () => ({
info: {},
infoMap: {}
}),
mounted () {
this.info = {
name: 'jack',
sex: '男',
age: '28',
phone: '13888888888',
address: '广东省广州市',
duty: '总经理'
}
const mapKeys = ['姓名', '性别', '年龄', '电话', '家庭地址', '身份']
const result = new Map()
let i = 0
for (const key in this.info) {
result.set(mapKeys[i], this.info[key])
i++
}
this.infoMap = result
}WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。
null 除外），不接受其他类型的值作为键名get、set、has、delete
Set
[value, value]，键值与键名是一致的（或者说只有键值，没有键名）add、delete、has、clear
WeakSet
DOM 节点，不容易造成内存泄漏add、delete、has
Map
set、get、has、delete、clear
WeakMap
null 除外），不接受其他类型的值作为键名不能遍历，方法有 get、set、has、delete
推荐教程：《JS教程》
Das obige ist der detaillierte Inhalt vonMachen Sie sich mit ES6 Set, WeakSet, Map und WeakMap vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
