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 ミドルウェアのインストールと使用

推薦する

順序再構築に関する簡単な説明: MySQL シャーディング

目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...

Vue は Websocket カスタマー サービス チャット機能を実装します

この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

MySQL 5.7.17 zip インストールおよび設定チュートリアル MySQL 起動失敗の解決策

MySQL 5.7.17、現在最新バージョンのようです、ダウンロードアドレスここで、プラットフォーム...

HTMLベースの複数画像アップロードのプレビュー機能を実装

最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的...

ナビゲーションバーのドロップダウンメニューのサンプルコードを実装するためのHTML+CSS

効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ​...

MySQL インデックスクエリ最適化スキルを習得するための記事

序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...

Linux カーネル デバイス ドライバー システム コールに関する注意事項

/**************************** * システムコール**********...

Vueはechartsに基づいて3次元の縦棒グラフを実装します

3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...

Alibaba Cloud Nginx はドメイン名アクセス プロジェクトを実装するために https を設定します (グラフィック チュートリアル)

ステップ1: サードパーティの信頼できるSSL証明書に署名するAlibaba Cloud で直接、無...

Linuxシステムの操作レベルの詳細な紹介

目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...

テーブルレイアウトの長所と短所、そして推奨されない理由

テーブルの欠点1. テーブルは他の HTML タグよりも多くのバイトを占有します。 (ダウンロード時...

Linux ディスク管理 LVM の使用

1. LVM の概要Linux ディスクを管理するときに、このような状況に遭遇することがよくあります...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...