本文介绍了如何在 React 中使用 filter 方法，基于多个条件精确地从数组中移除特定元素。通过结合逻辑运算符，可以实现更精细的过滤，避免误删其他符合部分条件的数据，最终得到期望的过滤结果。
在 React 开发中，经常需要根据特定条件过滤数组。Array.prototype.filter() 方法是实现此功能的强大工具。然而，当需要应用多个条件进行过滤时，逻辑运算符的使用至关重要，否则可能会导致意想不到的结果。本文将详细介绍如何使用 filter 方法结合逻辑运算符，实现精确的数组过滤。
问题分析
假设我们有一个对象数组，每个对象包含 domain 和 slug 属性。我们的目标是：只移除 domain 为 "domain1.com" 且 slug 为 "monitor" 的对象，而保留其他对象。
错误示例与原因
如果使用以下代码：
array.filter((item) => item.slug !== 'monitor' && item.domain !== 'domain1.com')
这段代码的逻辑是：保留 slug 不等于 "monitor" 并且 domain 不等于 "domain1.com" 的元素。因此，它会将所有 slug 为 "monitor" 的元素 以及 所有 domain 为 "domain1.com" 的元素都移除，导致过滤结果为空数组。这是因为使用了 && (AND) 运算符，要求两个条件都必须满足才能保留该元素。
正确方法：使用 OR 运算符
要实现只移除特定对象的目标，我们需要使用 || (OR) 运算符。正确的代码如下：
const input = [
{
"domain": "domain1.com",
"slug": "monitor"
},
{
"domain": "domain1.com",
"slug": "monitor-1"
},
{
"domain": "domain2.com",
"slug": "monitor"
}
]
const filteredArray = input.filter((item) => (item.slug !== 'monitor' || item.domain !== 'domain1.com'))
console.log(filteredArray);这段代码的逻辑是：如果 slug 不等于 "monitor" 或者 domain 不等于 "domain1.com"，则保留该元素。这意味着，只有当 slug 等于 "monitor" 并且 domain 等于 "domain1.com" 时，该元素才会被移除。
更清晰的表达方式（推荐）
为了代码的可读性，我们可以将条件取反，直接表达需要移除的条件：
const input = [
{
"domain": "domain1.com",
"slug": "monitor"
},
{
"domain": "domain1.com",
"slug": "monitor-1"
},
{
"domain": "domain2.com",
"slug": "monitor"
}
]
const filteredArray = input.filter((item) => !(item.slug === 'monitor' && item.domain === 'domain1.com'));
console.log(filteredArray);这段代码的逻辑是：如果 slug 等于 "monitor" 并且 domain 等于 "domain1.com"，则 不 保留该元素（即移除）。
总结
在使用 filter 方法进行多条件过滤时，正确理解和运用逻辑运算符至关重要。&& (AND) 运算符要求所有条件都满足，而 || (OR) 运算符只要满足其中一个条件即可。选择合适的运算符，并根据实际需求灵活运用，才能实现精确的数组过滤。 另外，使用括号可以使条件更清晰易懂，提高代码的可读性。
