Oto 2 sposoby na połączenie tablic i zwrócenie NOWEJ tablicy. Sam najchętniej sięgam po operator spread. Jeśli jednak musisz obsłużyć starsze przeglądarki, lepiej wybrać concat.
// 2 sposoby na łączenie tablic
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
// Metoda 1: Concat
const combined1 = [].concat(fruits, legumes);
// Metoda 2: Spread
const combined2 = [...fruits, ...legumes];
// Wynik
// [ 'pomme', 'poire', 'carotte', 'salade' ]Alternatywny zapis concat
Ten sam concat możesz zapisać również tak:
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.concat(legumes);
// [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(fruits); // ['pomme ', 'poire'];
console.log(legumes); // ['carotte ', 'salade'];
Jak widzisz, ten zapis nie rusza istniejącej tablicy ani jej nie modyfikuje.
Który wybrać?
Zestawmy obie wersje obok siebie, żeby dało się je porównać.
// Wersja A:
const combinedA = [].concat(fruits, legumes);
// Wersja B:
const combinedB = fruits.concat(legumes);
Zostaje więc pytanie, którą wybrać. Wolę wersję A, bo intencja jest w niej znacznie czytelniejsza. Wystarczy na nią spojrzeć, żeby wiedzieć, że tworzę nową tablicę i nie ruszam istniejącej. Kiedy patrzę na wersję B, mam za to wrażenie, że dopisuję legumes do tablicy fruits, i wcale nie jest oczywiste, że tablica fruits może zostać nadpisana przez legumes.
Różnica między spread a concat
Wolę spread, bo jest zwięźlejszy i szybciej się go pisze. ALE concat wciąż ma swoje zalety.
Spread jest znakomity, kiedy z góry wiesz, że masz do czynienia z tablicami. Co jednak, gdy źródłem jest coś innego, na przykład ciąg znaków, który chcesz dołożyć do tablicy? Weźmy przykład.
Przykład
Powiedzmy, że chcemy uzyskać taki wynik:
[1, 2, 3, 'random'];
A. Ze spreadem
Jeśli pójdziemy schematem z poprzedniego przykładu i użyjemy operatora spread, dzieje się to:
function combineArray(array1, array2) {
return [...array1, ...array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
Rozłożenie ciągu znaków rozbija słowo na pojedyncze litery. To nie jest wynik, o który nam chodziło.
B. Z concatem
ALE jeśli pójdziemy schematem z concat, dzieje się to:
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
Świetnie, dostajemy dokładnie ten wynik, o który nam chodziło.
Wiem, że część z was myśli teraz „E tam!”. Napiszę sobie warunek, sprawdzę, czy to, co przekazuję, jest tablicą, i obsłużę to odpowiednio. Jasne, to też działa. Albo napisz mniej kodu i użyj concat.
Werdykt
Szybka zasada brzmi tak. Jeśli wiesz, że pracujesz na tablicach, użyj spread. Jeśli natomiast może ci się trafić coś innego niż tablica, do połączenia sięgnij po concat.
Tak czy inaczej, chciałem to zasygnalizować, żebyś dobierał metodę do problemu, który akurat rozwiązujesz.
Łączenie tablic przez push
Część z was zastanawia się pewnie, czy do łączenia tablic nie da się użyć push. Da się! Tyle że push modyfikuje istniejącą tablicę. NIE tworzy nowej. Wszystko zależy więc od tego, co chcesz osiągnąć, miej to na uwadze.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.push(...legumes);
console.log(combined); // 4
// gdy używasz push, zwraca on DŁUGOŚĆ połączonej tablicy
console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
Poza tym, kiedy wrzucasz jedną tablicę do drugiej, musisz ją rozłożyć, inaczej skończysz z tablicą zagnieżdżoną. No chyba że właśnie o to ci chodziło.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]
cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]
Wsparcie przeglądarek
Spread pojawił się w ES6, więc obsługują go wszystkie nowoczesne przeglądarki. W pozostałych przypadkach użyj concat albo kompilatora w rodzaju Babel.
