フロントエンド作業における一般的な配列データ処理のいくつかのシナリオの概要

1. 配列を変更し、新しい配列を返します。

01. 説明。

私たちの作業では、バックエンドから送信されたデータの一部には空のキー値があるだけでなく、キー (属性名と呼ばれるもの) も含まれていないことがよくあります。その場合は、それを変更して、正常な構造。

02.コード。

const data = [
	{ id: 1, name: 'John' ,age:''},
    { id: 2 },
	{ name: 'Jane' },
	{ id: 3, age: 30 }
];
const filteredData = data.map(item => ({...item, id: item.id || '不存在',age:item.age||'不存在啊1'}));

03. 概要.

Map を使用すると、非常に便利な配列メソッドです。新しい配列を返すことができ、コード量が大幅に削減されます。初心者向けに Map についてよく分からない場合は、es6 の構文を確認して、配列との違いを確認してください。 forEachとforEach。

2. 要素が配列要素の NULL 文字であるかどうかを判断します。

01. 説明。

たとえば、ディクテーションの場合、一部のデータを判定する必要がありますが、すべてのデータ要素を空の文字列にすることはできず、インターフェイスにパラメータを渡すためのコンテンツが必要です。

02. コードの実装。

const data = [
		  { id: 1, name: 'John' ,age:''},
		  { id: 2 },
		  { name: 'Jane' },
		  { id: 3, age: 30 }
		];
		let tag = ''
		const ss = ['id','name','age']
		for(let i=0;i<data.length;i++){
			for(let j=0;j<ss.length;j++){
				if(data[i][ss[j]]===''){
					tag = true
					break
				}
			}
		}
		console.log(tag);

03. 概要.

二重 for ループは仕事で非常に一般的に使用されるため、真剣に受け止める必要があります。

大きなコーヒーが通りかかります。気に入ったら、親指を立ててください。どうもありがとう!

3. Object.keys() メソッドを使用してオブジェクトのコピーを作成します。

01. 説明。

オブジェクトをコピーする必要がある場合、そのオブジェクトが空のオブジェクトかどうかを知り、それに対して forIN トラバーサルを実行する必要があり、多くの場合、その Object.keys() メソッドを使用します。

以下は、親コンポーネントによって送信され、監視および変更される一連のデータです。

02. コードの実装。

watch: {
    checkouts: {
      handler: function(newV, oldV) {
        const o = { ...newV }
        //把对象属性转为一个数组  (其实这一步也可以直接对o==={}进行判断也是可以的)
        const key = Object.keys(o)
        if (key.length > 0) {
          for (const key in o) {
            this.queryAdd[key] = o[key]
          }
        }
      },
      deep: true
    }
  },

03. 概要.

多くの場合、オブジェクトと配列の組み合わせを使用して、多くのシナリオを処理できます。

おすすめ

転載: blog.csdn.net/2201_75705263/article/details/132049087