JavaScript でオブジェクトをマージおよびクローン作成する方法を 1 つの記事で学習します

この記事では、JavaScript でオブジェクトを結合および複製する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

元の値と参照値 (オブジェクト) をコピーする場合、その動作は大きく異なります。

プリミティブ値

変数 name には、それに関連付けられたプリミティブ値 (数値、文字列、ブール値、未定義、および null) があると仮定します。この変数 name を別の変数 name2 にコピーすると、元の変数を変更しても 2 番目の変数は元の値であるため、影響を受けません。

let name="前端小智";
let name2= name;
console.log (name, name2); // 前端小智, 前端小智
name="王大冶";
console.log (name,name2); // 王大冶 前端小智

参照値

ただし、参照型の値で同じことを行うと、一方の変数に加えた変更は、もう一方の変数にも反映されます。両方の変数が同じオブジェクトを指しているためです。

Array

配列をコピーするには、slice() メソッドを使用して配列の新しいコピーを作成します。このコピーは、元の配列に影響を与えることなく、個別に変更できます。

引数が渡されない場合は、配列の正確なコピーが作成されますが、数値を引数として渡すこともできます。数値が 1 つだけ渡された場合は、コピー元のインデックスの値が決まります。一方、数値が 2 つ渡された場合は、開始と終了がマークされます。

// 示例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

参照値がオブジェクトの場合も同じことが起こり、そのプロパティの 1 つを変更すると両方の変数に影響します。オブジェクトのクローンを作成するには、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.stringify(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: "隔壁老智"
}
*/

ディープ コピー

オブジェクトをディープ コピーするもう 1 つの非常に興味深くエレガントな方法は、再帰関数を使用することです。

deepClone(object) 関数を作成し、クローンを作成するオブジェクトをパラメータとして渡します。関数内では、ローカル変数 clone が作成されます。これは、開始オブジェクトから複製されるすべてのプロパティが追加される空のオブジェクトです。

具体的なアイデア:

• プロパティがオブジェクトでない場合は、単にそれを複製し、新しい複製オブジェクトに追加します。
• プロパティがオブジェクトの場合は、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

著者: Luigi Ori

翻訳者: フロントエンド Xiaozhi

プログラミング関連の知識の詳細については、こちらをご覧ください: プログラミング ビデオ## ＃！ ！

以上がJavaScript でオブジェクトをマージおよびクローン作成する方法を 1 つの記事で学習しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。