Maison  >  Article  >  interface Web  >  Quelles sont les nouvelles structures de données es6 ?

Quelles sont les nouvelles structures de données es6 ?

青灯夜游
青灯夜游original
2022-04-15 19:26:002278parcourir

Les nouvelles structures sont : 1. Symbol, qui représente une valeur unique et est une structure de fonction ; 2. Set, qui fait référence à une structure "set", similaire à un tableau, permettant le stockage de données non ordonnées et non répétables. ; 3. WeakSet, Semblable à Set, les données internes ne peuvent pas avoir de valeurs en double ; 4. Map fait référence à une structure de « dictionnaire » qui peut stocker les relations de mappage.

Quelles sont les nouvelles structures de données es6 ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Nouvelle structure de données ES6

1. Symbol

Symbol est l'un des nouveaux types de données de base dans ES6. Chaque valeur Symbol renvoyée par la fonction Symbol est unique. La valeur symbol sert d'identifiant de l'attribut de l'objet et a son seul objectif. SymbolES6中新增的一个基本数据类型之一,它是一个函数。每一个从Symbol函数返回的Symbol值都是独一无二的,symbol值作为对象属性的标识符,也是唯一的用途的。

const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2); // false

symbol作为key

第一种方式,直接在对象的字面量中添加。

// symbol作为key
const obj = {
  [s1]:'abc',
  [s2]:'cc',
}

第二种方式,通过添加数组方式添加。

// 需要用数组方式来获取,不能通过点语法,否则会获取到字符串key
console.log(obj[s1]);

第三种方式,通过对象中的defineProperty方法添加。

const s4=Symbol()
Object.defineProperty(obj,s4,{
  configurable:true,
  enumerable:true,
  writable:true,
  value:'ff'
})

通过symbol获取对应的值

需要用数组方式来获取,不能通过点语法,否则会获取到字符串key。

console.log(obj[s1]);

symbol不能被隐式转换成string类型。

注意:Symbol函数中的参数是symbol描述符,这是在ES10新增的特性

let Sym = Symbol("Sym")
alert(Sym)  // TypeError: Cannot convert a Symbol value to a string

我们不能直接alert一个symbol对象,但是我们可以通过toString的方式或者.description来获取symbol对象的描述符。

let sym = Symbol('a')
console.log(sym.description); // 'a'

遍历symbol

在使用for遍历、object.keys中是获取不到symbol健的,对此object还提供了getOwnPropertySymbols方法,用于获取对象中所有symbol的key。

const sKeys=(Object.getOwnPropertySymbols(obj));
for(const skey of sKeys){
  console.log(obj[skey]);
}

全局symbol对象注册

有时,我们可能需要多个symbol的值是一致的,我们可以通过symbol提供的静态方法for方法传入一样的描述符来使它们的值一致。

Symbol.for

该方法会在使用给定键搜索运行时符号注册表中的现有符号,并在找到时返回它。否则,使用此键在全局符号注册表中创建一个新符号。

const sa=Symbol.for('cc')
const sb=Symbol.for('cc')
console.log(sa===sb); //true

Symbol.keyFor

该方法用于获取全局symbol的描述符。

const key =Symbol.keyFor(sb)
console.log(key); // c

2、Set

Set对象(类似数组)允许你存放任何数据类型,但里面的值不能重复。

const s1 = new Set()
s1.add(10)
s1.add(20)
s1.add(30)
s1.add(40)

console.log(s1) // Set(4) { 10, 20, 30, 40 }

s1.add(20)
console.log(s1) // Set(4) { 10, 20, 30, 40 }

Set常用方法

方法 返回值 说明
size set对象中的数量 返回set对象中的数量
add Set对象 添加元素
delete boolean 删除元素
has boolean Set对象中是否存在这个值
clear 清空Set对象中的值

3、WeakSet

WeakSet是类似Set的另外一种数据结构,内部数据也不能有重复值。

  • 它与Set的区别
    • WeakSet只能存放对象类型,不能存放基本数据类型
    • WeakSet对元素是弱引用

基本使用

const weakSet = new WeakSet();
let obj = {
  name: "_island"
};

weakSet.add(obj);

WeakSet常用方法

symbole comme clé
方法 返回值 说明
add weakset对象 添加元素
delete boolean 删除元素
has boolean weakset
const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:'a',
  [obj2]:'b',
}

console.log(obj3);
// { '[object Object]': 'b' }
🎜La première façon est de l'ajouter directement dans le littéral de l'objet. 🎜
const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const map = new Map();
map.set(obj1, "a");
map.set(obj2, "b");
console.log(map); // Map(2) { { name: '_island' } => 'a', { name: 'QC2125' } => 'b' }

// or
const map2 = new Map([[obj1,'a'],[obj2,'b']])
🎜La deuxième façon est de l'ajouter en ajoutant un tableau. 🎜
map2.forEach((item) => console.log(item));
🎜La troisième façon consiste à l'ajouter via la méthode defineProperty dans l'objet. 🎜
for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}
🎜🎜Obtenez la valeur correspondante via le symbole🎜🎜🎜Elle doit être obtenue en mode tableau, pas via la syntaxe par points, sinon la clé de chaîne sera obtenue. 🎜
const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a
🎜symbol ne peut pas être implicitement converti en type string. 🎜🎜🎜Remarque : Le paramètre de la fonction Symbole est le descripteur de symbole, qui est une nouvelle fonctionnalité dans ES10🎜🎜rrreee🎜Nous ne pouvons pas directement alerter un objet symbole, mais Nous pouvons obtenir le descripteur de l'objet symbol via toString ou .description. 🎜rrreee🎜🎜Symbole de déplacement🎜🎜🎜Lors de l'utilisation de pour le parcours et de object.keys, la clé symbole ne peut pas être obtenue concernant ceobject fournit également la méthode getOwnPropertySymbols, qui est utilisée pour obtenir les clés de tous les symboles de l'objet. 🎜rrreee🎜🎜Enregistrement global des objets symboles🎜🎜🎜Parfois, nous pouvons avoir besoin que les valeurs de plusieurs symbole soient cohérentes. Nous pouvons transmettre la méthode statique fournie par <code>symbol<.> La méthode for</.> passe le même descripteur pour rendre leurs valeurs cohérentes. 🎜🎜🎜Symbol.for🎜🎜🎜Cette méthode recherche dans le registre des symboles d'exécution un symbole existant à l'aide de la clé donnée et le renvoie s'il est trouvé. Sinon, un nouveau symbole est créé dans le registre global des symboles à l'aide de cette clé. 🎜rrreee🎜🎜Symbol.keyFor🎜🎜🎜Cette méthode est utilisée pour obtenir le descripteur du symbole global. 🎜rrreee🎜🎜🎜2, l'objet Set🎜🎜🎜🎜Set (similaire à un tableau) vous permet de stocker n'importe quel type de données, mais les valeurs à l'intérieur ne peuvent pas être répétées. 🎜rrreee🎜🎜Définir les méthodes communes🎜🎜🎜
Méthode Valeur de retour Description
size🎜 setLa quantité dans l'objet défini🎜 Renvoie la quantité dans l'objet défini🎜 🎜
ajouter🎜 Définir un objet 🎜 Ajouter un élément 🎜🎜
supprimer 🎜 booléen🎜 Supprimer l'élément 🎜🎜
a🎜 booléen🎜 Cette valeur existe-t-elle dans l'objet Set ? 🎜🎜
clear🎜 Aucun🎜 Effacer la valeur dans le Set object🎜 🎜🎜🎜🎜🎜🎜3. WeakSet🎜🎜🎜🎜WeakSet est une autre structure de données similaire à Set, et les données internes ne peuvent pas avoir de valeurs en double. . 🎜
  • La différence entre celui-ci et Set
    • WeakSet ne peut stocker que des types d'objets, pas des types de données de base
    • WeakSet est une référence faible à l'élément
🎜🎜Utilisation de base🎜🎜rrreee🎜🎜Méthodes courantes de WeakSet🎜🎜🎜
Méthode Valeur de retour Description
ajouter🎜 weakset objet 🎜 Ajouter un élément 🎜🎜
supprimer🎜 booléen code>🎜<td>Supprimer l'élément 🎜🎜</td> <tr> <td> <code>a🎜 booléen🎜 weakset objet Cette valeur existe-t-elle🎜🎜🎜🎜

关于遍历

WeakSet不能被遍历,因为它只是对对象进行弱引用,如果遍历去获取元素,有可能导致对象不能被GC回收。

所以WeakSet中的对象是不能获取的

4、Map

ES6新增的数据结构,用于存储映射关系。我们知道在JavaScript中对象中是不能用对象来作为key的。(假如我们把对象作为key,其内部会将对象转换为字符串[object object]

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:&#39;a&#39;,
  [obj2]:&#39;b&#39;,
}

console.log(obj3);
// { &#39;[object Object]&#39;: &#39;b&#39; }

Map则可以把对象作为key进行存储,可以通过set方法添加到Map中,也直接通过字面量的方式添加。

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const map = new Map();
map.set(obj1, "a");
map.set(obj2, "b");
console.log(map); // Map(2) { { name: &#39;_island&#39; } => &#39;a&#39;, { name: &#39;QC2125&#39; } => &#39;b&#39; }

// or
const map2 = new Map([[obj1,&#39;a&#39;],[obj2,&#39;b&#39;]])

Map常用方法

方法 返回值 说明
get 获取对应的元素 通过key获取对应元素
size Map对象中的数量 返回Map对象中的数量
set Map对象 添加元素
delete boolean 删除元素
has boolean Set对象中是否存在这个值
clear 清空Set对象中的值

遍历Map

通过foreach语句遍历Map

map2.forEach((item) => console.log(item));

通过for..of遍历Map

for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}

5、WeakMap

Map类似,也是以键值对的形式存在的

  • 和Map的区别
    • WeakMapkey只能使用对象,不接受其他的类型作为key
    • WeakMapkey对对象是弱引用

基本使用

const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a

WeakMap常用方法

方法 返回值 说明
get weakmap对象 获取元素
delete boolean 删除元素
has boolean weaksmap对象中是否存在这个值

关于遍历

WeakSet一样,正因为它是弱引用,WeakMapkey是不可枚举的,如果key可枚举那其列表将会受GC影响。

【相关推荐:javascript视频教程web前端

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn