suchen

Heim  >  Artikel  >  Web-Frontend  >  Machen Sie sich mit ES6 Set, WeakSet, Map und WeakMap vertraut

Machen Sie sich mit ES6 Set, WeakSet, Map und WeakMap vertraut

hzc
hzcnach vorne
2020-06-20 09:43:342444Durchsuche

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 4
SetSpezielle 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

+0 und -0 sind beim Speichern identisch, um die Eindeutigkeit zu bestimmen, sodass es keine Wiederholung von
  • und gibt
  • ist identisch, daher gibt es keine Wiederholung von undefinedundefined
    • und
  • sind nicht identisch, aber in NaN gelten NaN und Set als gleich und nur eines davon sie können nicht wiederholt werden. NaNNaN
    • Attribute des Sets:

    : Gibt die Anzahl der im Set enthaltenen Elemente zurück
  • size
    const items = new Set([1, 2, 3, 4, 5, 5, 5, 5])
items.size // 5
    • Methoden von Set-Instanzobjekten

    : Fügen Sie einen bestimmten Wert hinzu und geben Sie die
  • -Struktur selbst zurück (kann in einer Kette aufgerufen werden). add(value)Set
    • : Löschen Sie einen bestimmten Wert. Wenn der Löschvorgang erfolgreich ist, wird
  • zurückgegeben, andernfalls wird delete(value) zurückgegeben. truefalse
    • : Gibt einen booleschen Wert zurück, der angibt, ob der Wert ein Mitglied von
  • ist. has(value)Set
    • : Alle Mitglieder löschen, kein Rückgabewert.
  • 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
    • Traversal-Methode

    : Gibt den Traverser der Schlüsselnamen zurück.
  • keys()
    • : Gibt einen Traverser von Schlüsselwerten zurück.
  • values()
    • : Gibt einen Traverser von Schlüssel-Wert-Paaren zurück.
  • entries()
    • : Verwenden Sie die Rückruffunktion, um jedes Mitglied zu durchlaufen.
  • forEach()
    • Da die
-Struktur keine Schlüsselnamen, sondern nur Schlüsselwerte hat (oder Schlüsselnamen und Schlüsselwerte denselben Wert haben), verhält sich die

-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

    s
  • -Methode ist weniger effizient als Arrays indexOf-Methode Sethas
    • enthält keine doppelten Werte (Sie können diese Funktion verwenden, um ein Array zu deduplizieren)
  • Set
    • löscht einen Wert über die Methode
  • , während Set nur delete passieren kann. Ersteres ist hinsichtlich der Benutzerfreundlichkeit besser. Die vielen neuen Methoden Array, splice,
    • ,
  • usw. sind nicht verfügbar Array (Sie können jedoch beide verwenden, um sie gegenseitig zu verwenden) mapfiltersomeAnwendung von SeteverySet1 Die
    • -Methode kann die
-Struktur in ein Array konvertieren . 

const items = new Set([1, 2, 3, 4, 5])
const array = Array.from(items)

2. Array-Deduplizierung

// 去除数组的重复成员
;[...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}
weakSet

(Union)(Intersect) ähneln in ihrer Struktur

und sind ebenfalls Mengen sich nicht wiederholender Werte. Die Mitglieder von

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
  • Mitglieder sind schwache Referenzen und können vom Garbage-Collection-Mechanismus recycelt werden. Sie können zum Speichern von DOM-Knoten verwendet werden und sind nicht anfällig für Speicherverluste. add()
ist nicht iterierbar und kann daher nicht in Schleifen wie
    verwendet werden.
  • hat kein WeakSet-Attribut. for-of
  • MapWeakSetsize
    • speichert Schlüssel-Wert-Paare in der Form
, wobei

und

beliebigen Typs, also Objekten, sein können Verfügbar als

. Das Aufkommen von Map ermöglicht die Verwendung verschiedener Arten von Werten als Schlüssel. key-value bietet eine „Wert-Wert“-Korrespondenz. key

Map 和 Object 的区别

  1. Object 对象有原型， 也就是说他有默认的 key 值在对象上面， 除非我们使用 Object.create(null)创建一个没有原型的对象；
  2. 在 Object 对象中， 只能把 String 和 Symbol 作为 key 值， 但是在 Map 中，key 值可以是任何基本类型(String, Number, Boolean, undefined, NaN….)，或者对象(Map, Set, Object, Function , Symbol , null….);
  3. 通过 Map 中的 size 属性， 可以很方便地获取到 Map 长度， 要获取 Object 的长度， 你只能手动计算

Map 的属性

  • size: 返回集合所包含元素的数量
const map = new Map()
map.set('foo', ture)
map.set('bar', false)
map.size // 2

Map 对象的方法

  • set(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) // false

遍历方法

  • keys()：返回键名的遍历器
  • 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" 2

数据类型转化

Map 转为数组

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])
}

Map的应用

在一些 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

WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。

  • 只接受对象作为键名（null 除外），不接受其他类型的值作为键名
  • 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
  • 不能遍历，方法有 get、set、has、delete

总结

Set

  • 是一种叫做集合的数据结构(ES6新增的)
  • 成员唯一、无序且不重复
  • [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!

html es6 数据类型 String Boolean Array Object NULL for foreach 构造函数 Filter 回调函数 union 循环 数据结构 接口 map delete JS number undefined symbol function 对象 dom github
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Canvas implementiert einen dynamischen Partikelverbindungseffekt (mit Code)Nächster Artikel：Canvas implementiert einen dynamischen Partikelverbindungseffekt (mit Code)

In Verbindung stehende Artikel

Mehr sehen