JavaScript: 3 metode pentru a elimina duplicatele dintr-o matrice (array) (ES6)

Mai jos voi încerca sa redau 3 moduri de filtrare a duplicatelor dintr-o matrice, după care voi returna doar valorile unice.

const array = ['a', 1, 2, 'a', 'a', 3];

// 1. Set
[...new Set(array)];

// 2. filter
array.filter((item, index) => array.indexOf(item) === index);

// 3. reduce
array.reduce(unique, item) => unique.includes(item) ? unique : [...unique, item], []);

// result
// ['a', 1, 2, 3];

După cum se vede, cea mai simplă metodă este metoda unde am folosit obiectul Set, care a fost introdus în ES6.

1. Eliminarea dublicatelor din matrice cu ajutorul obiectului Set

Mai întâi am sa încerc să explic ce este Set:

Set este un obiect de date nou introdus în ES6. Acest obiect vă permite să stocați valori unice. Atunci când îi trimiteți o matrice, în rezultat se vor elimina valorile duple.

Bine, să ne întoarcem la codul nostru și să analizăm ce se întâmplă. Sunt 2 lucruri:

  1. În primul rând, creăm un nou obiect Set, căruia îi trimitem ca parametru matricea. Deoarece Set permite doar valori unice, toate duplicatele automat vor fi eliminate.
  2. Dupa ce duplicatele au dispărut, obiectul primit ca rezultat îl vom converti înapoi într-o matrice utilizând operatorul „
const array = ['a', 1, 2, 'a', 'a', 3];

// pasul 1
const uniqueSet = new Set(array);
// Set {'a', 1, 2, 3}

// pasul 2
const backToArray = [...uniqueSet];
// ['a', 1, 2, 3]

Alternativ, putem utiliza, de asemenea, funcția Array.from pentru a converti obiectul Set într-o matrice:

const array = ['a', 1, 2, 'a', 'a', 3];
Array.from(new Set(array));
// ['a', 1, 2, 3]

2. Eliminarea dublicatelor din matrice cu ajutorul funcției „filter”

Pentru a înțelege această opțiune, hai să vedem mai întâi ce fac aceste două metode: indexOf și filter.

indexOf

Metoda indexOf returnează primul index pe care îl găsește din elementul furnizat din matricea noastră.

const array = ['a', 1, 2, 'a', 'a', 3];
array.indexOf('a'); // 0
array.indexOf(1); // 1
array.indexOf(2); // 2
array.indexOf(3); // 3

filter

Metoda filter() creează o matrice nouă de elemente care trec de condiția pe care o oferim ca funcție în calitate de argument. Cu alte cuvinte, dacă elementul matricei trece și returnează valoarea true, acesta va fi inclus în matricea filtrată. în timp ce orice element care va întoarce fals, NU va fi inclus în matricea rezultată.

În exemplul de mai jos voi încerca sa parcurgem algoritmul pe pași, pentru a înțelege mai bine

const array = ['a', 1, 2, 'a', 'a', 3];
array.filter((item, index) => {
    console.log(
        // a. item
        item,
        // b. index
        index,
        // c. indexOf
        array.indexOf(item),
        // d. contiția
        array.indexOf(item) === index
    );
    return array.indexOf(item) === index;
});

Mai jos este ceea ce am primit în consolă cu ajutorul funcției console.log prezentată mai sus. Duplicatele vor fi acolo unde index-ul nu se potrivește cu indexOf. Deci, în celelalte cazuri, condiția va fi falsă și nu va fi inclusă în matricea noastră finală (filtrată).

itemindexindexOfCondiția
a00true
111true
222true
a30false
a40false
355true

Din exemplul dat, dupa cum se vede, este foarte ușor sa facem inversul funcției, adica sa preluăm valorile duble din matrice. Putem face acest lucru printr-o simpla ajustare a codului nostru:

const array = ['a', 1, 2, 'a', 'a', 3];
array.filter((item, index) => array.indexOf(item) !== index);
// ['a', 'a']

Șu dacă trecem din nou prin codul de mai sus, cu funcția console.log, vedem rezultatul:

itemindexindexOfCondiția
a00false
111false
222false
a30true
a40true
355false

3. Eliminarea dublicatelor din matrice cu ajutorul funcției „reduce”

Metoda de reducere, adică cu ajutorul funcției reduce este folosită pentru a reduce elementele matricei și a le combina într-o matrice finală bazată pe o funcție de reducere pe care o parcurgm la cu fiecare element al matricei

În acest caz, funcția reductorului nostru verifică dacă matricea finală conține elementul item al matricei initiale. Dacă nu, va include elementul în matricea finală. În caz contrar, dacă acest element deja a fost inclus, se va sări peste elementul respectiv și nu-l va include în matricea finală

Metoda reducerii, întotdeauna este un pic mai dificil de înțeles, deci hai să parcurgem, de asemenea, fiecare pas și să vedem rezultatul:

const array = ['a', 1, 2, 'a', 'a', 3];
array.reduce((unique, item) => {
    console.log(
        // a. item
        item,
        // b. matricea finală
        unique,
        // c. condiția, va include doar daca returnează FALSE
        unique.includes(item),
        // d. reducer, rezultatul funcției
        unique.includes(item) ? unique : [...unique, item]
    );
    return unique.includes(item) ? unique : [...unique, item];
}, []);
// resultat
// ['a', 1, 2, 3]

Iată rezultatele din console.log:

itemAcumulator, înainte de funcția reducevom adăuga în acumulator?Acumulator, dupa funcția reduce
a[]da[‘a’]
1[‘a’]da[‘a’, 1]
2[‘a’, 1]da[‘a’, 1, 2]
a[‘a’, 1, 2] nu[‘a’, 1, 2]
a[‘a’, 1, 2] nu[‘a’, 1, 2]
3[‘a’, 1, 2] da[‘a’, 1, 2, 3]

Cam asta a fost!
Succese 🙂

ms de info Samamtha Ming

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>