Maison > interface Web > Questions et réponses frontales > Comment implémenter la déduplication arr (tableau) dans es6

Comment implémenter la déduplication arr (tableau) dans es6

青灯夜游
Libérer: 2022-08-30 17:48:28
original
2268 Les gens l'ont consulté

3 méthodes d'implémentation : 1. Définir la structure des données et la déduplication "Array.from()", syntaxe "Array.from(new Set(arr))" ; 2. Définir la structure des données et l'opérateur d'extension "... "Supprimer les doublons , la syntaxe "[...new Set(arr)]"; 3. filtrage filter() et indexOf(), la syntaxe "arr.filter((it,in)=>{return arr.indexOf(it , 0)===dans;});”.

Comment implémenter la déduplication arr (tableau) dans es6

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

5 façons de dédupliquer les tableaux ES6

1. Définir la structure des données et Array.from() pour dédupliquer

  • Set est une nouvelle structure de données fournie par ES6, similaire aux tableaux, mais là il n'y a pas de valeurs en double en soi. Grâce à cette fonctionnalité, nous pouvons convertir le tableau en un type Set pour la déduplication, puis utiliser la méthode Array.from pour le convertir à nouveau en tableau.

  • La méthode Array.from est utilisée pour convertir deux types d'objets en tableaux réels : les objets de type tableau et les objets itérables (y compris les nouvelles structures de données Set et Map d'ES6).

Idée d'implémentation :

  • Après avoir converti le tableau en une collection d'ensembles et l'avoir dédupliqué, utilisez la méthode Array.from pour convertir l'ensemble en un tableau

Syntaxe :

Array.from(new Set(arr))
Copier après la connexion

Exemple :

let arr=[1,2,3,3,2,"1",0,undefined,undefined];
let newArr=Array.from(new Set(arr));
console.log(newArr);
Copier après la connexion

Comment implémenter la déduplication arr (tableau) dans es6

2. Définir la structure des données et l'opérateur de propagation "..." Déduplication

  • L'opérateur de propagation est introduit dans ES6, qui étend l'objet itérable en ses éléments séparés. Ce qu'on appelle l'objet itérable est. tous les objets qui peuvent être parcourus à l'aide d'une boucle for of, tels que des tableaux, des chaînes, des cartes, des ensembles, des nœuds DOM, etc.

Idée d'implémentation :

  • Convertir le tableau en un ensemble Après la déduplication, utilisez l'opérateur de propagation... pour étendre l'ensemble en tableau et convertir l'ensemble en tableau

Syntaxe :

[...new Set(arr)]
Copier après la connexion

Exemple :

let arr=[1,2,3,3,2,"1",0,1,2];
let newArr=[...new Set(arr)];
console.log(newArr);
Copier après la connexion

Comment implémenter la déduplication arr (tableau) dans es6

3. Utilisez la méthode filter+indexOf du tableau pour supprimer les doublons

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

indexOf renvoie le premier index (index) de l'élément spécifié dans le tableau, sinon, elle renvoie -1

Exemple :

var arr=[1, 2, 3, 2, 3];
var newArr = arr.filter((item,index)=> {
  return arr.indexOf(item,0) === index;
});
console.log(newArr);
Copier après la connexion

Comment implémenter la déduplication arr (tableau) dans es6

Donc ici, chaque élément du tableau arr passe indexOf() Les valeurs d'index renvoyées par la méthode sont 0 1 2 1 2

arr.forEach(item => console.log(arr.indexOf(item))); // 0 1 2 1 2
Copier après la connexion

Vous pouvez utiliser indexOf pour réaliser la déduplication. Par exemple, le quatrième élément 2 dans arr renvoie un index de 1 à indexOf, mais son indice d'index actuel est 3. , différent, indiquant que l'élément 2 actuel est apparu auparavant, il doit donc être filtré.

【Recommandations associées : tutoriel vidéo javascript, front-end 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal