Analyse de Set et Map dans ES6 et conversion entre Map et d'autres structures de données

Le contenu de cet article concerne l'analyse de Set et Map dans ES6, et la conversion entre Map et d'autres structures de données. Il a une certaine valeur de référence. J'espère que cela sera utile. vous. aider.

Set d'ES6 :

ES6 fournit une nouvelle structure de données─Set. C'est similaire à un tableau, mais les valeurs des membres sont uniques et il n'y a pas de valeurs en double.
Set lui-même est un constructeur utilisé pour générer la structure de données Set.
Comparaison entre Array et Set
Les deux sont des conteneurs qui stockent plusieurs valeurs. Les deux peuvent être convertis l'un dans l'autre, mais il existe des différences dans les scénarios d'utilisation. Comme suit :
①La méthode indexOf de Array est moins efficace que la méthode has de Set
②Set ne contient pas de valeurs en double (vous pouvez utiliser cette fonctionnalité pour réaliser la déduplication d'un tableau)
③Set supprime un certaine valeur via la méthode delete, et Array ne peut être transmis que via splice. La commodité d'utiliser les deux est que le premier est meilleur
④Array a de nombreuses nouvelles méthodes telles que map, filter, some, each, etc. que Set n'a pas (mais elles peuvent être converties entre elles pour être utilisées)

1. Instance Set Comment fonctionner :

let set = new Set();
set.add(1);
set.add("1");
console.log(set.size); // 2

Vous pouvez utiliser un tableau pour initialiser un Set, et le constructeur Set veillera à ce que ces valeurs ne soient pas utilisées à plusieurs reprises :

let set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(set.size); // 5

add(value) : Ajoute une valeur et renvoie la structure Set elle-même
has(value): Renvoie une valeur booléenne indiquant si la valeur est un membre de l'ensemble

let set = new Set();
set.add(1);
set.add("1");
console.log(set.has(1)); // true
console.log(set.has(6)); // false

delete(value): Supprime une valeur et renvoie une valeur booléenne, indiquant si elle réussit ou non
clear(value ):Effacer tous les membres, aucune valeur de retour

let set = new Set();
set.add(1);
set.add("1");
console.log(set.has(1)); // true
set.delete(1);
console.log(set.has(5)); // false
console.log(set.size); // 1

set.clear();
console.log(set.size); // 0

2 Définir l'opération de traversée

keys():Renvoie le. traverseur du nom de la clé
values(): Renvoie la clé Itérateur des paires de valeurs
entries(): Renvoie l'itérateur des paires clé-valeur
forEach() : Chaque membre

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

forEach()

let set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet) {
    console.log(key + "： " + value);
});
// 输出

// 1 : 1
// 2 : 2

3. Déduplication de tableau ES6(Les questions sur la déduplication de tableaux sont souvent posées lors des entretiens)

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr); // [1, 2, 3]

Collection d'ensembles convertie en tableau Array

let set = new Set([1, 2, 3, 3, 4]);
let arr = Array.from(set)  //输出[1,2,3,4]

4. WeakSet

La structure WeakSet est similaire à Set. Elle présente deux différences par rapport à Set :
①Les membres de WeakSet ne peuvent être que des objets. , pas les autres types de valeurs ;
Les objets ②weakSet sont tous des références faibles. Si d'autres objets ne font plus référence à l'objet, le mécanisme de garbage collection récupérera automatiquement la mémoire occupée par l'objet, donc WeakSet n'est pas traversable.

La structure WeakSet a les trois méthodes suivantes :
WeakSet.prototype.add(value) : Ajouter un nouveau membre à l'instance WeakSet.
WeakSet.prototype.delete(value) : Efface le membre spécifié de l'instance WeakSet.
WeakSet.prototype.has(value) : renvoie une valeur booléenne indiquant si une valeur se trouve dans une instance WeakSet.
Une utilisation de WeakSet consiste à stocker les nœuds DOM sans se soucier des fuites de mémoire lorsque ces nœuds sont supprimés du document.

Carte ES6 :

1. Signification et utilisation de base de la carte ES6

L'objet JavaScript (Object) est essentiellement une collection de paires clé-valeur (structure de hachage), mais traditionnellement seules les chaînes peuvent être utilisées comme clés. Cela entraîne de grandes limites à son utilisation.
ES6 fournit une structure de données cartographiques. Il est similaire à un objet et constitue également une collection de paires clé-valeur, mais la portée de « clé » ne se limite pas aux chaînes. Différents types de valeurs (y compris les objets) peuvent être utilisés comme clés. En d’autres termes, la structure Object fournit une correspondance « chaîne-valeur » et la structure Map fournit une correspondance « valeur-valeur », qui est une implémentation plus complète de la structure Hash.

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

Le code ci-dessus utilise la méthode set de la structure Map pour traiter l'objet o comme une clé de m, puis utilise la méthode get pour lire la clé, puis utilise la méthode delete pour supprimer la clé .
Attributs et méthodes de fonctionnement des instances§ ⇧

2. Les instances de la structure Map ont les attributs et méthodes de fonctionnement suivants :

1.size attributsize renvoie le nombre total de membres de la structure Map.

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

2.set(key, value)La méthode set définit la valeur de clé correspondant au nom de clé key sur value, puis renvoie la structure entière de la carte. Si la clé a déjà une valeur, la valeur de la clé sera mise à jour, sinon la clé sera nouvellement générée.

const m = new Map();
m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined

La méthode set renvoie l'objet Map actuel, donc l'écriture en chaîne peut être utilisée.

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

3.get(key)La méthode get lit la valeur de clé correspondant à key Si la clé est introuvable, undefined est renvoyé.

const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数
m.get(hello)  // Hello ES6!

4.has(key)has méthode renvoie une valeur booléenne indiquant si une clé se trouve dans l'objet Map actuel.

const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

5.delete(key)La méthode delete supprime une clé et renvoie true. Si la suppression échoue, renvoyez false.

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true
m.delete(undefined)
m.has(undefined)       // false

6.clear()La méthode clear efface tous les membres et n'a aucune valeur de retour.

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0

三、Map遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法：
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
需要特别注意的是，Map 的遍历顺序就是插入顺序。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

四、WeakMap

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

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2

// WeakMap 也可以接受一个数组，
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

WeakMap与Map的区别有两点：
首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

上面代码中，如果将数值1和Symbol值作为 WeakMap 的键名，都会报错。其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。
WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。请看下面的例子。

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];

上面代码中，e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。

// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr [0] = null;
arr [1] = null;

五、Map与其它数据结构的互相转换

1.Map 转为数组：
Map 转为数组最方便的方法，就是使用扩展运算符（...）。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

2.数组 转为 Map：
将数组传入 Map 构造函数，就可以转为 Map。

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }

3.Map 转为对象：
如果所有 Map 的键都是字符串，它可以转为对象。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

4.对象转为 Map：

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

5.Map 转为 JSON：
Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

6.JSON 转为 Map：
JSON 转为 Map，正常情况下，所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是数组转为 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

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!