jsにおける配列とオブジェクトのコピー

2037 ワード

一、配列


1.浅いレプリケーションと深いレプリケーションの違い


(1)浅いレプリケーション:浅いレプリケーションでは、オブジェクトの各属性のみが順次レプリケーションされ、再帰的なレプリケーションは行われません.JavaScriptストレージオブジェクトはすべてストレージアドレスであるため、浅いレプリケーションでは2つの配列が同じメモリアドレスを指し、2番目の配列を変更すると同時に1番目の配列も変更されます.
(2)深度コピー:深度コピーは異なり、元のオブジェクトの各属性がコピーされ、元のオブジェクトの各属性に含まれるオブジェクトも順次深度コピーの方法で新しいオブジェクトに再帰的にコピーされ、2つのオブジェクトが同じアドレスを指すことはありません.

2、浅いコピー(例):

var name1 = {
    name:"zhangsan"
}
//    src     
var name2 = name1;
name2.name = "lisi";
console.log(name1.name);

出力結果:lisi

3、複製(例)


jsには2つの一般的な方法があります
Arrayのsliceメソッドとconcatメソッドはいずれも配列のレプリケーションを実現できるが,この2つのメソッドは配列内のオブジェクト要素に対して深いレプリケーションを実行せず,参照をレプリケーションしただけであるため,この2つのメソッドは真の深さレプリケーションではない.
let arr1 = [1,2,3,4,5,6];
let arr2 = arr1;
let arr3 = arr1.concat();
let arr4 = arr1.slice(0);
console.log(arr1 === arr2);   //true
console.log(arr1 === arr3);     //false
console.log(arr1 === arr4);    //false
出力:
true
false
false
上の2つの方法では、配列のコピーしか簡単に実現できません.配列に他のオブジェクトがある場合、この2つの方法では深さのコピーは実現できません.

二、配列オブジェクトの深度コピー


1、JSONオブジェクトのparseとstringifyメソッドはオブジェクトの複製を実現することができる(JSONオブジェクトparseメソッドはJSON文字列をJSオブジェクトに逆シーケンス化することができ、stringifyメソッドはJSオブジェクトをJSON文字列にシーケンス化することができ、それによって深い複製を実現することができる)

let name1 = {
    name:"zhangsan",
    child:{
        name:"zhangsan's child"
    }
}
let name2 = JSON.parse(JSON.stringify(name1));
name1.name = 'lisi'
console.log(name1.name)
console.log(name2.name)
name1.child.name = "lisi's child"
console.log(name1.child.name)
console.log(name2.child.name)

出力:
lisi
zhangsan
lisi's child
zhangsan's child

2.jQueryの$extendsメソッドを使用する

var arr1 = [1, 2,{a: 3, b: 4}, 5],
arr2 = $.extend(true, [], arr1);