JavaScriptではどのようにオブジェクトをクローンしますか?

作者:Luigi Nori訳者:先端サトシソース:stackabuse
夢があって、干物があって、WeChatは【世界に引っ越します】を捜索してこれに関心を持ちます.
本稿GitHubhttps://github.com/qq449245884/xiaozhi すでに収録されています.第一線の工場の面接試験の完全なポイントと資料と私の一連の文章があります.
元の値と参照値(オブジェクト)をコピーしたい場合、それらの挙動は大きく異なります.
元の値
私たちは、変数nameが、関連付けられた元の値(number、string、bollan、undefined、null)を持つと仮定する.この変数nameを他の変数name2にコピーすると、元の変数の任意の変更は元の値であるので、第2の変数に影響を与えません.

let name="    ";
let name2= name;
console.log (name, name2); //     ,     
name="   ";
console.log (name,name2); //         

参照値
ただし、参照の種類の値を同じに扱うと、変数の変更は他の変数にも反映されます.二つの変数は同じオブジェクトを指すためです.
行列
行列をコピーするには、slice()方法が、配列の新しいコピーを作成するために使用されます.このコピーはオリジナルの配列に影響しないように独立して変更できます.
任意のパラメータが渡されていない場合、配列は正確にコピーされますが、数字はパラメータとして伝達されても良いです.一つの数字だけを伝えると、私たちがコピーするインデックスの値が決まります.二つの数字を渡すと、開始と終了が表示されます.

//   1
const names = ['    ', '   ', '  '];
const names2 = names;
console.log(names, names2);
// ["    ", "   ", "  "] 
// ["    ", "   ", "  "] 

//   2
names2[2] = '    ';
console.log(names, names2);
//  ["    ", "   ", "    "] 
//  ["    ", "   ", "    "] 

//   3
const name2 = names.slice();
names[2] = '      ';
console.log(name2, names2)
// ["    ", "   ", "    "]
//  ["    ", "   ", "      "]

オブジェクト
参照値がオブジェクトである場合も同様です.属性の一つである変更はこの二つの変数に影響を与えます.クローンオブジェクトの場合、Object.assign()方法を使用して、1つ以上のソースオブジェクトのエニュメレート・属性の値を対象オブジェクトにコピーしますが、この方法はオブジェクトに対して浅いコピーのみです.

//   1
const names = {
  name: '    ',
  surname: '    '
}

const names2 = names;
console.log(names, names2) //           

//   2
names2.surname ='    ';
console.log(names, names2)

// {name: "    ", surname: "    "}
// {name: "    ", surname: "    "}

//   3
const names3 = Object.assign({}, names);
names3.surname = '    P';
console.log(names, names3)

// {name: "    ", surname: "    "}
// {name: "    ", surname: "    P"}

オブジェクトを深くコピーするには、他の方法が必要です.
私たちが言っているように、Object.assign()の方法は浅いコピー(すなわち、私たちのオブジェクトが属性として他のオブジェクトがない場合)にのみ有効です.これらの場合は、オブジェクトを深くコピーしなければならない.
浅いコピーとは違って、深くコピーして、関連するすべてのオブジェクトが複製されるまで、再帰的に各サブオブジェクトを複製する.
オブジェクトの深層コピーはどのような方法でコピーできますか?
JSON.parse(JSON.strigify(obj)
この方法は、JSON.stringify()を用いてオブジェクトを文字列に変換し、JSON.parse()を用いてオブジェクトに変換する.この方法は簡単なオブジェクトに有効ですが、オブジェクトの属性が関数の場合は無効です.

const names = {
  name: '    ',
  surname: '    ',
  social: {
    wx: '    ',
    url: 'www.lsp.com'
  }
}
const names2 = JSON.parse(JSON.stringify(names));
names2.social.url = 'www.baidu.com';
console.log(names, names2);

/** 
{
  name: "    "
  social: {wx: "    ", url: "www.lsp.com"}
  surname: "    "
}
*/

/** 
{
  name: "    "
  social: {wx: "    ", url: "www.baidu.com"}
  surname: "    "
}
*/

深さコピー
もう一つの非常に興味深い優雅なオブジェクト深度コピー法は再帰関数を使用することである.
私たちはdeepClone(object)関数を作成して、クローンしたいオブジェクトをパラメータとして伝達しました.関数の内部では、最初のオブジェクトからクローンされた属性ごとにオブジェクトに追加される空のオブジェクトを作成します.
具体的な考え方:

この属性がオブジェクトでない場合は、簡単にクローンオブジェクトに追加します.

属性がオブジェクトであれば、deepClone（value）関数を再実行し、属性の値(この場合はオブジェクト)をパラメータとして伝達し、同じプロセスを繰り返す.

function deepClone(object) {
  var clone = {};
  for (var key in object) {
    var value = object[key];
    if (typeof(value) !== 'object') {
      clone[key] = value;
    } else {
      clone[key]=deepClone(value);
    }
  }
  return clone;
} 

deepClone({value1:1,value2:{value3:2}});
//{value1:1,value2:{value3:2}}
deepClone({value1:1,value2:{value3:{value3b:3}}});
//{value1:1,value2:{value3:{value3b:3}}}

コード展開後に存在する可能性のあるバグをリアルタイムで知ることができませんでしたが、後でこれらのバグを解決するために、多くの時間をかけてロゴの調整を行いました.
原文:https://www.ma-o.org/en/programming/javascript/the-javascript-asign-method-to-merge-and-clone-objects
交流
夢があって、干物があって、WeChatは【世界に引っ越します】を捜索してこれに関心を持ちます.
本稿GitHubhttps://github.com/qq449245884/xiaozhi すでに収録されています.第一線の工場の面接試験の完全なポイントと資料と私の一連の文章があります.