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

推薦する

HTML+CSS+JS でキャンバスがマウスの小さな円に追従する特殊効果のソースコードを実現

効果(ソースコードは最後にあります): 成し遂げる: 1. タグを定義します。 <h1>...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

カーソル ループを使用して、MySQL ストアド プロシージャで一時テーブルを読み取る

カーソルカーソルは、結果セット内のデータを表示または処理するために使用される方法です。カーソルを使用...

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

nginx で仮想ホストを構成するための詳細な手順

仮想ホストは、インターネット上で実行されているサーバー ホストを複数の「仮想」ホストに分割する特殊な...

HTML におけるメタの役割について (インターネットから収集および分類)

W3Cschoolではこのように説明しています<meta> 要素は、検索エンジン向けの説...

MySQL の完全バックアップ中に特定のライブラリを除外する方法

MySQLの完全バックアップを実行するときは、--all-databaseパラメータを使用します。例...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...

Javascript 操作メカニズム イベントループ

目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...

vite2.0+vue3 モバイルプロジェクトの詳細な説明

1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...

Javascript と Vue を組み合わせて、あらゆる迷路画像の自動パス検索を実現します。

目次序文2次元配列、一方向基本インターフェースのマッピング幅優先、包括的検索マップ編集経路探索アルゴ...

異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

ビューポートの基本原理と詳細な使用方法

1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...