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 ユーザー グループと権限の概要

推薦する

jsはショッピングカートの加算と減算、価格計算を実装します

この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...

HTML/CSS におけるフロートの使用例の詳細

1. floatの基本的な使用例1. まず 2 つの div ボックスを作成し、高さ、幅、背景色を設...

ウェブページの読み込み進捗状況バーの詳細な説明(推奨)

(Web ページの読み込み中に、コンテンツが多すぎて読み込みと待機が続くことがあります。このとき、...

JavaScriptオフセットは、ウィンドウ内でのマウス座標の取得とモジュールのドラッグを実装します。

オフセットOffset はオフセットです。関連プロパティの offset シリーズを使用すると、次の...

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...

JavaScript プロトタイプのデータ共有とメソッド共有の実装を調べる

データ共有プロトタイプにはどのようなデータを書き込む必要がありますか?共有する必要があるデータはプロ...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル

vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...

JSはタイムラインの自動再生を実現する

最近、次のような効果を実装しました。再生ボタンをクリックするとタイムラインの再生が開始され、一時停止...

mysql MDLメタデータロックの詳細な分析

序文: MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...

Angular Cookie の読み取りおよび書き込み操作コード

Angular Cookie の読み取りおよび書き込み操作のコードは次のようになります。 var a...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文JS の this ポインターは、初心者にとって常に頭痛の種でした。今日は、これが地面に落ちたと...

MySQL ログイン エラーを解決する: 'ユーザー 'root'@'localhost' へのアクセスが拒否されました

まず、コマンドラインまたはワークベンチを使用して MySQL にログインできず、「ユーザー '...

HTML(divレイヤー)を介してFLASHにリンクを追加するための実装コード

今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...

リンクされた画像をダウンロードしてアップロードするJavaScriptの実装

写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...