JavaScript の配列とオブジェクトをコピーするコード例の分析

この記事では、主にJavaScriptの配列とオブジェクトのコピーに関する関連知識を紹介します。非常に良い基準値を持っています。エディタで見てみましょう

1. データ型

JSは、狭義にはすべてのデータを基本型と参照型の2つの型に分けます。 基本型には未定義型、型があります。 Null、Boolean、Number、String、参照型は Object、一般的に使用される Array、Date、RegExp、Function などはすべて Object クラス 型に属します。

基本データと参照データの違いの 1 つは、変数をコピーするときに、基本データは独立した新しいコピーをコピーするのに対し、参照データは元の変数への参照をコピーすることです。以下に例を示します。

// 基本类型数据的复制
var a = 10;
var b = a; // b = 10
a = 20; // a = 20, b = 10
// 引用类型数据的复制
var m = [1, 2];
var n = m;
m[0] = 10;
console.log(n[0]); // 10

参照ではなく参照型そのものの値をコピーしたい場合、明らかに上記の方法は使用できません。

2. 配列の浅いコピー

浅いコピーとは、オブジェクト (配列) がコピーされるときに、その参照フィールドの値はコピーされませんが、対応するフィールドの参照はコピーされることを意味します。例:

var src = [
 'alpha',
 ['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
 dest[i] = src[i];
}
//此时，如果改变src中的引用字段，dest中相应的字段也会被改变
src[1].push(&#39;delta&#39;);
console.log(dest[1]); // [&#39;bravo&#39;, &#39;chalie&#39;, &#39;delta&#39;]

浅いコピーは通常、一次元配列、つまり配列に参照型が存在しない場合に使用されます。一般的に使用されるシャロー コピー メソッドは次のとおりです。

concat メソッド

 var src = ['alpha', 'bravo'],
  dest = [];
 dest = dest.concat(src);

concat メソッドは、次のような配列のマージでより一般的に使用されます。

 var a = ['alpha', 'bravo'],
  b = ['chalie', 'delta'],
  combine;
 combine = a.concat(b);

concat が配列のマージに使用される場合は、 2 つを組み合わせる 配列内のすべての要素を新しいオブジェクトにコピーしますが、大規模な配列ではコストがかかります。より良い方法は、後の配列の要素を前の配列にコピーすることです。

 var src = ['alpha', 'bravo'],
  dest = ['chalie', 'delta'];
 Array.prototype.push.apply(src, dest);

slice メソッド

slice メソッドは、既存の配列から選択された要素を返し、新しい配列を返すことができます。

 var src = ['alpha', 'bravo'],
 var dest = src.slice(0);

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

オブジェクトの浅いコピーは for-in トラバーサルを使用して実現でき、より便利な Object.assign() メソッドが es6 で提供されています。

 var src = {name: 'fox', age: 20},
  dest = null;
 dest = Object.assign({}, src);

jQueryの$.extend、アンダースコアの_.extendなどを使用してオブジェクトをコピーすることもできます。

4. 深いコピー

浅いコピーの適用シナリオは限られており、多くの場合、オブジェクトを完全なコピーにコピーできることが期待されており、各フィールドを比較するために typeof または instanof 演算子を使用する必要があります。タイプが判断されます。フィールドが基本タイプの場合は、直接コピーできます。フィールドが参照型の場合、フィールドのすべてのフィールドに対して上記の判断を行う必要があるため、再帰を使用してこの関数を実装することを検討しやすくなります。

function deep_copy(src, dest) {
 for (var p in src) {
  if (Array.isArray(src[p]) || src[p] instanceof Object) {
   dest[p] = Array.isArray(src[p]) ? [] : {};
   arguments.callee(dest[p], src[p]);
  }else {
   dest[p] = src[p];
  }
 }
}

上記のコードでは、配列は特別なオブジェクトであるため、for-in を使用して走査できます。

さらに、jsonメソッドも使用できます:

 function deep_copy_in_json(src) {
  return JSON.parse(JSON.stringify(src));
 }

これは比較的単純ですが、コンストラクター属性やオブジェクト内の一部のメソッドなど、元のオブジェクトの多くのプロパティが操作後に失われます。プロトタイプ。

以上がJavaScript の配列とオブジェクトをコピーするコード例の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。