JS 配列とオブジェクトの浅いコピーと深いコピーに関するチュートリアル

励まし合いましょう~

多​​くのプログラミング言語では、パラメータの受け渡しや値の代入は、値の直接コピーや参照によるコピーによって完了します。 JavaScript では、値が直接コピーされるか参照によってコピーされるかに構文の違いはありません。値の型に基づいて完全に決定されます。

JavaScriptでは、単純な値は常に値の直接コピー（null、未定義、文字列、数値、ブール値、シンボル）によって渡されますが、複合値（オブジェクト（配列などを含む）および関数）は常に値の直接コピーによって渡されます。割り当てと転送は常に参照によるコピーによって行われます。

次の例は理解を深めます:

var a = 1;var b = a;
b++;
a; //1b; //2var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

配列の浅いコピー

上記の例における配列の代入操作は、配列の浅いコピーです。問題は、1 つのアレイが変更されると、他の割り当てられたアレイも変更されることですが、これは多くのバックアップのような状況では望ましくないことです。

var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

配列の深いコピー

配列の深いコピーは 2 つの方法で実装できます:

var a = [1,2,3];var b = a.slice(0);var c = a.concat();

b.push(4);

c.push(5);

a; //[1,2,3]b; //[1,2,3,4]c; //[1,2,3,5]

オブジェクトの浅いコピー

比較的言えば、配列のコピーは比較的単純ですが、オブジェクトの浅いコピーはこれは簡単に実装することもできます:

function easyClone(Obj) {var objNew = {};for ( var i in Obj) {
        objNew[i] = Obj[i];
    }return objNew;
}

実際には、元の各オブジェクトのプロパティと値を新しいオブジェクトにコピーします。 もちろん、Object.assign() を使用することもできます。任意の数のソース オブジェクトを独自の列挙可能なオブジェクトに割り当てるメソッドです。同時に、Object.assign() も簡単なコピーですので、興味のある学生は参照してください。 。

浅いコピーは、オブジェクトの各値がオブジェクトであるかどうかを確認する再帰ループを持たず、値を直接代入するため、特定の値がオブジェクトである場合に問題が発生するため、一般的にはディープコピーを使用する必要がありますバックアップを作成します。

オブジェクトのディープコピー

最も単純なディープコピー:

b = JSON.parse( JSON.stringify(a) )

制限事項:

• 関数をコピーできません

• プロトタイプチェーンはなくなり、オブジェクトはオブジェクトとなり、それが属するクラスは消えた。

実際、単純なディープ コピーでは、シャロー コピーを再帰的に呼び出すだけで済みます:

function deepCopy(obj) {
　　var objNew = objNew || {};
　　for (var i in obj) {
　　　　if (typeof p[i] === 'object') {
　　　　　　objNew[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　deepCopy(obj[i], objNew[i]);
　　　　} else {
　　　　　　　objNew[i] = obj[i];
　　　　}
　　}
　　return objNew;
}

もちろん、JQ の jQuery.extend() メソッドでもディープ コピーとシャロー コピーを行うことができます: 詳細については、この記事を参照してください:

浅いコピーと深いコピー - jQuery での $.extend 分析

以上がJS 配列とオブジェクトの浅いコピーと深いコピーに関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。