Cet article vous propose une introduction comparative à Set et Map dans es6 (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Set
1. Méthode add() et attribut size
{
let list = new Set();
// add()方法向Set数据添加元素
list.add(5);
list.add(7);
// size属性返回数据的长度
console.log(list.size); // 2
let arr = [1, 2, 3, 4, 5];
let set = new Set(arr);
console.log(set, set.size); // Set(5) {1, 2, 3, 4, 5} 5
}2.Définir les éléments doit être unique
{
let list = new Set();
list.add(1);
list.add(2);
list.add(1); // 重复元素不会添加进去
console.log(list); // Set(2) {1, 2}
// 数组去重
let arr = [1, 2, 3, 1, '2'];
let list2 = new Set(arr);
console.log(list2); // Set(4) {1, 2, 3, "2"}
}3.has(),delete(),clear()
{
let arr = ['add', 'delete', 'clear', 'has'];
let list = new Set(arr);
console.log(list.has('add')); // true
list.delete('add');
console.log(list); // Set(3) {"delete", "clear", "has"}
list.clear();
console.log(list); // Set(0) {}
}4. Set
{
let arr = ['add', 'delete', 'clear', 'has'];
let list = new Set(arr);
// Set结构的数据，key和value是同一个值
for (let value of list) {
console.log('value', value); // 'add' 'delete' 'clear' 'has'
}
for (let key of list.keys()) {
console.log('keys', key); // 'add' 'delete' 'clear' 'has'
}
for (let value of list.values()) {
console.log('values', value); // 'add' 'delete' 'clear' 'has'
}
for (let [key, value] of list.entries()) {
console.log('entries', key, value);
}
list.forEach(function (item) {
console.log(item); // 'add' 'delete' 'clear' 'has'
});
}La différence entre WeakSet et Set :
Les éléments de WeakSet ne peuvent être que des objets, pas It est une valeur numérique, une chaîne, une valeur booléenne...
Les objets de WeakSet sont tous des références faibles, et le mécanisme de récupération de place ne prend pas en compte la référence du WeakSet à l'objet. Les références dans WeakSet ne sont pas comptées dans le mécanisme de récupération de place, elles ne provoqueront donc pas de fuites de mémoire. Par conséquent, WeakSet convient pour stocker temporairement un groupe d’objets et stocker des informations liées aux objets. Tant que ces objets disparaissent en externe, leurs références dans WeakSet disparaîtront automatiquement.
{
let weakList = new WeakSet();
let arg = {name: 'hhh'};
weakList.add(arg); // WeakSet的元素只能是对象
// weakList.add(2); // Uncaught TypeError: Invalid value used in weak set
console.log(weakList); // WeakSet {{name: 'hhh'}}
// 注意：WeakSet没有size属性，没有clear方法，不能遍历。其他的用法和Set相同
}Méthode 1.set() et méthode get()
{
let map = new Map();
let arr = ['123'];
// Map的key可以是任意数据类型
map.set(arr, 456); // map.set(key, value)，这里用数组作为key,添加一个值为456的元素
console.log(map.get(arr)); // 456
}2. Une autre façon de définir Map
{
let map = new Map([['a', 123], ['b', 456]]); // 接收一个数组作为参数，数组的每一项为：[key,value]
console.log(map); // Map(2) {"a" => 123, "b" => 456}
console.log(map.size); // 2
console.log(map.has('b')); // true
map.delete('a');
console.log(map); // Map(1) {"b" => 456}
map.clear();
console.log(map); // Map(0) {}
}La différence entre WeakMap et Map :
WeakMap La clé peut être uniquement l'objet
Les objets référencés par les noms de clé de WeakMap sont des références faibles, et le mécanisme de garbage collection ne prend pas en compte les références à cet objet. (Notez que WeakMap ne fait que faiblement référence au nom de la clé, pas à la valeur de la clé. La valeur de la clé est toujours une référence normale.) Fondamentalement, si vous souhaitez ajouter des données à l'objet et ne souhaitez pas interférer avec le mécanisme de récupération de place, vous peut utiliser WeakMap.
{
let weakmap = new WeakMap();
let o = {};
weakmap.set(o, 123);
console.log(weakmap.get(o)); // 123
// 注意：WeakMap没有size属性，没有clear方法，不能遍历。类似于Set与WeakSet的区别
}{
// 数据结构横向对比，增 查 改 删
let map = new Map();
let array = [];
// 增
map.set('t', 1);
array.push({'t': 1});
console.log(map, array); // {"t" => 1} [{'t': 1}]
// 查
let map_exist = map.has('t');
let array_exist = array.find(item => item.t);
console.log(map_exist, array_exist); // true {t: 1}
// 改
map.set('t', 2);
array.forEach(item => item.t ? item.t = 2 : '');
console.log(map, array); // {"t" => 2} [{'t': 2}]
// 删
map.delete('t');
let index = array.findIndex(item => item.t);
array.splice(index, 1);
console.log(map, array); // {} []
}{
let set = new Set();
let array = [];
let item = {'t': 1};
// 增
set.add(item);
array.push(item);
console.log(set, array); // {{'t': 1}} [{'t': 1}]
// 查
let set_exist = set.has(item);
let array_exist = array.find(item => item.t);
console.log(set_exist, array_exist); // true {t: 1}
// 改
set.forEach(item => item.t ? item.t = 2 : '');
array.forEach(item => item.t ? item.t = 2 : '');
console.log(set, array); // {{'t': 2}} [{'t': 2}]
// 删
set.forEach(item => item.t ? set.delete(item) : '');
let index = array.findIndex(item => item.t);
array.splice(index, 1);
console.log(set, array); // {} []
}{
let item = {t: 1};
let map = new Map();
let set = new Set();
let obj = {};
// 增
map.set('t', 1);
set.add(item);
obj['t'] = 1;
console.log(obj, map, set); // {t: 1} Map(1) {"t" => 1} Set(1) {{t: 1}}
// 查
console.log(map.has('t'), set.has(item), 't' in obj); // true true true
// 改
map.set('t', 2);
item.t = 2;
obj['t'] = 2;
console.log(obj, map, set); // {t: 2} Map(1) {"t" => 2} Set(1) {{t: 2}}
// 删
map.delete('t');
set.delete(item);
delete obj['t'];
console.log(obj, map, set); // {} Map(0) {} Set(0) {}
}Recommandation :
Utilisez d'abord la carte, pas le tableau , en particulier Il s'agit d'une structure de données complexe
Considérez le caractère unique des données, utilisez set, abandonnez le tableau et l'obj
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
