序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいですか?」という質問を受けました。その時、私は密かに嬉しく思いました。こんな単純な疑問を考える必要があるのでしょうか?そこで私はこう言いました。「よく使われる方法は 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 ミドルウェアのインストールと使用
構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...
ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...
私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...
gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...
Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます。以下の操作はすべて...
シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...
*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...
目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...
次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...
結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...
http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...
最近、ウェブサイトを https アクセスに変換したいのですが、すべて完了した後、Baidu Web...
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...
開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...
まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...