JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル オブジェクトに割り当てる場合に非常に便利です)

最初の方法: 手動割り当て (非常に良い)

定数obj1 = {
  名前: "zs",
  年齢: 13,
};
定数obj2 = {
  名前: "ls",
  性別:「女性」、
};
obj1 の名前 = obj2 の名前;
obj1 の性別 = obj2 の性別;

この方法は最も簡単ですが、日常のプロジェクトではオブジェクトに多くのプロパティがあるため、この方法を引き続き使用すると少し面倒になります。

2番目: 拡張演算子

定数obj1 = {
  名前: "zs",
  年齢: 13,
};
定数obj2 = {
  名前: "ls",
  性別:「女性」、
};
定数 newObj = { ...obj1, ...obj2 };
console.log(newObj === obj1); //false
console.log(newObj === obj2); //false

スプレッド演算子を使用すると、オブジェクトを素早くマージできます。欠点は、新しい変数を使用して結果を受け取る必要があることです。

3番目の方法: Object.assign() (最も推奨)

定数obj1 = {
  名前: "zs",
  年齢: 13,
};
定数obj2 = {
  名前: "ls",
  性別:「女性」、
};
obj1 と obj2 をオブジェクトに代入します。
console.log(newObj === obj1); //true
console.log(newObj === obj2); //false
コンソールにログ出力します。
// {
// 名前:'ls',
//年齢:13,
// 性別:'女性'
// }

Object.assign() メソッドは、ターゲット オブジェクトと 1 つ以上のソース オブジェクトをパラメーターとして受け取ることができます。オブジェクトが同じプロパティを持つ場合、後者のオブジェクトのプロパティが前者のオブジェクトのプロパティを上書きします。

原則としては、設定されたアクセス属性を通じて後続のオブジェクトをターゲット オブジェクトに追加するため、最終的に返される値は実際には最初のターゲット オブジェクトになります。ターゲット オブジェクトにアクセス属性を追加して、上書きプロセスを確認できます。

定数obj1 = {
  設定する(値) {
    コンソールログ(val);
  },
};
オブジェクトを割り当てます(obj1、{a: "トム" }、{a: "ジェリー" }、{a: "犬" });
//'トム'
//'ジェリー'
//'犬'

この方法は多くのシナリオで使用でき、特に次のような場合に便利です。

1.vueプロジェクトのクリアフォーム

学生の中には、フォーム内のデータに空の値を一つずつ割り当ててフォームをクリアする人もいるかもしれません。実際、効率は非常に低いです。しかし、Object.assign() と $options を一緒に使用すると、効率は非常に高くなります。

// 毎日 this.ruleForm.name='';
this.ruleForm.phone='';
this.ruleForm.imgUrl='';
this.ruleForm.des='';
...ここでは10,000語を省略 // Object.assignと$optionsを使用する
オブジェクト.assign(this.ruleForm,this.$options.data)

ヒント: $options は Vue インスタンスの初期値を保存するので、Object.assign() の上書き値機能を使用して、フォームをすばやくリセットできます。同様に、フォーム データを変更する場合は、ページの ruleForm をすばやく割り当てることもできます。

const {データ} = xxxApi.getList() を待機します。
オブジェクトにルールを割り当てます(this.ruleForm、データ)。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • jsは複数のオブジェクトを1つのオブジェクトにマージし、メソッドの実装を割り当てます
  • JavaScript で 2 つの配列オブジェクトを結合する方法
  • Javascript オブジェクトマージ操作例の分析
  • JavaScriptにおける配列結合方法とオブジェクト結合方法の詳しい説明
  • JavaScript で 2 つの Json オブジェクトを結合する方法の例

<<:  CentOS8.1 で Gitlab サーバーを構築するための詳細なチュートリアル

>>:  MySQL 学習ノート: 完全な SELECT ステートメントの使用例と詳細な説明

ブログ    

推薦する

Vueはシンプルな計算機能を実装します

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...

Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...

Dockerのプロセスとイメージを実行するための基本コマンドの詳細な説明

目次1. ワークフローを実行する2. ミラーリングの基本コマンド1. ワークフローを実行するDock...

「@INC で ExtUtils/MakeMaker.pm が見つかりません」というエラーを解決する

mha4mysql をインストールする場合の手順は、おおよそ次のようになります: unzip、per...

MySQL ストレージ エンジン MyISAM と InnoDB の違いの概要

1. MySQLのデフォルトストレージエンジンの変更MySQL 5.1 より前のバージョンでは、デフ...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

MySQL の自己結合重複排除に関する注意事項

機能シナリオを簡単に説明しましょう。データ行フィールドは次のとおりです。名前開始日時タイプこの表では...

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

MySQL ページングクエリ最適化テクニック

ページング クエリを使用するアプリケーションでは、LIMIT と OFFSET を含むクエリが非常に...

Linuxのファイル操作の知識ポイントを詳しく解説

ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...

Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...

将来最も成功する企業はテクノロジー企業でしょうか、それともデザイン企業でしょうか?

ムーアの法則はもはや適用されない2004年にフレックストロニクスがフロッグデザインを買収したのを皮切...

iFrameは背景を覆うポップアップレイヤーとして使うのに最適です

最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...

Vue3 Vue イベント処理ガイド

目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...

Navicat による MySQL パーティショニングの実践

MySQLのパーティショニングは、非常に大きなテーブルを管理するのに役立ちます。MySQLのパーティ...