在 JavaScript 中過濾陣列多個值

Mehvish Ashiq 2023年10月12日
  1. JavaScript 中使用 filter() 方法通過檢查多個值來過濾陣列
  2. JavaScript 中使用 filter() 方法通過檢查多個值來過濾物件陣列
  3. 在 JavaScript 中使用 filter() 方法動態過濾物件陣列
在 JavaScript 中過濾陣列多個值

filter() 方法使用已通過測試函式的元素建立一個全新的陣列。

JavaScript 中使用 filter() 方法通過檢查多個值來過濾陣列

例如,我們將檢索姓氏以 M 開頭並且至少參加了 3 門課程的學生的記錄。

filter() 函式不會修改/更新原始陣列並針對空元素執行。

var array = [1, 3, 4, 2, 6, 7, 5, 9, 10, 8];
var result = array.filter(array => array < 10 && array >= 2);
console.log(result);

輸出:

[3, 4, 2, 6, 7, 5, 9, 8]

在這裡,我們在 filter() 方法中使用箭頭函式

請記住,我們還可以傳遞函式名稱並單獨編寫該函式。對陣列中的每個元素執行此陣列函式,並檢查是否滿足指定的條件。

然後該元素將儲存在 result 陣列中,否則,移動到陣列的下一個元素。

JavaScript 中使用 filter() 方法通過檢查多個值來過濾物件陣列

在這裡,我們有一個包含 4 個物件的 cities 陣列。

每個物件都有兩個屬性,city_namecity_population

let cities = [
  {city_name: 'Los Angeles', city_population: 3992631},
  {city_name: 'New York', city_population: 8185433},
  {city_name: 'Chicago', city_population: 2655568},
  {city_name: 'China', city_population: 2039471},
];
let bigCitiesAndPopulation = cities.filter(function(e) {
  return e.city_population > 2000000 && e.city_name.startsWith('Chi');
});
console.log(bigCitiesAndPopulation);

輸出:

[{
  city_name: "Chicago",
  city_population: 2655568
}, {
  city_name: "China",
  city_population: 2039471
}]

filter() 方法返回陣列,因為我們將它與陣列一起使用。現在,我們將它與物件陣列一起使用,filter() 函式返回一個物件陣列。

或者,我們可以使用 filter() 方法來獲得準確的結果。

let bigCitiesAndPopulation = cities.filter(
    city => city.city_population > 2000000 && city.city_name.startsWith('Chi'));
console.log(bigCitiesAndPopulation);

輸出:

[{
  city_name: "Chicago",
  city_population: 2655568
}, {
  city_name: "China",
  city_population: 2039471
}]

不使用內建方法的過濾器方法的實現。

let bigCitiesAndPopulation = [];

for (let i = 0; i < cities.length; i++) {
  if (cities[i].city_population > 2000000 &&
      cities[i].city_name.startsWith('Chi')) {
    bigCitiesAndPopulation.push(cities[i]);
  }
}
console.log(bigCitiesAndPopulation);

輸出:

[{
  city_name: "Chicago",
  city_population: 2655568
}, {
  city_name: "China",
  city_population: 2039471
}]

我們使用一個一直執行到 cities.length-1for 迴圈。在 for-loop 中,我們檢查 city_population 是否大於 2000000 並且 city_name 是否以 Chi 開頭。

如果兩個條件都滿足,那麼只有這個城市才會被推入陣列 bigCitiesAndPopulation

在上面的示例中,我們應該只使用兩個值來過濾物件陣列。

假設我們有許多值將被檢查以過濾物件陣列。在這種情況下,我們必須將這些值儲存在單獨的陣列中。

例如,我們在 filtersArray 中有 4 個值 BiologyPhysicsChemistryArts。我們的目標是獲取那些具有 filtersArray 的物件。

var studentCourses = [
  {id: 210, courses: 'Biology Physics Math'},
  {id: 211, courses: 'History Physics ComputerScience'},
  {id: 212, courses: 'Arts Language Biology Chemistry Physics'},
  {id: 213, courses: 'Chemistry Statistics Math'},
  {id: 214, courses: 'Biology Chemistry Physics Arts'},
];

var filtersArray = ['Biology', 'Physics', 'Chemistry', 'Arts'];

var filteredArray = studentCourses.filter(function(element) {
  var courses = element.courses.split(' ');
  return courses
             .filter(function(course) {
               return filtersArray.indexOf(course) > -1;
             })
             .length === filtersArray.length;
});

console.log(filteredArray);

輸出:

[{
  courses: "Arts Language Biology Chemistry Physics",
  id: 212
}, {
  courses: "Biology Chemistry Physics Arts",
  id: 214
}]

我們得到那些包含所有 filtersArray 元素的物件。請記住,物件可以有額外的課程,但它們必須包含 filterArray 的元素才能被過濾。

在 JavaScript 中使用 filter() 方法動態過濾物件陣列

動態意味著一切都將在執行時決定。

'use strict';
Array.prototype.flexFilter =
    function(criteria) {
  // set variables
  var matchFilters, matches = [], counter;

  // helper function to iterate over the criteria (filter criteria)
  matchFilters =
      function(item) {
    counter = 0
    for (var n = 0; n < criteria.length; n++) {
      if (criteria[n]['Values'].indexOf(item[criteria[n]['Field']]) > -1) {
        counter++;
      }
    }
    // The array's current items satisfies all the filter criteria, if it is
    // true
    return counter == criteria.length;
  }

  // loop through every item of the array
  // and checks if the item satisfies the filter criteria
  for (var i = 0; i < this.length; i++) {
    if (matchFilters(this[i])) {
      matches.push(this[i]);
    }
  }
  // returns a new array holding the objects that fulfill the filter criteria
  return matches;
}

var personData = [
  {id: 1, name: 'John', month: 'January', gender: 'M'},
  {id: 2, name: 'Thomas', month: 'March', gender: 'M'},
  {id: 3, name: 'Saira', month: 'April', gender: 'F'},
  {id: 4, name: 'Daniel', month: 'November', gender: 'M'},
  {id: 5, name: 'Leonardo', month: 'March', gender: 'M'},
  {id: 6, name: 'Jamaima', month: 'April', gender: 'F'},
  {id: 7, name: 'Tina', month: 'December', gender: 'F'},
  {id: 8, name: 'Mehvish', month: 'March', gender: 'F'}
];

var filter_criteria = [
  {Field: 'month', Values: ['March']}, {Field: 'gender', Values: ['F', 'M']}
];
var filtered = personData.flexFilter(filter_criteria);
console.log(filtered);

我們使用一個函式來遍歷 filter_criteria 來檢索匹配的值。

每個過濾條件都將被視為 AND,而多個過濾器值在過濾欄位中被視為 OR

輸出:

[{
  gender: "M",
  id: 2,
  month: "March",
  name: "Thomas"
}, {
  gender: "M",
  id: 5,
  month: "March",
  name: "Leonardo"
}, {
  gender: "F",
  id: 8,
  month: "March",
  name: "Mehvish"
}]

檢查 filter_criteria 後,我們遍歷每個陣列元素並評估它是否滿足過濾條件。

我們 push 進入 matches 陣列以滿足過濾條件。否則不行。

迴圈結束後,我們列印滿足 filter_criteria 的新陣列。

作者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Array