Tablouri și operatorul spread

Operatorul spread (operatorul ...) permite dezambalarea unui tablou în valori separate. Pentru a face acest lucru, se adaugă trei puncte în fața tabloului:

...array

Exemplu simplu:

const users = ["Tom", "Sam", "Bob"];
console.log(...users);  // Tom Sam Bob

Și, aplicând acest operator, putem umple un tablou cu valorile din alt tablou:

const users = ["Tom", "Sam", "Bob"];
console.log(users);     //  ["Tom", "Sam", "Bob"]
const people1 = [...users];
const people2 = new Array(...users);
const people3 = Array.of(...users);
console.log(people1);     //  ["Tom", "Sam", "Bob"]
console.log(people2);     //  ["Tom", "Sam", "Bob"]
console.log(people3);     //  ["Tom", "Sam", "Bob"]

Unirea tablourilor

Cu ajutorul operatorului spread, poți transmite valori din mai multe tablouri la crearea unui nou tablou. De exemplu:

const men = ["Tom", "Sam", "Bob"];
const women = ["Kate", "Alice", "Mary"];
const people = [...men, "Alex", ...women];

console.log(people);     //  ["Tom", "Sam", "Bob", "Alex", "Kate", "Alice", "Mary"]

În acest caz, valorile din tablourile men și women sunt transmise către tabloul people, iar în plus, putem adăuga valori suplimentare care nu fac parte din aceste tablouri.

Transmiterea argumentelor unei funcții

Similar, poți transmite valorile dintr-un tablou ca argumente pentru parametrii unei funcții:

const people = ["Tom", "Sam", "Bob"];

function print(first, second, third){
   console.log(first);
   console.log(second);
   console.log(third);
}
print(...people);
// Tom
// Sam
// Bob

În acest caz, funcția print() primește trei parametri. Operația ...people la apelul funcției permite dezambalarea tabloului people în valori separate, care sunt apoi transmise ca parametri pentru această funcție.

Trebuie de menționat că acest lucru nu este echivalent cu a transmite tabloul în întregime la apelul funcției:

print(people);

În acest caz, întregul tablou va fi transmis primului parametru al funcției - parametrul first, în timp ce celelalte vor avea valoarea undefined.

Un alt exemplu de transmitere a valorilor dintr-un tablou ca parametri pentru o funcție:

function sum(a, b, c){
   const d = a + b + c;
   console.log(d);
}
sum(1, 2, 3);
const nums = [4, 5, 6];
sum(...nums);

În al doilea caz, funcției i se transmit numerele din tabloul nums. Pentru a transmite nu doar tabloul ca o singură valoare, ci fiecare dintre elementele sale, este folosit operatorul spread (cele trei puncte ...).

Dacă numărul de parametri ai funcției este mai mic decât numărul de elemente din tablou, atunci elementele rămase în tablou vor fi pur și simplu ignorate. Dacă numărul de parametri este mai mare decât numărul de elemente din tablou, atunci parametrii pentru care nu există valori în tablou vor primi valoarea undefined:

const people1 = ["Tom", "Sam", "Bob", "Mike"];
const people2 = ["Alex", "Bill"];
function print(first, second, third){
   console.log(`${first}, ${second}, ${third}`);
}
print(...people1);  // Tom, Sam, Bob
print(...people2);  // Alex, Bill, undefined

Copierea tablourilor

Operatorul spread oferă cel mai simplu mod de a copia elementele unui tablou în altul. Totuși, trebuie să fii atent. Să analizăm un exemplu:

const people = ["Sam", "Tom", "Bob"];
const employees = [...people];
employees[0] = "Dan";
console.log(employees);     // ["Dan", "Tom", "Bob"]
console.log(people);        //  ["Sam", "Tom", "Bob"]

Aici sunt create două tablouri. Tabloul employees primește elementele din tabloul people. Mai apoi, modificăm primul element al tabloului employees. Din afișarea în consolă, putem vedea că modificarea unui tablou nu afectează celălalt tablou.

Cu toate acestea, ce se întâmplă dacă copiem un tablou de obiecte:

const people = [{name:"Sam"}, {name:"Tom"}, {name:"Bob"}];
const employees = [...people];
//employees[0] = {name: "Dan"};
employees[0].name = "Dan";
console.log(employees);     //  [{name:"Dan"}, {name:"Tom"}, {name:"Bob"}]
console.log(people);        //  [{name:"Dan"}, {name:"Tom"}, {name:"Bob"}]

Acum, tabloul people furnizează un tablou de obiecte, unde fiecare obiect are o singură proprietate - name. Apoi, modificăm valoarea proprietății name pentru primul element.

Afișajul în consolă ne arată că modificarea unui tablou a dus la modificarea celuilalt tablou. Deoarece obiectele reprezintă un tip de date referențial, la copierea lor într-un nou tablou nu se transmite o copie a obiectului (cum ar fi în cazul șirurilor), ci însuși obiectul. Prin urmare, primul element al primului tablou și primul element al celui de-al doilea tablou vor reprezenta efectiv același obiect.

Cu toate acestea, putem înlocui complet un element al unui tablou cu un alt obiect, și atunci elementul din cel de-al doilea tablou va continua să facă referire la vechiul obiect și să nu depindă de primul tablou:

const people = [{name:"Sam"}, {name:"Tom"}, {name:"Bob"}];
const employees = [...people];
employees[0] = {name: "Dan"};
console.log(employees);     //  [{name:"Dan"}, {name:"Tom"}, {name:"Bob"}]
console.log(people);        //  [{name:"Sam"}, {name:"Tom"}, {name:"Bob"}]

În acest caz, primul element al tabloului employees este înlocuit cu o referință către un obiect nou, în timp ce primul element al tabloului people continuă să facă referire la obiectul vechi.