JavaScript のディープコピーの落とし穴

JavaScript のディープコピーの落とし穴

序文

以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいですか?」という質問を受けました。その時、私は密かに嬉しく思いました。こんな単純な疑問を考える必要があるのでしょうか?そこで私はこう言いました。「よく使われる方法は 2 つあります。1 つ目は JSON.parse(JSON.stringify(obj)) を使用する方法で、2 つ目は for...in と再帰を使用する方法です。」これを聞いた面接官はうなずき、満足そうでした。
当時はこの問題についてあまり気にしていませんでしたが、しばらく前にもう一度考えてみると、上記の両方の方法にバグがあることがわかりました。

質問する

では、上で述べたバグとは何でしょうか?

特殊オブジェクトのコピー

まず、共通の型を考慮せずに、次のメンバーを持つオブジェクトを想像してみましょう。

定数オブジェクト = {
    編曲: [111, 222],
    obj: {キー: 'オブジェクト'},
    a: () => {console.log('function')},
    日付: 新しい Date(),
    登録: /regular/ig
}

次に、上記の2つの方法をそれぞれ使用してコピーします。

JSON メソッド

JSON.parse(JSON.stringify(obj))

出力:

obj 内の通常のオブジェクトと配列の両方をコピーできることがわかりますが、日付オブジェクトは文字列になり、関数は直接消え、正規表現は空のオブジェクトになります。
再帰を使ったfor...inメソッドを見てみましょう

再帰

関数isObj(obj) {
    戻り値 (typeof obj === 'オブジェクト' || typeof obj === '関数') && obj !== null
}
関数 deepCopy(obj) {
    tempObj = Array.isArray(obj) ? [] : {} とします。
    for(let key in obj) {
        tempObj[key] = isObj(obj[key]) ? deepCopy(obj[key]) : obj[key]
    }
    tempObjを返す
}

結果:

結論は

上記のテストから、これら 2 つのメソッドは function、date、reg タイプのオブジェクトをコピーできないことがわかります。

  • 指輪

リングとは何ですか?

ループはオブジェクト間の循環参照であり、閉じたループになります。たとえば、次のオブジェクトがあります。

var a = {}

aa = ア

上記の2つの方法でコピーすると、エラーが直接報告されます。

解決

  • 指輪

コピーされたオブジェクトを格納するために WeakMap 構造体を使用することができます。オブジェクトをコピーするたびに、WeakMap を照会して、オブジェクトがコピーされたかどうかを確認します。コピーされた場合は、オブジェクトを取り出して返します。deepCopy 関数を次のように変換します。

関数 deepCopy(obj, hash = new WeakMap()) {
    hash.has(obj) の場合、hash.get(obj) を返します。
    cloneObj = Array.isArray(obj) ? [] : {} とします。
    ハッシュを設定します(obj、クローンObj)
    for (let key in obj) {
        cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
    }
    cloneObjを返す
}

リング結果をコピー:

特殊オブジェクトのコピー

この問題の解決法は、特別に扱う必要があるオブジェクトの種類が多すぎるため、かなり複雑です。そこで、MDN の構造化コピーを参照し、それをリングの解決法と組み合わせました。

// 日付と登録型のみを解決し、他の型は自分で追加できます。 function deepCopy(obj, hash = new WeakMap()) {
    cloneObj を作ろう
    コンストラクタ = obj.constructor
    switch(コンストラクタ){
        ケース正規表現:
            cloneObj = 新しいコンストラクタ(obj)
            壊す
        事件日:
            cloneObj = 新しいコンストラクタ(obj.getTime())
            壊す
        デフォルト:
            hash.has(obj) の場合、hash.get(obj) を返します。
            cloneObj = 新しいコンストラクタ()
            ハッシュを設定します(obj、クローンObj)
    }
    for (let key in obj) {
        cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
    }
    cloneObjを返す
}

コピー結果:

完全版については、lodash deep copyをご覧ください。

  • 関数のコピー

ただし、MDN の構造化コピーでは、関数のコピーの問題は依然として解決されません。

これまでは関数をコピーするために eval メソッドを使うことしか考えていませんでしたが、この方法はアロー関数にしか機能しません。fun(){} の形式だと失敗します。

関数をコピーして関数タイプを追加する

結果をコピー

エラーの種類

追記

JavaScript のディープ コピーには、上記で説明した問題以外にも多くの問題があります。もう 1 つの問題は、プロトタイプ チェーン上のプロパティをどのようにコピーするかということです。列挙不可能なプロパティをコピーする方法、エラー オブジェクトをコピーする方法などについては、ここでは詳しく説明しません。

ただし、日常生活では依然として JSON メソッドを使用することをお勧めします。このメソッドはほとんどのビジネス ニーズをカバーしているため、単純なことを複雑にする必要はありません。ただし、面接中に細かいことを気にする面接官に遭遇した場合、この質問に対する答えは間違いなく面接官の印象を良くするでしょう。

これで、JavaScript ディープ コピーの落とし穴に関するこの記事は終了です。JavaScript ディープ コピーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptの浅いコピーと深いコピーについての簡単な説明
  • js における浅いコピーと深いコピーの詳細な説明
  • JS変数ストレージのディープコピーとシャローコピーの詳しい説明
  • JS オブジェクトのコピー (ディープ コピーとシャロー コピー)
  • JSのディープコピーとシャローコピーの詳しい説明
  • jsのディープコピーを理解しましょう

<<:  alpineをベースにdockerfileで作成したクローラーScrapyイメージの実装

>>:  mysql mycat ミドルウェアのインストールと使用

推薦する

シンプルなウェブページレイアウトの構造と表現原理の共有

構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...

React サーバーサイドレンダリング原則の分析と実践

ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...

純粋な CSS で中空効果を実現するためのサンプルコード

私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...

Linux のロード vmlinux デバッグ

gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...

Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます

Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます。以下の操作はすべて...

Centos7でmysql5.7.19のデータ保存場所を移動する方法

シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...

JavaScript を使用して動的に生成されるテーブルの詳細な説明

*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

CentOS MySQLデータベースのスケジュールバックアップを実装する方法

次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...

Linux でのマルチスレッドおよびマルチプロセス クラッシュのシミュレーションに関する簡単な説明

結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...

nginx keepaliveの具体的な使い方

http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...

Baidu の https 認証プロンプト「http サイトを 301 から https サイトにリダイレクトしてください」の解決方法の詳細な説明

最近、ウェブサイトを https アクセスに変換したいのですが、すべて完了した後、Baidu Web...

UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題

最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...

html、xhtml、xmlの違い

開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...

Vue-cli を使用して Vue プロジェクトを構築する手順の詳細な説明

まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...