迹忆客 专注技术分享

今天的文章教我们使用 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"
}]

演示