Vous faire comprendre ES6 Set, WeakSet, Map et WeakMap-js tutoriel-php.cn

Quand j'apprenais ES6 auparavant, j'ai vu Set et Map Je ne savais pas quels étaient leurs scénarios d'application, je pensais juste qu'ils étaient souvent utilisés dans la déduplication de baies et le stockage de données. Set est une structure de données appelée ensemble, et Map est une structure de données appelée dictionnaire.

Cet article est inclus dans gitthub : github.com/Michael-lzg...

Set

Set lui-même est un constructeur utilisé pour générer des Set données structure. Set La fonction peut accepter un tableau (ou une autre structure de données avec une interface itérable) comme paramètre d'initialisation. Set Les objets permettent de stocker tout type de valeur, qu'il s'agisse d'une valeur primitive ou d'une référence d'objet. C'est similaire à un tableau, mais les valeurs des membres sont uniques et il n'y a pas de valeurs en double.

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

Copier après la connexion

Valeurs spéciales dans Set

Set La valeur stockée dans l'objet est toujours unique, il est donc nécessaire de déterminer si les deux valeurssont égales. Il existe plusieurs valeurs spéciales qui nécessitent un traitement spécial :

+0 et -0 sont identiques lors du stockage pour déterminer l'unicité, il n'y a donc pas de répétition de
undefined et undefined est identique, donc il n'y a pas de répétition de
NaN et NaN ne sont pas identiques, mais dans Set, NaN et NaN sont considérés comme égaux, et un seul des ils peuvent exister.

Attributs de Set :

size : Renvoie le nombre d'éléments contenus dans l'ensemble

const items = new Set([1, 2, 3, 4, 5, 5, 5, 5])
items.size // 5

Copier après la connexion

Méthodes des objets d'instance Set

add(value) : Ajoutez une certaine valeur et renvoyez la structure Set elle-même (peut être appelée dans une chaîne).
delete(value) : Supprimez une certaine valeur. Si la suppression est réussie, true sera renvoyé, sinon false sera renvoyé.
has(value) : renvoie une valeur booléenne indiquant si la valeur est membre de Set.
clear() : Effacer tous les membres, aucune valeur de retour.

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

Copier après la connexion

Méthode de parcours

keys() : Renvoie le traverseur des noms de clés.
values() : Renvoie un traverseur de valeurs clés.
entries() : renvoie un traverseur de paires clé-valeur.
forEach() : Utilisez la fonction de rappel pour parcourir chaque membre.

Puisque la structure Set n'a pas de nom de clé, seulement une valeur de clé (ou le nom de clé et la valeur de clé sont la même valeur), la méthode keys se comporte exactement de la même manière que la méthode values méthode.

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"]

Copier après la connexion

Comparaison de tableaux et d'ensembles

Array La méthode indexOf de Set est moins efficace que la méthode has de
Set ne contient pas de valeurs en double (vous pouvez utiliser cette fonctionnalité pour dédupliquer un tableau)
Set supprime une valeur via la méthode delete, tandis que Array ne peut passer que par splice. La première est meilleure en termes de facilité d'utilisation des deux. Les nombreuses nouvelles méthodes de
Array map, filter, some, every, etc. ne sont pas disponibles dans. Set (mais vous pouvez utiliser les deux pour les convertir l'un l'autre)

Application de Set

1 La méthode Array.from peut convertir la structure Set en un tableau. .

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

Copier après la connexion

2. Déduplication de tableau

// 去除数组的重复成员
;[...new Set(array)]

Array.from(new Set(array))

Copier après la connexion

3 Les méthodes map et filter des tableaux peuvent également être utilisées indirectement pour Set

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}

Copier après la connexion

4. l'union Set(Union), l'intersection(Intersect) et la différence set

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}

Copier après la connexion

weakSet

WeakSet sont de structure similaire à Set et sont également des ensembles de valeurs non répétitives. Les membres de

sont des tableaux et des objets de type tableau. Si la méthode add() est appelée avec des paramètres autres que des tableaux et des objets de type tableau, une erreur sera générée. Les membres

const b = [1, 2, [1, 2]]
new WeakSet(b) // Uncaught TypeError: Invalid value used in weak set

Copier après la connexion

sont des références faibles et peuvent être recyclés par le mécanisme de récupération de place. Ils peuvent être utilisés pour sauvegarder les nœuds DOM et ne sont pas sujets aux fuites de mémoire.
WeakSet n'est pas itérable, il ne peut donc pas être utilisé dans des boucles telles que for-of.
WeakSet n'a pas d'attribut size.

Map

Map stocke les paires clé-valeur sous la forme de key-value, où key et value peuvent être de n'importe quel type, c'est-à-dire des objets Disponible en key. L'émergence de Map permet d'utiliser différents types de valeurs comme clés. Map fournit une correspondance "valeur-valeur".

Map 和 Object 的区别

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 的长度，你只能手动计算

Map 的属性

size: 返回集合所包含元素的数量

const map = new Map()
map.set('foo', ture)
map.set('bar', false)
map.size // 2

Copier après la connexion

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

Copier après la connexion

遍历方法

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

Copier après la connexion

数据类型转化

Map 转为数组

let map = new Map()
let arr = [...map]

Copier après la connexion

数组转为 Map

Map: map = new Map(arr)

Copier après la connexion

Map 转为对象

let obj = {}
for (let [k, v] of map) {
  obj[k] = v
}

Copier après la connexion

对象转为 Map

for( let k of Object.keys(obj)）{
  map.set(k,obj[k])
}

Copier après la connexion

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>

Copier après la connexion

js 代码

mounted() {
  this.info = {
    name: 'jack',
    sex: '男',
    age: '28',
    phone: '13888888888',
    address: '广东省广州市',
    duty: '总经理'
  }
}

Copier après la connexion

我们通过 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>

Copier après la connexion

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
}

Copier après la connexion