Tento tutoriál vám ukáže, jak správně zkopírovat/klonovat pole nebo objekt v JavaScriptu – není to tak jednoduché, jak se zdá!
Kopírování pole nebo objektu se může zdát jednoduché – ale JavaScript hází klíček do práce – skutečnost, že když přiřadíte hodnotu jedné proměnné jiné, odkáže původní proměnná. To znamená, že pokud se změní hodnota původní proměnné, změní se i hodnota kopie!
Abyste tomu zabránili, budete muset klonovat pole – zajištění toho, aby se nové proměnné s vlastními hodnotami vytvořily v novém poli. JavaScript není obsahují vestavěný způsob, jak toho dosáhnout, ale samozřejmě existují různé způsoby, jak toho dosáhnout.
Jak to nedělat!
Vaším prvním instinktem může být následující:
var pets = ['fish', 'parrot', 'cat']; var petsClone = pets;
TO TO NEBUDE FUNGOVAT!
petsClone se jednoduše stane odkazem na proměnnou domácí mazlíčci – ne kopie. domácí mazlíčci a petsClone nebudou navzájem kopiemi, obě budou jména směřující na stejné proměnná.
Pokud je jeden aktualizován, druhý se změní, což nemusí být chování, které chcete, pokud kopírujete pole.
Shallow vs. Deep Copy – Bezpečné klonování VŠECH hodnot v poli v JavaScriptu
Při klonování polí v JavaScriptu uvidíte odkazy na mělký a hluboké klonování nebo kopírování.
Mělké klonování bude klonovat pouze hodnoty v první úrovni pole. Žádné vnořené hodnoty NEBUDOU klonovány, takže na tuto hodnotu si dejte pozor, pokud pracujete s vícerozměrnými poli! Mělké klonování je stále užitečné, když pracujete s dvourozměrnými poli a chcete se zaměřit na výkon a jednoduchost kódu.
Shallow Cloning Arrays using ES6 Spread Syntax (…)
Toto je pravděpodobně nejjednodušší způsob, jak povrchně zkopírovat/klonovat pole pomocí syntaxe rozšíření JavaScriptu:
var pets = ['fish', 'parrot', 'cat']; var petsClone = [...pets];
Syntaxe spread rozšiřuje hodnoty v poli, takže její volání uvnitř nově deklarovaného pole naklonuje obsah druhého pole do nového pole.
Použití funkcí JSON k hlubokému klonování pole
Níže je multidimenzionální nebo vnořené pole je deklarováno. Pole domácí mazlíčci obsahuje dvě dílčí pole, z nichž každé obsahuje své vlastní hodnoty. Pokus o použití výše uvedené syntaxe šíření nebude klonovat hodnoty v těchto dílčích polích, bude na ně odkazováno.
Mohli byste napište složitou smyčku, abyste se ponořili do každého dílčího pole a naklonovali hodnoty, ale existuje mnohem lepší, i když trochu otřesnější řešení – převod původního pole na JSON a jeho dekódování do nového pole.
var pets = [['dog', 'cat'], ['fish', 'frog']]; var petsCopy = JSON.parse(JSON.stringify(pets));
Hacky řešení jsou často nejlepší řešení. JSON.stringify() se používá k převodu původního pole na řetězec JSON a JSON.parse() se používá k dekódování tohoto řetězce zpět do pole JavaScript, zcela samostatného klonu originálu, který je pak přiřazen k nové proměnné.
Pozor na vlastní třídy/objekty
Pokud hluboce klonujete pole obsahující vlastní třídy objektů, budou převedeny na obecné objekty a veškeré odkazy v nich budou ztraceny!
Zda je to problém nebo ne, zcela závisí na tom, čeho se snažíte dosáhnout. Možná budete muset procházet klonovaným polem a použít Object.assign() , abyste zajistili, že klonované objekty jsou správné třídy.
Test, Test, Test
Pokud vytváříte něco kritického nebo co se zabývá penězi (např. online obchod) a duplikujete pole, otestujte svůj kód a ujistěte se, že se váš kód chová tak, jak zamýšlíte!
Chování JavaScriptu při odkazování na proměnné namísto jejich duplikování je běžnou překážkou pro nové vývojáře JavaScriptu. Zvyknete-li si kód testovat, zajistíte, že všechny problémy odhalíte před stávají se pro vaše uživatele problémem.