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

推薦する

純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード

導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...

HTML を使用して IE8 および IE9 の互換表示モードを無効にするヒント

IE 8 以降では互換モードが追加され、これを有効にすると IE の下位バージョンでレンダリングされ...

Linux nslookup コマンドの使用方法の詳細な説明

[nslookup とは?] 】 nslookup コマンドは、Linux で非常によく使用されるネ...

HTML での select optgroup タグの使用の概要

時々、選択した内容をグループ化する必要があります。以前はプログラム制御を使用していました。今日、se...

MySQLとPythonの相互作用の例

目次1. データを準備するデータテーブルを作成するデータの挿入2. SQLドリル1. SQL文の強化...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

Vue シングルページ アプリケーションで Markdown レンダリングを実装する

以前、Markdown をレンダリングするときに、mavonEditor のプレビュー モードを使用...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...

JavaScript ESの新機能letとconstキーワードに基づく

目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...

ネイティブ JS 音楽プレーヤー

この記事の例では、音楽プレーヤーを実装するためのJSの具体的なコードを参考までに共有しています。具体...

Centos7 に Docker をインストールします (2020 の最新バージョンが利用可能、コピーして貼り付けるだけ)

操作については、こちらの公式ドキュメントを参照してください。インストール1. 古いバージョンの do...

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...

vue+el-upload は複数ファイルの動的アップロードを実現します

vue+el-upload 複数ファイルの動的アップロード、参考までに具体的な内容は以下のとおりです...

Linux の who コマンド例の紹介

誰についてシステムにログインしているユーザーを表示します。 who コマンドを実行すると、現在システ...

CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...