recherche

Maison >interface Web >js tutoriel >Vous faire comprendre ES6 Set, WeakSet, Map et WeakMap

Vous faire comprendre ES6 Set, WeakSet, Map et WeakMap

hzc
hzcavant
2020-06-20 09:43:342489parcourir

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

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 valeurs​​sont é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

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

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

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)

2. Déduplication de tableau

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

Array.from(new Set(array))

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}

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}

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
  • 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 的区别

  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教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html es6 数据类型 String Boolean Array Object NULL for foreach 构造函数 Filter 回调函数 union 循环 数据结构 接口 map delete JS number undefined symbol function 对象 dom github
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Canvas implémente un effet de connexion dynamique de particules (avec code)Article suivant：Canvas implémente un effet de connexion dynamique de particules (avec code)

Articles Liés

Voir plus