Sloučit pole v JavaScriptu pomocí concat() a push() [Příklady]

Tento tutoriál vám ukáže správné způsoby, jak sloučit dvě nebo více polí v JavaScriptu pomocí concat metoda – a poskytněte upozornění, jak ne ke sloučení polí.

Slučování/spojování polí v JavaScriptu pomocí metody concat()*

 concat() metoda existuje s jediným účelem – sloučit pole.

concat() Syntaxe metody

array.concat(ARRAYS)

Všimněte si, že:

  • pole je první pole z polí, které mají být spojeny
  • POLE by měl být čárkami oddělený seznam polí, která mají být přidána do prvního pole
    • Budou spojeny v pořadí vzhledu
  • concat() vrátí nové pole – pole, které jej volá, a pole, která jsou mu předána, nejsou upravena

Příklad – Sloučit pole pomocí concat() Metoda

Níže jsou uvedeny příklady polí sloučených pomocí concat() metoda. Všimněte si, že v každém příkladu je výsledek concat() přiřazen k nové proměnné, protože původní pole nejsou změněna.

Sloučení dvou polí:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray);

Výsledkem bude nové pole myMergedArray , s následující hodnotou:

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

Sloučení více polí:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray, ['tree', 'flower', 'grass']);

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse",
    "tree",
    "flower",
    "grass"
]

Výše je sloučeno více polí – všimněte si, že třetí pole nebylo dříve deklarováno jako proměnná – hodnoty typu pole lze předat přímo do concat() .

ŠPATNÝ ZPŮSOB – Jak The push() Metoda by se NEMĚLA POUŽÍVAT ke sloučení/zřetězení polí

Než vám ukážu správný způsob použití push() metoda slučování polí, stojí za to ukázat běžnou chybu, ke které došlo při pokusu o to, abyste se jí mohli vyhnout.

Funkce push() metoda je určena pro připojení hodnot k poli. Protože jej lze použít k připojení násobek hodnot do pole, možná si myslíte, že jej lze použít ke sloučení dvou polí předáním pole do pole.

Toto není případ – pokud předáte pole do push metoda, bude přidána jako potomek pole, se kterým se pokoušíte sloučit – nepřidáno!

Zde je rychlá ukázka:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(mySecondArray);

Takto vypadá myFirstArray po výše uvedeném:

[
    "apple",
    "banana",
    "pear",
    [
        "dog",
        "cat",
        "bird",
        "horse"
    ]
]

Pole nebyla sloučena! Druhé pole bylo přidáno jako prvek k prvnímu namísto toho, aby byly prvky obou polí kombinovány.

SPRÁVNÁ CESTA – Jak The push() Metoda BY MĚLA být použita ke sloučení polí

Je to je možné použít rozšířenou syntaxi přesunout obsah jednoho pole do druhého a efektivně je sloučit přidáním obsahu druhého pole k prvnímu:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(...mySecondArray);

Výsledkem bude zamýšlené chování při slučování, aktualizace myFirstArray vypadat takto:

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

Všimněte si push() metoda? Jde o syntaxi spread – rozšiřuje obsah pole a předává jej jako argumenty do push() jednotlivě, nikoli předávání celého pole jako jednoho.

Doporučuji se vyhnout tuto metodu, pokud to vaše konkrétní situace nevyžaduje – váš kód by měl být jasný aby každý, kdo to čte, věděl, o co se snažíte. Pomocí concat() je jednoznačné – zřetězujete dvě pole.

S poli v JavaScriptu lze udělat mnohem více – vše je popsáno v našich článcích zde.