JavaScript のオブジェクト コピー メソッドの詳細な分析 (コード付き)

前回の記事「JavaScript「jquery継承」の使い方で知っておきたいこと(詳細コード解説)」では、JavaScript「jquery継承」の使い方について学びました。以下の記事ではJSでオブジェクトをコピーする方法を紹介していますので、困っている方は参考にしてみてください。

javascriptでオブジェクトをコピーする場合、最初に思い浮かぶのはObject.assign()## です。

#JSON.parse(JSON.stringify())、およびES6の展開演算子 [...]

js#=では、operator はオブジェクトのコピーを作成できないため、これはオブジェクトへの参照にすぎませんOperator

var x = { a: 1, b: 2, }; y = x; x.a = 10; console.log(x); //{a:10, b:2} console.log(y); //{a:10, b:2}

したがって、オブジェクト操作を実行する場合、等号演算子 (

) は推奨されません

var x = { a: 1, b: 2, }; y = Object.assign({}, x); x.a = 10; console.log(x); //{a:10, b:2} console.log(y); //{a:1, b:2}

ログイン後にコピー

一見すると、次のようになります。ではありません 欲しいものは欲しい結果なので例外が見つかります オブジェクトの構造をもう少し複雑にして見てみると

var x = { a: 1, b: 2, c: { d: 3, }, }; y = Object.assign({}, x); x.a = 5; console.log(x); //{a:5, b:2, c:{d:3}} console.log(y); //{a:5, b:2, c:{d:3}} x.c.d = 10; console.log(x); //{a:5, b:2, c:{d:10}} console.log(y); //{a:5, b:2, c:{d:10}}

ですが、この時に落とし穴が見つかります。それは証明されています

オブジェクトの浅いコピーのみを実装します

もう 1 つ注意すべきことは、列挙不可能であることです。プロトタイプ チェーンに属性を持つオブジェクトはコピーできません。コードを見てください。 :

var x = { a: 1, }; var y = Object.create(x, { b: { value: 2, }, c: { value: 3, enumerable: true, }, }); var z = Object.assign({}, y); console.log(z); //{c:3}

の値を取得するのは驚くべきことです。なぜならxはyのプロトタイプ チェーンであるため、#xxはコピーされません属性b

c

上記の落とし穴も非常にうまく解決でき、以下のようになります。深いコピーJSON.parse(JSON.stringify())

var x = { a: 1, b: 2, c: { d: 3, }, }; y = JSON.parse(JSON.stringify(x)); x.a = 5; x.c.d = 10; console.log(x); //{a:5, b:2, c:{d:10}} console.log(y); //{a:1, b:2, c:{d:3}}

ログイン後にコピー

もちろん、通常のオブジェクトの場合、このコピー方法は基本的には完璧なので、落とし穴はどこにありますか

var x = { a: 1, b: function b() { return "2"; }, }; y = JSON.parse(JSON.stringify(x)); z = Object.assign({}, x); console.log(y); //{a:1} console.log(z); //{a:1, b:function b(){return '2'}}

ログイン後にコピー

Object.assign()

JSON.parse(JSON.stringify())

2 つ目の落とし穴を見てみましょう。落とし穴:

var x = { a: 1, b: { c: 2, d: 3, }, }; x.c = x.b; x.d = x.a; x.b.c = x.c; x.b.d = x.d; var y = JSON.parse(JSON.stringify(x)); console.log(x); /* Uncaught TypeError: Converting circular structure to JSON at JSON.stringify () at :8:25 */

Object.assign()

var x = { a: 1, b: { c: 2, d: 3, }, }; x.c = x.b; x.d = x.a; x.b.c = x.c; x.b.d = x.d; var y = Object.assign({}, x); console.log(x); /* [object Object]{ a:1, b:[object, Object], d:[object, Object], d:1 } */

...]

ECMAScriptのフェーズ 3 提案により、オブジェクトのコピーがより簡単になります

var x = [ "a", "b", "c", "d", { e: 1, }, ]; var y = [...x]; console.log(y); //['a', 'b', 'c', 'd', {'e':1}] var m = { a: 1, b: 2, c: ["d", "e"], }; var n = { ...m, }; console.log(n); //{a:1, b:2, c:['d', 'e']}

ログイン後にコピー

自分の車輪を発明する:

function copy(x) { var y = {}; for (m in x) { y[m] = x[m]; } return y; } var o = { a: 1, b: 2, c: { d: 3, e: 4, }, }; var p = copy(o);

var x = {}; Object.defineProperty(x, "m", { value: 5, writable: false, }); console.log(x.m); //5 x.m = 25; //这一步没报错，但是也没执行 console.log(x.m); //5

##[終了]

推奨学習:

以上がJavaScript のオブジェクト コピー メソッドの詳細な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。