Comprendre deux façons de dédupliquer des tableaux dans ES6

Cet article vous présentera deux façons de dédupliquer des tableaux dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel vidéo javascript"

Deux façons de dédupliquer des tableaux dans ES6

Méthode 1 :

function unique(arr) {
    const res = new Map();
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

C'est aussi court, c'est tout, expliquons pourquoi.

Objet Map

Map est une nouvelle structure de données fournie par ES6.
Les objets cartographiques stockent des paires clé-valeur. N'importe quelle valeur (objet ou primitive) peut être utilisée comme clé ou valeur.

Le tableau suivant répertorie les méthodes de l'objet Map.

方法	描述
clear	删除所有的键/值对，没有返回值。
delete	删除某个键，返回true。如果删除失败，返回false。
forEach	对每个元素执行指定操作。
get	返回Map对象key相对应的value值。
has	返回一个布尔值，表示某个键是否在当前 Map 对象之中。
set	给Map对象设置key/value 键/值对。

L'objet Map possède également un attribut size, qui renvoie le nombre de paires clé/valeur de l'objet Map.

La méthode filter() du tableau

La méthode filter() crée un nouveau tableau. Les éléments du nouveau tableau sont vérifiés en vérifiant tous les éléments du spécifié. tableau qui remplit les conditions.

Syntaxe :

array.filter(function(currentValue,index,arr), thisValue)

Description du paramètre :

Fonction flèche

return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的代码可以改成这样
return arr.filter(function(a){
    return !res.has(a) && res.set(a, 1);
});

1. La fonction flèche a une syntaxe plus concise pour écrire du code
2. Cela ne sera pas lié.

Pour en savoir plus, cliquez ici

Méthode 1 d'analyse

function unique(arr) {
    //定义常量 res,值为一个Map对象实例
    const res = new Map();
    
    //返回arr数组过滤后的结果，结果为一个数组
    //过滤条件是，如果res中没有某个键，就设置这个键的值为1
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

Méthode 2 :

function unique(arr) {
    return Array.from(new Set(arr))
}

Cette méthode nécessite moins de code, ce qui est incroyable.
La méthode from du tableau

La méthode Array.from() extrait les données d'un objet de type tableau ou itérable (y compris Array, Map, Set, String, TypedArray, arguments objets, etc.) dans

Syntaxe :

Array.from(arrayLike[, mapFn[, thisArg]])

参数	描述
arrayLike	必需，想要转换成真实数组的类数组对象或可迭代的对象。
mapFn	可选，如果指定了该参数，则最后生成的数组会经过该函数的加工处理后再返回。
thisArg	可选，执行 mapFn 函数时 this 的值。

Exemple de code :

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

Set Object

Set object vous permet de stocker une valeur unique de n'importe quel type, qu'il s'agisse d'une valeur primitive ou d'une référence d'objet.
Un objet Set est une collection de valeurs et vous pouvez parcourir ses éléments dans l'ordre d'insertion.
Les éléments de l'Ensemble n'apparaîtront qu'une seule fois, c'est-à-dire que les éléments de l'Ensemble sont uniques.

Syntaxe :

new Set([iterable]);

Paramètres :
iterable, si vous passez un objet itérable (y compris Array, Map, Set, String, TypedArray, objet arguments, etc.), tous ses éléments seront ajoutés au nouveau Set. Si ce paramètre n'est pas spécifié ou si sa valeur est nulle, le nouveau Set est vide.

Le tableau suivant répertorie les méthodes de l'objet Set.

方法	描述
add	添加某个值，返回Set对象本身。
clear	删除所有的键/值对，没有返回值。
delete	删除某个键，返回true。如果删除失败，返回false。
forEach	对每个元素执行指定操作。
has	返回一个布尔值，表示某个键是否在当前 Set 对象之中。

Set对象和Map对象一样，都有一个size属性，他返回Set对象的值的个数。

方法二 分析

function unique(arr) {
    //通过Set对象，对数组去重，结果又返回一个Set对象
    //通过from方法，将Set对象转为数组
    return Array.from(new Set(arr))
}

总结

这次说的两个方法，真的很简单，主要就是靠ES6里的新东西，难度不大，代码简单，主要就是多用用就好了。

---

经人提醒，再补充一种，[...new Set(arr)]  

不懂 ...  的朋友，可以看这里 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!