JavaScript 配列のクローン作成: ソース配列への意図的な変更の防止

JavaScript での配列の複製と変更

この例では、配列の編集とクローン作成メソッドに焦点を当てた JavaScript フロントエンド ソリューションを示します。

a = [];
a[0] = {};
a[0].team = "Arsenal";
a[1] = {};
a[1].team = "Chelsea";
a[2] = {};
a[2].team = "West Ham";

function change_team(d, club) {
    d[1].team = club;
    return d;
}

b = [...a]; // Shallow copy of the array
change_team(b, "Spurs");

for(n = 0; n < a.length; n++) {
    console.log(n + "] " + a[n].team); // Arsenal, Chelsea, West Ham
}

for(n = 0; n < b.length; n++) {
    console.log(n + "] " + b[n].team); // Arsenal, Spurs, West Ham
}

突然変異を防ぐための JavaScript での配列のディープ クローン作成

この例では、ディープ コピーを利用して、元のアレイに影響を与えずにクローン アレイに変更を加える方法を示します。

a = [];
a[0] = {};
a[0].team = "Arsenal";
a[1] = {};
a[1].team = "Chelsea";
a[2] = {};
a[2].team = "West Ham";

function deepCloneArray(arr) {
    return JSON.parse(JSON.stringify(arr)); // Deep copy
}

function change_team(d, club) {
    d[1].team = club;
    return d;
}

b = deepCloneArray(a);
change_team(b, "Spurs");

for(n = 0; n < a.length; n++) {
    console.log(n + "] " + a[n].team); // Arsenal, Chelsea, West Ham
}

for(n = 0; n < b.length; n++) {
    console.log(n + "] " + b[n].team); // Arsenal, Spurs, West Ham
}

Lodash を使用した JavaScript での配列のクローン作成

参照ベースの変更を防ぐために、この例では、よく知られたユーティリティ パッケージである Lodash を使用して配列のディープ クローンを作成します。

const _ = require('lodash');

a = [];
a[0] = {};
a[0].team = "Arsenal";
a[1] = {};
a[1].team = "Chelsea";
a[2] = {};
a[2].team = "West Ham";

function change_team(d, club) {
    d[1].team = club;
    return d;
}

b = _.cloneDeep(a);
change_team(b, "Spurs");

for(n = 0; n < a.length; n++) {
    console.log(n + "] " + a[n].team); // Arsenal, Chelsea, West Ham
}

for(n = 0; n < b.length; n++) {
    console.log(n + "] " + b[n].team); // Arsenal, Spurs, West Ham
}

JavaScript 配列の複製に関するよくある質問

1. 深いコピーと浅いコピーの違いは何ですか?
2. 次のような浅いコピー [...array]、配列の最上位構造をコピーするだけです。元の配列と複製された配列は引き続きオブジェクト参照を共有します。を使用することで JSON.parse(JSON.stringify(array)) または _.cloneDeep、ディープ コピーは、ネストされた項目を含むすべてのレベルをコピーします。
3. クローン化された配列を編集すると、元の配列が変更される場合があるのはなぜですか?
4. 浅いコピーを使用してクローンを作成した配列内のオブジェクトは、依然として元の配列と同じメモリ アドレスに関連付けられています。その結果、クローン配列のオブジェクトの属性を変更すると、元の配列も変更されます。
5. JavaScript でディープ コピーを使用する必要があるのはどのような場合ですか?
6. 複雑な構造やネストされたオブジェクトを含む配列やオブジェクトを操作する場合は、参照ベースの変更を防ぐためにディープ コピー方法を使用する必要があります。
7. Lodash は JavaScript での配列の複製にどのように役立ちますか?
8. の _.cloneDeep Lodash が提供するこのメソッドは、配列とオブジェクトのディープ クローン作成を目的としており、コピーが元のデータへの参照を共有しないことを保証します。
9. アレイのディープ クローンを作成する際のパフォーマンスの考慮事項は何ですか?
10. ディープ クローン作成は、特に大きなデータセットや複雑にネストされた構造を扱う場合、メモリを大量に消費し、時間がかかる可能性があります。ディープコピーは、絶対に必要な場合にのみ使用してください。それ以外の場合は、アプリケーションの特定のニーズを考慮して他のオプションを検討する必要があります。

JavaScript での配列のクローン作成に関する最終的な考え方

JavaScript 配列のクローン作成には、浅いコピーと深いコピーについてしっかりと理解する必要があります。スプレッド演算子を使用した浅いコピーの使用は効果的ですが、配列内のオブジェクトへの参照を単独でコピーすると、望ましくない変更が発生する可能性があります。

元のデータの整合性を維持する必要があるシナリオにおける理想的なソリューションは、次のような手法を使用したディープ コピーです。 JSON 解析またはユーティリティライブラリのような ロダッシュ。どちらのアプローチも、コピーされた配列に加えられた変更が元の配列に影響を与えないことが保証されるため、複雑なデータ構造を管理するために必要です。