在 JavaScript 中過濾陣列多個值
-
JavaScript 中使用
filter()方法通過檢查多個值來過濾陣列 -
JavaScript 中使用
filter()方法通過檢查多個值來過濾物件陣列 -
在 JavaScript 中使用
filter()方法動態過濾物件陣列
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_name 和 city_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-1 的 for 迴圈。在 for-loop 中，我們檢查 city_population 是否大於 2000000 並且 city_name 是否以 Chi 開頭。
如果兩個條件都滿足，那麼只有這個城市才會被推入陣列 bigCitiesAndPopulation。
在上面的示例中，我們應該只使用兩個值來過濾物件陣列。
假設我們有許多值將被檢查以過濾物件陣列。在這種情況下，我們必須將這些值儲存在單獨的陣列中。
例如，我們在 filtersArray 中有 4 個值 Biology、Physics、Chemistry 和 Arts。我們的目標是獲取那些具有 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 的新陣列。
