序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいですか?」という質問を受けました。その時、私は密かに嬉しく思いました。こんな単純な疑問を考える必要があるのでしょうか?そこで私はこう言いました。「よく使われる方法は 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 内の通常のオブジェクトと配列の両方をコピーできることがわかりますが、日付オブジェクトは文字列になり、関数は直接消え、正規表現は空のオブジェクトになります。 再帰 関数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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: alpineをベースにdockerfileで作成したクローラーScrapyイメージの実装
>>: mysql mycat ミドルウェアのインストールと使用
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...
1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...
MySQL 5.7.17、現在最新バージョンのようです、ダウンロードアドレスここで、プラットフォーム...
最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的...
効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ...
序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...
/**************************** * システムコール**********...
3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...
ステップ1: サードパーティの信頼できるSSL証明書に署名するAlibaba Cloud で直接、無...
目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...
テーブルの欠点1. テーブルは他の HTML タグよりも多くのバイトを占有します。 (ダウンロード時...
1. LVM の概要Linux ディスクを管理するときに、このような状況に遭遇することがよくあります...
目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...