JavaScript でオブジェクトの配列をディープ クローン作成する方法

JavaScript でのオブジェクトの配列のクローン作成: 徹底的な調査

課題

オブジェクトのディープ コピーの作成配列内の他のオブジェクトへの参照を含むオブジェクトの配列は、JavaScript では複雑なタスクになる可能性があります。単純に配列をクローン作成すると参照がコピーされるだけで、一方の配列の変更が他方の配列に影響を及ぼします。

structedClone: 最新のソリューション

ディープ クエリーの最新かつ推奨される方法JavaScript で配列のクローンを作成するには、structuraldClone を使用します。

array2 = structuredClone(array1);

この関数は最新のブラウザで利用できます。 (Chrome 98、Firefox 94) ただし、より広範な互換性を確保するにはポリフィルが必要です。

JSON ベースのディープ クローニング

幅広いブラウザをサポートするには、JSON ベースの技術を使用できます。 .

JSON.parse とJSON.stringify

オブジェクトが JSON シリアル化可能である場合、ディープ クローン作成に JSON.parse と JSON.stringify を使用できます。ただし、この方法には利点と欠点があります。

利点

• 配列とその内容の両方をクローンします。
• シンプルな 1 行

欠点

• JSON シリアル化可能なオブジェクトでのみ機能します。
• スプレッドを使用するよりもパフォーマンスが遅くなります。 Operator.

let clonedArray = JSON.parse(JSON.stringify(nodesArray));

.map での Spread 演算子の使用

最新のブラウザでの浅いクローン作成の場合、Spread 演算子を .map と組み合わせることで、より多くのことが可能になります。パフォーマンス:

clonedArray = nodesArray.map(a => {return {...a}});

利点

• JSON ベースのクローン作成より高速です。
• あらゆる種類のオブジェクト。

欠点

• 浅いクローン (オブジェクトの最初のレベルのクローン作成) のみを実行します。

ベンチマーク: スプレッド手法は、ネストの深さが 2 の 20 個のオブジェクトの配列に対する JSON ベースのクローン作成。

以上がJavaScript でオブジェクトの配列をディープ クローン作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。