Tablourile JavaScript sunt cu ușurință unul dintre tipurile mele de date preferate. Sunt dinamice, ușor de utilizat și oferă o grămadă de metode încorporate de care putem profita.

Cu toate acestea, cu cât aveți mai multe opțiuni, cu atât poate fi mai confuză să decideți pe care ar trebui să le utilizați.

În acest articol, aș dori să discut câteva moduri obișnuite de a adăuga un element într-o matrice JavaScript.

Metoda Push

Prima și probabil cea mai comună metodă de matrice JavaScript pe care o veți întâlni este Apăsați(). Metoda push () este utilizată pentru adăugarea unui element la sfârșitul unui tablou.

Să presupunem că aveți o serie de elemente, fiecare element fiind un șir care reprezintă o sarcină pe care trebuie să o îndepliniți. Ar fi logic să adăugăm elemente mai noi la sfârșitul matricei, astfel încât să putem finaliza mai întâi sarcinile noastre anterioare.

ad-banner

Să vedem exemplul în formă de cod:

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

În regulă, deci push ne-a oferit o sintaxă frumoasă și simplă pentru a adăuga un element la sfârșitul matricei noastre.

Să presupunem că am vrut să adăugăm două sau trei articole pe rând la lista noastră, ce am face atunci? După cum se dovedește, Apăsați() poate accepta mai multe elemente pentru a fi adăugate simultan.

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item', 'Fifth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Acum, după ce am adăugat câteva sarcini în matricea noastră, ne-am putea dori să știm câte articole sunt în prezent în matricea noastră pentru a determina dacă avem prea multe pe farfurie.

Din fericire, Apăsați() are o valoare returnată cu lungimea matricei după ce elementele noastre au fost adăugate.

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.push('Fourth item', 'Fifth item');

console.log(arrLength); // 5 
console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Metoda Unshift

Nu toate sarcinile sunt create egale. S-ar putea să vă confruntați cu un scenariu în care adăugați sarcini la matrice și dintr-o dată întâlniți unul care este mai urgent decât celelalte.

Este timpul să ne prezentăm prietenul unshift () care ne permite să adăugăm elemente la începutul matricei noastre.

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2');

console.log(arrLength); // 5 
console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Puteți observa în exemplul de mai sus că, la fel ca Apăsați() metodă, unshift () returnează noua lungime a matricei pe care o putem folosi. De asemenea, ne oferă posibilitatea de a adăuga mai multe elemente la un moment dat.

Metoda Concat

Scurtă pentru concatenare (pentru a face legătura între ele), concat () metoda este utilizată pentru îmbinarea a două (sau mai multe) matrice.

Dacă vă amintiți de sus, unshift () și Apăsați() metodele returnează lungimea noii matrice. concat (), pe de altă parte, va returna o matrice complet nouă.

Aceasta este o distincție foarte importantă și face concat () extrem de util atunci când aveți de-a face cu tablouri pe care nu doriți să le mutați (cum ar fi tablourile stocate în starea React).

Iată cum ar putea arăta un caz destul de simplu și simplu:

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // ["?", "?", "?", "?"] 

Să presupunem că aveți mai multe tablouri pe care ați dori să le uniți. Fără griji, concat () este acolo pentru a salva ziua!

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];

const arr4 = arr1.concat(arr2,arr3);

console.log(arr4); // ["?", "?", "?", "?", "?", "?"]

Clonarea cu Concat

Amintiți-vă cum am spus asta concat () poate fi util atunci când nu doriți să mutați matricea existentă? Să aruncăm o privire la modul în care putem folosi acest concept pentru a copia conținutul unei matrice într-o matrice nouă.

const arr1 = ["?", "?", "?", "?", "?", "?"];

const arr2 = [].concat(arr1);

arr2.push("?");

console.log(arr1) //["?", "?", "?", "?", "?", "?"]
console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Minunat! În esență, putem „clona” o matrice folosind concat ().

Dar există un mic „gotcha” în acest proces de clonare. Noua matrice este o „copie superficială” a matricei copiate. Aceasta înseamnă că orice obiect este copiat prin referință și nu obiectul propriu-zis.

Să aruncăm o privire la un exemplu pentru a explica această idee mai clar.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}]

const arr2 = [].concat(arr1);

//change only arr2
arr2[1].food = "?";
arr2.push({food:"?"})

console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ]

console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, 
{ food: '?' } ]

Chiar dacă nu am făcut-o direct face orice modificări la matricea noastră originală, matricea a fost în cele din urmă afectată de modificările pe care le-am făcut pe matricea noastră clonată!

Există mai multe moduri diferite de a face în mod corespunzător o „clonă profundă” a unei matrice, dar o voi lăsa ca temă.

TL; DR

Când doriți să adăugați un element la sfârșitul matricei, utilizați Apăsați(). Dacă trebuie să adăugați un element la începutul matricei, încercați unshift (). Si tu poti adăugați matrici împreună folosind concat ().

Există cu siguranță multe alte opțiuni pentru adăugarea de elemente la o matrice și vă invit să ieșiți și să găsiți câteva metode mai bune de matrice!

Simțiți-vă liber să mă contactați Stare de nervozitate și anunțați-mi metoda preferată de matrice pentru adăugarea de elemente la o matrice.