基於 JavaScript 中的屬性過濾物件陣列

Anika Tabassum Era 2023年10月12日
  1. 基於 JavaScript 中的屬性過濾物件陣列的通用回撥函式
  2. 使用箭頭函式根據 JavaScript 中的屬性過濾物件陣列
基於 JavaScript 中的屬性過濾物件陣列

filter() 方法是獲取偏好結果的最簡單方法。

除此之外,你可以遍歷整個物件陣列並顯式宣告條件。從技術上講,較少程式碼和易於訪問的技術是通過 filter 方法。

在這裡,我們將重點介紹在物件陣列上使用過濾器的兩種方法。我們將一個回撥函式指向一個變數或物件來儲存過濾後的結果。

這個回撥函式將具有函式的一般結構。稍後,我們也會嘗試用箭頭函式解決這個問題,並檢查結果是否相似。

基於 JavaScript 中的屬性過濾物件陣列的通用回撥函式

該演示將初始化一個具有多個屬性的陣列,也就是鍵值對。策略是先訪問物件,然後訪問陣列。

接下來,我們將獲取一個屬性並對其應用條件。當我們使用 filter 方法時,條件的完全匹配將被過濾。

讓我們跳到程式碼行。

程式碼片段:

var feature = {
  'models': [
    {
      'name': 'Raven',
      'age': '22',
      'height': '176',
      'gender': 'Female',
      'hair': 'Brown',
    },
    {
      'name': 'Alex',
      'age': '23',
      'height': '185',
      'gender': 'Male',
      'hair': 'Black',
    },
    {
      'name': 'Eden',
      'age': '25',
      'height': '169',
      'gender': 'Female',
      'hair': 'Black',
    }
  ]
} var extract = feature.models.filter(function(el) {
  return el.age < 25 && el.height >= 170;
});
console.log(extract);

輸出:

在 javascript 中使用普通函式過濾

在這裡,feature.models.filter 相應地訪問物件和陣列。此外,filter 方法被觸發以將約束放入其中。

正如我們所見,age<25 && height>170 提取了可能匹配的模型細節。

使用箭頭函式根據 JavaScript 中的屬性過濾物件陣列

箭頭函式是普通函式結構約定的簡寫方式。我們將看看是否可以使用箭頭函式來過濾物件陣列。

程式碼片段:

var feature = {
  'models': [
    {
      'name': 'Raven',
      'age': '22',
      'height': '176',
      'gender': 'Female',
      'hair': 'Brown',
    },
    {
      'name': 'Alex',
      'age': '23',
      'height': '185',
      'gender': 'Male',
      'hair': 'Black',
    },
    {
      'name': 'Eden',
      'age': '25',
      'height': '169',
      'gender': 'Female',
      'hair': 'Black',
    }
  ]
} var extract = feature.models.filter(x => x.age < 25 && x.hair == 'Black');
console.log(extract);

輸出:

在 javascript 中使用箭頭函式過濾

根據上面的程式碼,使用箭頭函式 filter 方法過濾掉必要的結果更加清晰。

這個過程只需要一個變數(這裡是 x)來指出屬性。此外,這種編碼風格用於縮短程式碼並由最新的 ES6 約定釋出。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

相關文章 - JavaScript Object

相關文章 - JavaScript Array