HOWTO · JavaScript

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

JavaScript 物件可以以多種形式使用。使用一個物件組成一個陣列,並根據屬性從中取出過濾後的值,可以使用 filter 方法進行操作。

本頁內容

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 約定釋出。