jsのディープコピーを理解しましょう

jsのディープコピーを理解しましょう

js ディープコピー

本題に入る前に、データがどのように保存されるかを理解する必要があります。

データ保存方法

それについて説明する前に、まず値型と参照型がどのように格納されるかを知っておく必要があります。

JavaScript には 2 種類のデータがあります。

値の型: StringNumberBooleanNullUndefinedSymbol

スタックメモリに格納される単純なデータセグメントで、データサイズが決定され、メモリ空間のサイズを割り当てることができます。

参照データ型: Object(ArrayFunction

ヒープ メモリに格納されているオブジェクトの場合、ポインターはスタック メモリに格納され、このポインターはヒープ メモリ内の場所を指します。次に、ヒープ メモリから必要なデータを取得します。

ストレージは次のとおりです。

ここに画像の説明を挿入

浅いコピー/深いコピーとは何か

保存方法についてお話しした後は、浅いコピーと深いコピーについてお話ししましょう

コピーはよくコピー、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 のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • jsオブジェクトの浅いコピーと深いコピーの詳細な説明
  • JavaScript配列のディープコピーとシャローコピーの2つの方法
  • JavaScript でのオブジェクトのディープコピー
  • JS の配列のディープコピーの実装方法の分析
  • JavaScriptディープコピー(deepClone)の詳しい説明
  • js ディープコピー関数
  • JavaScript の基本: 浅いコピーと深いコピー (浅いコピーと深いコピー)
  • JSで浅いコピーと深いコピーを実装するためのコードの詳細な説明
  • javascript ディープコピー
  • JavaScriptディープコピーの実装例

<<:  ユーザー エクスペリエンス デザイナーとは誰ですか?

>>:  入力タイプとは何を意味し、入力を制限する方法

推薦する

Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用

cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...

Ubuntu 18.04 のインストールで「ldlinux.c32 のロードに失敗しました」というエラーが表示され、解決手順がわかりません

序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...

Vue ユニットテストに推奨されるプラグインと使用例

目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...

VueとVueComponentの関係の詳細な説明

次のケースでは、これまでに学んだプロトタイプチェーンの知識ポイントを確認します。 // コンストラク...

html+vue+element-ui のスムーズさを 1 分で体験

テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...

CSS疑似クラス名を数字で始めないでください

初心者が div+css を開発する場合、.ggg、#ccc などの形式の CSS 疑似クラス名を付...

clipboard.js の使用法の概要

目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...

Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...

Dockerデータ管理とネットワーク通信の使用

Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...

Mybatisの各SQL文の実行時間の統計

背景最近、面接でデータベース トランザクションについてよく質問されます。通常は、@Transacti...

Vue イメージ ドラッグ アンド ドロップ ズーム コンポーネントの使用方法の詳細な説明

Vueイメージドラッグアンドドロップズームコンポーネントの具体的な使い方は参考までに。具体的な内容は...

プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...

MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...

Vue diffアルゴリズムの完全な分析

目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...