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つの方法

推薦する

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

テキストの折り畳み特殊効果を実現する HTML+CSS の例

この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...

友達やグループを見つけるためのJavaScriptのLayim

現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...

bash のスクリプトデバッグメカニズムの詳細な説明

スクリプトをデバッグモードで実行するbash -x <script> を使用すると、スク...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

MySQL 8.0.11 圧縮版のインストールチュートリアル

この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...

水平スクロールバーを実装する2つの方法の例

序文:プロジェクトの開発中に、1 行にナビゲーション バーが多すぎる場合に水平スクロール バーを実装...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...

Vue3.0 手書きカルーセル効果

この記事では、Vue3.0の手書きカルーセル効果の具体的なコードを参考までに共有します。具体的な内容...

chkconfig および systemctl コマンドを使用して Linux サービスを有効または無効にする方法

これは Linux 管理者にとって重要な (そして素晴らしい) トピックなので、誰もが Linux ...

SQL文でのgroup byの使用について簡単に説明します

1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...

Docker Composeのデプロイと基本的な使い方の詳しい説明

1. Docker Composeの概要Compose は、マルチコンテナ Docker アプリケー...

Linux システムで Tomcat を自動的に起動するための設定方法の紹介

1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...

誰もが登録できるようにJiedaibaoを宣伝するにはどうすればよいでしょうか? ジエダイバオのプロモーション方法とスキル

借財宝は最近人気が出ている携帯電話ローンソフトウェアプラットフォームです。知人同士の貸し借りが特徴で...