JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

1. 浅いコピー

1. Object.assign(ターゲット、ソース、ソース...)

a. 複数オブジェクトのレプリケーションをサポート

b. ソース属性とターゲット属性が同じ場合、ソースはターゲット属性をコピーします。

c. ターゲットはObjectオブジェクトのみ

var obj = {a:1,b:2}
未定義
オブジェクトに代入します({c:3},obj)
{c: 3、a: 1、b: 2}
オブジェクト
{a: 1、b: 2} 
互換性の記述 if (Object.assign) {//compatible} else {//incompatible}

2. スプレッド演算子

複数のオブジェクトを 1 つのオブジェクトにコピーすることをサポートします。

var obj1 = { foo: "foo" };
var obj2 = { bar: "バー" };
 
var copySpread = { ...obj1, ...obj2 }; // オブジェクト {foo: "foo", bar: "bar"}
コピー拡散 
{foo: "foo"、bar: "bar"}
var obj = {a:1,b:2,c:3}
var objs = {...obj}
オブジェクト
{a: 1、b: 2、c: 3}
オブジェクトa=10
10
オブジェクト
{a: 10、b: 2、c: 3}
オブジェクト
{a: 1、b: 2、c: 3}

2. ディープコピー

1. オブジェクトシリアル化JSON.stringify()とJSON.parse()を使用する

注: このメソッドは、元のオブジェクトにシリアル化可能な値型が含まれており、循環参照がない場合にのみ機能します。シリアル化できない値タイプの例としては、Date オブジェクトがあります。JSON.parse はこれを文字列に解析することしかできず、元の Date オブジェクトやプロパティ値が関数であるオブジェクトに戻すことはできません。

var obj = {a:1,b:[1,2,3],c:{e:3},bool:false}
未定義
var objs = JSON.parse(JSON.stringify(obj))
未定義
オブジェクト
{a: 1、b: 配列(3)、c: {…}、bool: false}
objs.bool = true
真実
オブジェクト
{a: 1、b: 配列(3)、c: {…}、bool: true}
オブジェクト
{a: 1、b: 配列(3)、c: {…}、bool: false}

2. 再帰を使用してオブジェクトのプロパティを判断する

関数 deepClone(obj) {
  var コピー;
 
  // obj が null、undefined、またはオブジェクトでない場合は、obj を直接返します
  // 3つの単純な型とnullまたはundefinedを処理します
  if (null == obj || "object" != typeof obj) の場合、obj を返します。
 
  // 日付を処理する
  if (obj インスタンス 日付) {
    コピー = new Date();
    コピー.setTime(obj.getTime());
    コピーを返す;
  }
 
  // 配列を処理する
  if (obj インスタンスの配列) {
    コピー = [];
    (var i = 0, len = obj.length; i < len; i++) の場合 {
        コピー[i] = クローン(obj[i]);
    }
    コピーを返す;
  }
 
  //ハンドル関数
  if (obj インスタンスオブ関数) {
    コピー = 関数() {
      obj.apply(this, arguments) を返します。
    }
    コピーを返す;
  }
 
  //オブジェクトを処理する
  if (obj インスタンスオブオブジェクト) {
      コピー = {};
      (var attr in obj) {
          obj.hasOwnProperty(attr) がある場合、copy[attr] を clone(obj[attr]) します。
      }
      コピーを返す;
  }
 
  throw new Error("型がサポートされていないため、obj をコピーできません " + obj.constructor.name);
}

以上がJSオブジェクトのコピー(ディープコピーとシャローコピー)の詳細です。JSの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください!

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

<<:  Linux で binlog ファイルの作成時間を表示するコマンド

>>:  Linux ユーザー グループと権限の概要

推薦する

JavaScript axiosのインストールとパッケージ化のケースの詳細な説明

1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...

HTML の div と span の違い (共通点と相違点)

共通点: DIV タグと SPAN タグは、コンテンツ全体を非表示にしたり、コンテンツ全体を移動した...

MySQLセグメンテーション関数substring()の具体的な使用法

MySQL には、主に left()、right()、substring()、substring_i...

Vueコンポーネントは、写真やビデオをアップロードするためのサンプルコードをカプセル化します

まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...

Vue ユニットテストに関する予備調査

目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...

WeChatミニプログラムをTencent Mapsに接続する2つの方法

最近、WeChat アプレットを作成しているのですが、いくつか問題が発生しました。インターネットでい...

Linux で AIDE に基づいてファイルシステムの整合性を検出する方法

1. 補助AIDE (Advanced Instruction Detection Environm...

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

MybatisはSQLクエリのインターセプションと変更の詳細を実装します

序文インターセプターの機能の 1 つは、特定のメソッドの呼び出しをインターセプトできることです。イン...

ElementUI の el-dropdown に複数のパラメータを実装する方法

最近、業務上のボタンの増加により、ページレイアウトにボタンが多すぎて、ページが美しくなく、ユーザーエ...

ie8/ie9/ie10/ie11 chrome firefox を区別するための CSS コード

ウェブサイトの互換性のデバッグは本当に面倒です。今日のウェブサイト デザイナーは、以前よりもはるかに...

HTML の類似タグと属性の違いの詳細な説明

【1】<i></i>タグと<em></em>タグ同じ...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...

MySQL トランザクション分離はどのように実現されますか?

目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...