Maison > Article > interface Web > Vous faire comprendre ES6 Set, WeakSet, Map et WeakMap
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
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
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 :
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. size
: Renvoie le nombre d'éléments contenus dans l'ensembleconst items = new Set([1, 2, 3, 4, 5, 5, 5, 5]) items.size // 5
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
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"]
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) 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
sont de structure similaire à Set
et sont également des ensembles de valeurs non répétitives. Les membres de
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
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
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".
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 // 2
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]) }
在一些 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教程》
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!