JavaScriptはオブジェクトの不要なプロパティを削除します

JavaScriptはオブジェクトの不要なプロパティを削除します

Thinking シリーズは、10 分で実用的なプログラミングのアイデアを伝えることを目的としています。

ビジネス開発では、バックエンドから返されたインターフェース データに基づいて、フロントエンドがそれをオブジェクト オブジェクトに保存するという状況によく遭遇します。フロントエンドの開発プロセスでは、いくつかのシナリオの利便性のために、オブジェクトに対応する属性を追加する必要がありますが、これらの属性はバックエンドにとって無意味であるため、保存して送信するときに削除することを望みます。

実際のビジネスコード: 保存する前に、対応する*Valueフィールドを削除する必要があります

非同期saveData(タイプ、データ){
  // 送信時に余分なフィールドを削除する削除 data.isCommonValue
  データを削除する。isRemoteValue
  これを待ちます。$request({
    ...API.EDIT_SERVICE、
    メソッド: type === 'add' ? 'post' : 'put',
    データ
  })
}

上記は一般的な書き方ですが、シナリオによっては最善の方法ではなく、副作用が生じる可能性があります。例として以下を説明します。

上記の状況をよりわかりやすく示すために、例を書き直します (実装を説明するためだけに)。

人 = {
  id: '001',
  名前: 'リガン', 
  メールアドレス: '[email protected]'
}

リクエスト: バックエンドに送信するときに、電子メール フィールドを削除する必要があります。

方法1: 削除

上記のビジネスコード処理方法と同じ

person.email を削除する
console.log(person) // {id: '001', name: 'ligang'}

元のデータ内の関連属性も削除されます。

Reflect.deleteProperty()使用すると、上記の delete と同じ動作でプロパティを削除できます。

Reflect.deleteProperty(人、'メール')

方法2: 分解

元のオブジェクトが参照される場合の副作用を回避しながら、新しいオブジェクトを形成します。

{id, name} = 人とする
newPerson = {id, name} とします。
console.log(newPerson) // {id: '001'、名前: 'ligang'}

元のデータへの参照は切り取られます。この方法は、保持される属性が少ない場合には単純で理解しやすいですが、保持される属性が多すぎる場合には複雑になります。

{email, ...newPerson} = 人とする
console.log(newPerson) // {id: '001'、名前: 'ligang'}

元のデータへの参照は切り取られます。この方法は、保持する属性の数が多い場合には単純で理解しやすいですが、保持する属性の数が少ない場合には複雑になります。

補充する

Vue では、既に作成されたインスタンスにルートレベルのレスポンシブ プロパティを動的に追加することはできません。以下の方法は無効です。

this.$set(this, 'email', '')
this.$set(this.$data, 'email', '')

要約する

実際の使用においては、元のデータに影響を与えないように方法 2 を使用することを強くお勧めします。特に mvvm フレームワークでは、元のデータが応答していることが多いです。delete delete/deleteProperty 「応答関係」を切断することを意味し、削除操作後のデータ応答に問題が発生します。

ここに画像の説明を挿入

データ () {
  戻る {
    人:
      名前: 'リガン',
      メールアドレス: '[email protected]'
    }
  }
},
メソッド: {
	削除プロパティ() {
  	この人物のメールを削除
    // this.$delete(this.person, 'email')
	},
  プロパティを追加します(){
  	this.person.email = 'xxx'
    this.$set(this.person, 'address', 'xxx')
  }
}

1. delete操作を実行すると、js オブジェクトの属性は削除されますが、ページは時間内に応答しません。削除によって更新ビューがトリガーされるようにするには、vue で this.$delete() を使用します。

2. add操作を実行して、電子メールとアドレスの属性を再度追加します。

1. this.person.email = 'xxx'は応答しません

2. this.$set(this.person, 'address', 'xxx')レスポンシブです

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

以下もご興味があるかもしれません:
  • JavaScript のオブジェクトを理解する
  • Javascript のオブジェクトの詳細な説明
  • JavaScriptオブジェクトの詳細な概要
  • JS でオブジェクト属性が存在するかどうかを判断する 5 つの方法
  • JavaScriptカスタムオブジェクトメソッドの概要
  • springboot post インターフェースが json を受け入れる場合、それがオブジェクトに変換されると、プロパティはすべて null になります。
  • JavaScript でよく使われる 5 つのオブジェクト
  • 複雑なJSON文字列をJavaのネストされたオブジェクトに変換する実装
  • JavaScriptオブジェクトの追加、削除、変更、クエリのアプリケーションと例を理解する

<<:  純粋な CSS3 でペットの鶏のサンプルコードを実現

>>:  MySQLデータベースでコマンドを自動補完する3つの方法

推薦する

Tudou.com フロントエンドの概要

1. 分業とプロセス<br />Tudou.comでは、プロジェクト開発が中核であり、誰...

Javascriptの基礎を学ぶための10の重要な質問

目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...

Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...

CSSクラス名の問題の詳細な説明

数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...

ハイパーリンクを開くターゲットのテスト

リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...

Nest.js 環境変数の設定とシリアル化の詳細な説明

環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...

Navicat for MySQL チュートリアル

まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...

VUE ユニアプリの基本コンポーネントの簡単な紹介

1. スクロールビュー垂直スクロールを使用する場合は、固定の高さを指定して CSS で高さを設定する...

MySQLデータベースが大きすぎる場合にバックアップと復元を行う方法

コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...

ロンボク実装 JSR-269

序文導入Lombok は、Google Guava と同様に便利なツールであり、強くお勧めします。す...

MySQLにおけるSQLの実行順序についてのちょっとした質問

今日、仕事中に左結合に関するSQLの問題に遭遇しました。後で解決しましたが、この問題を通じてSQLの...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

Linux DockerでSpringbootプロジェクトを実行するための詳細な手順

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...

MySQLデータを復元する2つの方法

1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...