Comment utiliser ES6 pour implémenter la déduplication (exemple de code)

Le contenu de cet article explique comment utiliser es6 pour implémenter la déduplication (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Voici trois méthodes pour supprimer les doublons d'un tableau et renvoyer des valeurs uniques. Ma méthode préférée est d'utiliser Set car c'est la plus courte et la plus simple.

const array = [5, 2, 4, 5, 3];
console.log([...new Set(array)])
console.log(array.filter((item, index) => array.indexOf(item) === index))
console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []))
// result:  [5, 2, 4, 3]

Utilisation de Set

Permettez-moi de commencer à expliquer ce qu'est Set :

Set est un nouvel objet de données introduit par es6 puisque Set vous permet uniquement de stocker des valeurs uniques, Ainsi, lorsqu'il est passé dans un tableau, il supprimera toutes les valeurs en double.

D'accord, revenons à notre code et voyons ce qui se passe. En fait, il a effectué les opérations suivantes :

1. Tout d'abord, nous avons créé un nouveau Set et passé le tableau comme paramètre d'entrée. Puisque Set n'autorise que des valeurs uniques, tous les doublons La valeur sera. supprimé.

2. Maintenant que la valeur en double a disparu, nous allons utiliser... pour la reconvertir en tableau.

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = [...set]
console.log(newArr)
// result:  [5, 2, 4, 3]

Utilisez la fonction Array.from() pour convertir Set en tableau

De plus, vous pouvez également utiliser Array.from() pour convertir Set à un tableau est un tableau.

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = Array.from(set)
console.log(newArr)
// result:  [5, 2, 4, 3]

Utiliser le filtre

Pour comprendre cette option, voyons ce que font ces deux méthodes : indexOf et filter

indexOf()

indexOf( ) renvoie l'index du premier élément trouvé dans le tableau. La fonction

const array = [5, 2, 4, 5, 3];
console.log(array.indexOf(5))  // 0
console.log(array.indexOf(2))  // 1
console.log(array.indexOf(8))  // -1

filter

filter() créera un nouveau tableau en fonction des conditions que nous fournissons. En d’autres termes, si un élément réussit et renvoie vrai, il sera inclus dans le tableau filtré. Si un élément échoue et renvoie faux, il ne sera pas inclus dans le tableau filtré.

Examinons étape par étape ce qui se passe chaque fois que nous parcourons le tableau.

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) === index)
  return array.indexOf(item) === index
})
//输出
// 5 0 0 true
// 2 1 1 true
// 4 2 2 true
// 5 3 0 false
// 3 4 4 true

Voir les commentaires pour la sortie du code ci-dessus. Les éléments en double ne correspondent plus à indexOf, donc dans ces cas, son résultat sera faux et ne sera pas inclus dans la valeur filtrée.

Récupérer les valeurs en double

Nous pouvons également utiliser la fonction filter() dans le tableau pour récupérer les valeurs en double. Il suffit simplement d'ajuster le code comme ceci :

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)
  return array.indexOf(item) !== index
})
//输出
// 5 0 0 false
// 2 1 1 false
// 4 2 2 false
// 5 3 0 true
// 3 4 4 false

Utiliser la fonction réduire()

La fonction réduire() est utilisée pour réduire les éléments du tableau et en fonction du fonction réducteur que vous transmettez, fusionnez-les enfin dans un tableau final,

Dans ce cas, notre fonction réducteur() détermine si notre tableau final contient cet élément. Sinon, placez-le dans le tableau final. tableau, sinon, cet élément est ignoré et finalement notre élément final est renvoyé.

La fonction réduire() est toujours un peu difficile à comprendre, alors voyons comment elle fonctionne maintenant.

const array = [5, 2, 4, 5, 3];
array.reduce((unique, item) => {
  console.log(item, unique, unique.includes(item), unique.includes(item) ? unique: [...unique, item])
  return unique.includes(item) ? unique: [...unique, item]
}, [])
//输出
// 5 []          false   [5]
// 2 [5]         false   [5, 2]
// 4 [5, 2]      false   [5, 2, 4]
// 5 [5, 2, 4]   true    [5, 2, 4]
// 3 [5, 2, 4]   false   [5, 2, 4, 3]

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!