js ディープコピー本題に入る前に、データがどのように保存されるかを理解する必要があります。 データ保存方法それについて説明する前に、まず値型と参照型がどのように格納されるかを知っておく必要があります。 JavaScript には 2 種類のデータがあります。 値の型: スタックメモリに格納される単純なデータセグメントで、データサイズが決定され、メモリ空間のサイズを割り当てることができます。 参照データ型: ヒープ メモリに格納されているオブジェクトの場合、ポインターはスタック メモリに格納され、このポインターはヒープ メモリ内の場所を指します。次に、ヒープ メモリから必要なデータを取得します。 ストレージは次のとおりです。 浅いコピー/深いコピーとは何か保存方法についてお話しした後は、浅いコピーと深いコピーについてお話ししましょう コピーはよくコピー、ctrl+c、ctrl+vなどと呼ばれますが、例を見てみましょう 値型と参照型にそれぞれ値を割り当てる場合。 変数a = 5 var b = a b += 5 コンソールログ('a=' + a,'b=' + b) var arr = [1,2,3] var brr = arr brr.push(10) console.log("arr は",arr) console.log("brr is",brr) 現象:値型は互いに影響を及ぼさないが、配列(参照型)brr配列は要素を追加するとarr配列を変更することがわかりました。 説明と分析: 浅いコピーは参照型でのみ発生します。参照型で単純な割り当てを実行すると、ヒープ メモリへのポインターのみが割り当てられます。これを浅いコピーと呼びます。ディープ コピーは、アドレス ポインターではなく、参照型の完全なコピーです。 次の回路図の浅いコピーを取得します。 一般的なディープコピーの実装したがって、参照型を割り当てるときは、元のデータに影響を与える浅いコピーを作成してはなりません。次にディープコピーを行う必要があります 1. JSON.stringifyとJSON.parseを通じて配列とオブジェクトは深くコピーできますが、関数はコピーできません。オブジェクトまたは配列のネストされたコピーを作成できます。 デメリット: オブジェクト内のメソッドのディープコピーは不可能 使用: var brr = JSON.parse(JSON.stringify(arr)) 例: var arr = { 名前:「ロマンティック コーダー」 年齢: 20, 住所: ['江西', '長沙'], 友達: 友人1: '張三'、 友人2: '李思' }, 関数(){ console.log("私はロマン主義の対象です") } } var brr = JSON.parse(JSON.stringify(arr)) brr.name='無法犯罪者、張三' brr.adress[0]='長沙' console.log("arr は", arr) console.log("brr is", brr) 2. スプレッド演算子オブジェクトの構造割り当て機能方式を活用します。 デメリット: オブジェクト内のネストされたオブジェクトのディープコピーはありません。これは、参照オブジェクトの1つのレイヤーのみをディープコピーするのと同じです。 使用: var brr = {...arr} 例: var arr = { 名前:「ロマンティック コーダー」 年齢: 20, 住所: ['江西', '長沙'], 友達: 友人1: '張三'、 友人2: '李思' }, 関数(){ console.log("私はロマン主義の対象です") } } var brr = {...arr} brr.name='無法犯罪者、張三' brr.adress[0]='長沙' console.log("arr は", arr) console.log("brr is", brr) 3. 手書きの再帰的なディープコピー機能完璧な解決策 関数: //再帰を使用してディープコピーを実装する function deepClone(obj) { //コピーされた obj がオブジェクトか配列かを判断します var objClone = Array.isArray(obj) ? [] : {}; if (obj && typeof obj === "object") { //obj は空にできず、null もオブジェクトであるため、オブジェクトまたは配列である必要があります。 for (キー in obj) { obj.hasOwnProperty(キー) の場合 { if (obj[key] && typeof obj[key] === "object") { //objの属性値は空ではなく、まだオブジェクトなので、ディープコピーを作成します。objClone[key] = deepClone(obj[key]); //再帰的にディープコピーを作成します。} else { objClone[key] = obj[key]; //直接コピー} } } } objClone を返します。 } 例: var arr = { 名前:「ロマンティック コーダー」 年齢: 20, 住所: ['江西', '長沙'], 友達: 友人1: '張三'、 友人2: '李思' }, 楽しい: 関数(){ console.log("私は " + this.name + " のオブジェクトです") } } var brr = deepClone(arr) brr.name = '無法者張三' brr.adress[0] = '長沙' console.log("arr は", arr) arr.fun() console.log("brr is", brr) brr.fun() //再帰を使用してディープコピーを実装する function deepClone(obj) { //コピーされた obj がオブジェクトか配列かを判断します var objClone = Array.isArray(obj) ? [] : {}; if (obj && typeof obj === "object") { //obj は空にできず、null もオブジェクトであるため、オブジェクトまたは配列である必要があります。 for (キー in obj) { obj.hasOwnProperty(キー) の場合 { if (obj[key] && typeof obj[key] === "object") { //objの属性値は空ではなく、まだオブジェクトなので、ディープコピーを作成します。objClone[key] = deepClone(obj[key]); //再帰的にディープコピーを作成します。} else { objClone[key] = obj[key]; //直接コピー} } } } objClone を返します。 } 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ユーザー エクスペリエンス デザイナーとは誰ですか?
cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...
序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...
目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...
次のケースでは、これまでに学んだプロトタイプチェーンの知識ポイントを確認します。 // コンストラク...
テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...
初心者が div+css を開発する場合、.ggg、#ccc などの形式の CSS 疑似クラス名を付...
目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...
問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...
Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...
背景最近、面接でデータベース トランザクションについてよく質問されます。通常は、@Transacti...
Vueイメージドラッグアンドドロップズームコンポーネントの具体的な使い方は参考までに。具体的な内容は...
序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...
背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...
前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...
目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...