JavaScript are multe modalități de a face orice. Am scris mai departe 10 moduri de a scrie pipă / compune în JavaScript, iar acum facem matrici.

1. Operator Spread (copie superficială)

De când a scăzut ES6, aceasta a fost cea mai populară metodă. Este o sintaxă scurtă și o veți găsi incredibil de utilă atunci când utilizați biblioteci precum React și Redux.

numbers = [1, 2, 3];
numbersCopy = [...numbers];

Notă: Aceasta nu copiază în siguranță tablourile multidimensionale. Valorile matrice / obiect sunt copiate de referinţă în loc de by valoare.

Este în regulă

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// numbers is left alone

Nu este bine

ad-banner
nestedNumbers = [[1], [2]];
numbersCopy = [...nestedNumbers];

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// They've both been changed because they share references

2. Vechi pentru () Buclă (copie superficială)

Îmi imaginez că această abordare este cel mai puţin populare, având în vedere modul în care programele funcționale la modă devin în cercurile noastre.

Pur sau impur, declarativ sau imperativ, face treaba!

numbers = [1, 2, 3];
numbersCopy = [];

for (i = 0; i < numbers.length; i++) {
  numbersCopy[i] = numbers[i];
}

Notă: Aceasta nu copiază în siguranță tablourile multidimensionale. Deoarece utilizați = operator, va atribui obiecte / tablouri de către referinţă în loc de by valoare.

Este în regulă

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// numbers is left alone

Nu este bine

nestedNumbers = [[1], [2]];
numbersCopy = [];

for (i = 0; i < nestedNumbers.length; i++) {
  numbersCopy[i] = nestedNumbers[i];
}

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// They've both been changed because they share references

3. Old Old while () Buclă (copie superficială)

La fel ca for—Impur, imperativ, bla, bla, bla … funcționează! ?

numbers = [1, 2, 3];
numbersCopy = [];
i = -1;

while (++i < numbers.length) {
  numbersCopy[i] = numbers[i];
}

Notă: Aceasta atribuie, de asemenea, obiecte / tablouri de către referinţă în loc de by valoare.

Este în regulă

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// numbers is left alone

Nu este bine

nestedNumbers = [[1], [2]];
numbersCopy = [];

i = -1;

while (++i < nestedNumbers.length) {
  numbersCopy[i] = nestedNumbers[i];
}

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// They've both been changed because they share references

4. Array.map (copie superficială)

Înapoi pe teritoriul modern, vom găsi map funcţie. Înrădăcinată în matematică, map este conceptul de a transforma un set într-un alt tip de set, păstrând în același timp structura.

În engleză, asta înseamnă Array.map returnează o serie de aceeași lungime de fiecare dată.

Pentru a dubla o listă de numere, utilizați map cu double funcţie.

numbers = [1, 2, 3];
double = (x) => x * 2;

numbers.map(double);

Dar clonarea ??

Este adevărat, acest articol este despre matricele de clonare. Pentru a duplica o matrice, trebuie doar să returnați elementul din map apel.

numbers = [1, 2, 3];
numbersCopy = numbers.map((x) => x);

Dacă vrei să fii ceva mai matematic, (x) => x se numește identitate. Întoarce orice parametru a fost dat.

map(identity) clonează o listă.

identity = (x) => x;
numbers.map(identity);
// [1, 2, 3]

Notă: Aceasta atribuie, de asemenea, obiecte / tablouri de către referinţă în loc de by valoare.

5. Array.filter (copie superficială)

Această funcție returnează o matrice, la fel ca map, dar nu este garantat să aibă aceeași lungime.

Ce se întâmplă dacă filtrați pentru numere pare?

[1, 2, 3].filter((x) => x % 2 === 0);
// [2]

Lungimea matricei de intrare a fost 3, dar lungimea rezultată este 1.

Dacă ale tale filterPredicatul revine întotdeauna truetotuși, primești un duplicat!

numbers = [1, 2, 3];
numbersCopy = numbers.filter(() => true);

Fiecare element trece testul, deci este returnat.

Notă: Aceasta atribuie, de asemenea, obiecte / tablouri de către referinţă în loc de by valoare.

6. Array.reduce (copie superficială)

Aproape că mă simt prost folosind reduce pentru a clona o matrice, deoarece este mult mai puternică decât atât. Dar iată-ne …

numbers = [1, 2, 3];

numbersCopy = numbers.reduce((newArray, element) => {
  newArray.push(element);

  return newArray;
}, []);

reduce transformă o valoare inițială pe măsură ce parcurge o listă.

Aici valoarea inițială este o matrice goală și o umplem cu fiecare element pe măsură ce mergem. Acea matrice trebuie returnată din funcția care va fi utilizată în următoarea iterație.

Notă: Aceasta atribuie, de asemenea, obiecte / tablouri de către referinţă în loc de by valoare.

7. Array.slice (copie superficială)

slice returnează un superficial copie a unei matrice bazată pe indexul de start / sfârșit furnizat pe care îl furnizați.

Dacă vrem primele 3 elemente:

[1, 2, 3, 4, 5].slice(0, 3);
// [1, 2, 3]
// Starts at index 0, stops at index 3

Dacă vrem toate elementele, nu dați niciun parametru

numbers = [1, 2, 3, 4, 5];
numbersCopy = numbers.slice();
// [1, 2, 3, 4, 5]

Notă: Acesta este un superficial copiază, deci atribuie și obiecte / tablouri de către referinţă în loc de by valoare.

8. JSON.parse și JSON.stringify (Deep copy)

JSON.stringify transformă un obiect într-un șir.

JSON.parse transformă un șir în obiect.

Combinarea lor poate transforma un obiect într-un șir și apoi poate inversa procesul pentru a crea o nouă structură de date.

Notă: Acesta copiază în siguranță obiecte / tablouri cuibărite profund!

nestedNumbers = [[1], [2]];
numbersCopy = JSON.parse(JSON.stringify(nestedNumbers));

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);

// [[1], [2]]
// [[1, 300], [2]]
// These two arrays are completely separate!

9. Array.concat (copie superficială)

concat combină matrici cu valori sau alte matrici.

[1, 2, 3].concat(4); // [1, 2, 3, 4]
[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

Dacă nu dați nimic sau un tablou gol, o copie superficială este returnată.

[1, 2, 3].concat(); // [1, 2, 3]
[1, 2, 3].concat([]); // [1, 2, 3]

Notă: Aceasta atribuie, de asemenea, obiecte / tablouri de către referinţă în loc de by valoare.

10. Array.from (copie superficială)

Acest lucru poate transforma orice obiect iterabil într-o matrice. Oferirea unui tablou returnează o copie superficială.

numbers = [1, 2, 3];
numbersCopy = Array.from(numbers);
// [1, 2, 3]

Notă: Aceasta atribuie, de asemenea, obiecte / tablouri de către referinţă în loc de by valoare.

Concluzie

Ei bine, a fost distractiv?

Am încercat să clonez folosind doar 1 pas. Veți găsi mai multe modalități dacă utilizați mai multe metode și tehnici.