在 JavaScript 中過濾多個條件

1. 在 JavaScript 中過濾多個條件
2. 使用傳統方法
3. 使用過濾方法

今天的文章教我們使用 JavaScript 中的傳統方法和 filter 方法來過濾具有多個條件的陣列。

在 JavaScript 中過濾多個條件

陣列是一種具有固定數字鍵和動態值的 JavaScript 物件。JavaScript 提供了幾種內建方法來訪問和操作這些陣列元素。

filter() 方法從原始陣列生成一個新陣列，其中所有元素都通過了提供的函式實現的條件/測試。

語法：

filter(callbackFn)

filter 方法接受 callbackFn 作為引數。此函式是一個謂詞，用於測試陣列的每個元素。

返回一個新陣列，強制元素保持真或假，否則。

使用三個引數呼叫回撥函式。

1. element 是陣列中處理的當前元素。
2. index 是陣列中正在處理的當前元素的索引。
3. 呼叫 filter() 的 array。

返回一個新陣列，其中包含通過測試的元素。如果沒有元素通過測試，將返回一個空陣列。

filter() 為陣列的每個元素呼叫一次提供的 callbackFn 函式，並構造一個包含所有值的新陣列，其中 callbackFn 返回一個強制為 true 的值。

callbackFn 僅對具有賦值的陣列索引呼叫。對於已刪除或從未分配的索引，不會呼叫它。

未通過 callbackFn 測試的陣列元素將被跳過並且不包含在新陣列中。在 filter() 的文件中查詢更多資訊。

使用傳統方法

const filter = {
  address: 'India',
  name: 'Aleena'
};
const users = [
  {name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
  {name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
  {name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];

const filteredUsers = users.filter((item) => {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key]) return false;
  }
  return true;
});

console.log(filteredUsers);

我們已經在上面的示例中描述了一個具有所需屬性的 filter 物件。我們在 filter 方法中定義了回撥函式來檢查指定的陣列中是否存在所需的屬性。

如果所需的屬性不存在，則返回 false；否則，返回 true。

當 filter 物件是動態生成的時，這種方法很有用。如果 filter 物件是靜態的，你可以使用下面的 && 條件過濾物件。

嘗試在任何支援 JavaScript 的瀏覽器中執行上述程式碼片段；它將在下面顯示結果。

使用過濾方法

const filteredUsers = users.filter(
    obj => obj.name == filter.name && obj.address == filter.address);
console.log(filteredUsers);

輸出：

[{
  address: "India",
  age: 35,
  email: "aleena@mail.com",
  name: "Aleena"
}]

演示