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

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.