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

推薦する

MySQL で URL タイムゾーンの罠を回避する方法

序文最近、MySQL 6.0.x 以降の jar を使用する場合、コード URL リンクで serv...

Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明

序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...

Vue開発の詳細な説明 ソートコンポーネントコード

目次 <テンプレート> <ul class="コンテナ">...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...

JavaScriptでよく使われる配列重複排除実戦ソースコード

アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...

WeChatアプレットがチャットルーム機能を実現

この記事では、参考のために、WeChatアプレットのチャットルームを実装するための具体的なコードを例...

MySQL データ型における DECIMAL の使用法の詳細な説明

MySQL データ型における DECIMAL の使用法の詳細な説明MySQL のデータ型には、INT...

Ubuntu 20.04 LTS で Java 開発環境を構成する

Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...

MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...

Angularプロジェクトにおける共有モジュールの実装の詳細な説明

目次1. 共有共通モジュール2. 共有マテリアルモジュール3. 共有確認ダイアログ1. 共有共通モジ...

Vue プロジェクトにインターフェース リスニング マスクを追加する方法

1. 事業背景マスク レイヤーを使用してユーザーの異常な操作を遮断する方法は、フロントエンドでよく使...

シェルを使用して複数のサーバーでバッチ操作を実行する方法

目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...

オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)

アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...

Angularルーティングの基礎の詳細な説明

目次1. ルーティング関連オブジェクト2. ルーティングオブジェクトの場所3. ルーティング構成4....

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...