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 のその他のコンテンツにも注目していただければ幸いです。