Jak naklonovat pole v JavaScriptu?
v JavaScript, klonování pole znamená vytvoření nového pole se stejnými prvky jako původní pole. Klonování pole v JavaScriptu je užitečné, když chcete vytvořit nové pole, které má stejné prvky jako existující pole, bez úpravy původního pole.
Kdy klonovat pole?
Pokud chcete provádět některé operace s polem, jako je řazení, filtrování nebo mapování, ale nechcete upravovat původní pole, můžete vytvořit klon původního pole a místo toho provést operace na klonu.
- Při předávání pole funkci jako argumentu můžete chtít zajistit, aby funkce neměnila původní pole. V tomto případě můžete místo toho předat klon pole.
- Pokud chcete zachovat původní pole pro budoucí použití, můžete vytvořit klon původního pole a použít klon pro další zpracování nebo manipulaci.
- Pokud máte pole, které obsahuje objekty nebo pole jako prvky, a chcete se vyhnout úpravám původních objektů nebo polí, můžete vytvořit klon pole, se kterým budete pracovat, takže změny objektů nebo polí v klonu nebudou ovlivnit původní objekty nebo pole.
Tím pádem, klonování pole v JavaScriptu je užitečná technika pro práci s poli způsobem, který zachovává integritu původního pole a jeho prvků.
Zde jsou některé běžné případy použití pro klonování pole:
Obsah
- Kdy klonovat pole?
- Pomocí metody Array.slice().
- Pomocí operátora šíření
- Pomocí metody Array.from().
- Pomocí metody Array.concat().
- Pomocí smyčky for
- Pomocí metody Array.map().
- Použití metody Array.from() s funkcí map
- Použití metody Array.of().
- Použití metod JSON.parse() a JSON.stringify().
- Pomocí metody Object.assign().
- Použití metody Array.reduce().
Pomocí metody Array.slice().
Používáme metoda plátků k vytvoření mělké kopie pole. Tato metoda vytvoří nové pole s podmnožinou prvků z původního pole.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = originalArray.slice(); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Pomocí operátora šíření
Za použití operátor šíření … je stručný a snadný způsob, jak klonovat pole v JavaScriptu. Operátor spread umožňuje rozbalit pole na jednotlivé prvky, které pak lze použít k vytvoření nového pole.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Pomocí metody Array.from().
Za použití Array.from() metoda je další způsob, jak klonovat pole v JavaScriptu. Tato metoda vytvoří nové pole z existujícího pole pomocí volitelné mapovací funkce k transformaci hodnot v novém poli.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Pomocí metody Array.concat().
Za použití Array.concat() metoda je další způsob, jak klonovat pole v JavaScriptu. Tato metoda vytvoří nové pole zřetězením dvou nebo více polí dohromady.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = [].concat(originalArray); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Pomocí smyčky for
Tato metoda zahrnuje iteraci každého prvku v původním poli a zkopírování každého prvku do nového pole.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = []; for (let i = 0; i < originalArray.length; i++) { clonedArray.push(originalArray[i]); } console.log(clonedArray); Výstup
[ 1, 2, 3 ]
Pomocí metody Array.map().
Za použití Array.map() metoda je další způsob, jak klonovat pole v JavaScriptu. Tato metoda vytvoří nové pole mapováním každého prvku z původního pole na novou hodnotu.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>X); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Použití metody Array.from() s funkcí map
Za použití Array.from() metoda s mapovou funkcí je další způsob, jak klonovat pole v JavaScriptu. Tato metoda vytvoří nové pole mapováním každého prvku z původního pole na novou hodnotu pomocí poskytnuté funkce.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>X); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Použití metody Array.of().
Tato metoda vytvoří nové pole se stejnými prvky jako původní pole.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Použití metod JSON.parse() a JSON.stringify().
Za použití JSON.parse() a JSON.stringify() metody je další způsob, jak klonovat pole v JavaScriptu. Tato metoda zahrnuje převod původního pole na řetězec JSON a následnou analýzu řetězce JSON za účelem vytvoření nového pole.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Pomocí metody Object.assign().
Za použití Object.assign() metoda je další způsob, jak klonovat pole v JavaScriptu. Tato metoda vytvoří nové pole zkopírováním vlastností původního pole do nového objektu.
Příklad: Tento příklad ukazuje implementaci výše vysvětleného přístupu.
Javascript const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);
Výstup
[ 1, 2, 3 ]
Použití metody Array.reduce().
The Metoda Array.reduce(). provádí redukční funkci na každém prvku pole, výsledkem je jediná výstupní hodnota. Můžeme jej použít k vytvoření nového pole se stejnými prvky jako původní pole.
Syntax:
array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, initialValue); Příklad : V tomto příkladu použijeme metodu Array.reduce() k vytvoření klonu pole.
JavaScript // Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(val); návrat acc; }, []); // Zobrazení původního a klonovaného pole console.log('Original Array:', originalArray); // Výstup: [1, 2, 3, 4] console.log('Cloned Array:', clonedArray); // Výstup: [1, 2, 3, 4] Výstup
Original Array: [ 1, 2, 3, 4 ] Cloned Array: [ 1, 2, 3, 4 ]
Poznámka: Při klonování pole je tedy důležité zvážit složitost dat a požadavky na výkon aplikace.