JavaScript オブジェクトのディープ クローン作成の概要_JavaScript スキル

オブジェクトディープクローンという新しい言葉がいつからフロントエンド界隈に現れ始めたのかはわかりません。非常に高尚に思えるかもしれませんが、実際には新しいものではなく、実際のプロジェクト開発ではすでに使用しているかもしれません。しかし、中国語の文字は幅広く奥深いため、一見専門的な語彙によって、本来は単純なものが若干曖昧になってしまいます。 . 装飾を加えると神秘的になります。

そもそもなぜオブジェクトのディープ クローンを作成するのでしょうか?推測させてください: js の組み込みオブジェクト ドキュメントが長すぎると思うことがあります。その場合は、次のようにするとよいでしょう:

コードをコピーします コードは次のとおりです:

var d = ドキュメント;
d.by = function(id){
d.getElementById(id);
を返します };
d.by('id').innerHTML = 'hello sendsin';

上記のコードは document.getElementById を簡素化し、元のドキュメント オブジェクトに by メンバー メソッドを追加します。document.hasOwnProperty('by') によって返されるステータス値を通じて判断を検証できます。次の例を見てください。

コードをコピーします コードは次のとおりです:

var person = {名前: 'Xianxin'、職業: 'フロントエンド開発'、場所: '杭州'};
var newperson = 人;
newパーソン.年齢 = '24';
console.log(人);
//結果: {名前: 'Xianxin'、職業: 'フロントエンド開発'、場所: '杭州'、年齢: 24}

オブジェクトが新しい変数に単純に渡されると、そのオブジェクトにエイリアスが追加されるだけであることがわかります。これは、エイリアスを操作すると、元のオブジェクトのキー値が変更されることを意味します。しかし、問題は、時々 newperson を person から完全に独立させたい場合があり、それらの間には同期関係がないため、コピーを生成する必要があるということです。例を参照してください:

コードをコピーします コードは次のとおりです:

var cloneObj = function(obj){
var str, newobj = obj.constructor === 配列 [] : {};
If(オブジェクトの種類 !== 'オブジェクト'){
return;
else if(window.JSON){
str = JSON.stringify(obj), //シリアル化されたオブジェクト
newobj = JSON.parse(str) //復元
; } else {
for(obj の変数 i){
newobj[i] = obj[i] の種類 === 'オブジェクト'
cloneObj(obj[i]) : obj[i]; }
}
newobj を返します;
};

//テスト
var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//ディープクローン作成を実行します
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//クローン作成後に新しいオブジェクトのメンバーを削除します
newobj.a を削除;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//結果: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];

これはオブジェクトのクローン作成と呼ばれます。ただし、説明が必要な点がいくつかあります。コード内の JSON オブジェクトとそのメンバー メソッド stringify および parse は、それぞれ ECMAScript5 仕様に属しており、オブジェクト (配列オブジェクトを含む) を文字列に変換して復元することで、オブジェクトのディープ コピーを実現します。したがって、低レベルのブラウザー (IE など) では、配列をコピーする場合は newobj.concat(obj) を使用でき、通常のオブジェクトの場合は単純に値を列挙して割り当てることができます。