React中filter函数筛选目标值出错，如何修正代码？

我有一个名为fullvalue的对象数组，还有一个名为pushedimg的字符串数组。我想用filter函数把fullvalue中name属性和pushedimg内字符串不匹配的元素存入filters变量。

当pushedimg只有一个元素时，结果符合预期：

const fullvalue = [
        {diaryItemId: 138, name: "growthLength", value: "1"},
        {diaryItemId: 141, name: "wormHeadSize", value: "2"}
]

const pushedimg = ["growthLength"]

const filters = fullvalue.filter((v) => !v.name.includes(pushedimg))

// 预期结果：filters = [{diaryItemId: 141, name: "wormHeadSize", value: "2"}]

但当pushedimg包含fullvalue所有name值时，filters没得到预期的空数组，反而保留了所有元素：

const fullvalue = [
        {diaryItemId: 138, name: "growthLength", value: "1"},
        {diaryItemId: 141, name: "wormHeadSize", value: "2"}
]

const pushedimg = ["growthLength", "wormHeadSize"]

const filters = fullvalue.filter((v) => !v.name.includes(pushedimg))

// 实际结果：filters保留所有元素，预期结果：filters = []

你搞反了判断逻辑：v.name.includes(pushedimg)是检查字符串v.name是否包含数组转成的拼接字符串（比如["growthLength", "wormHeadSize"]会被转成"growthLength,wormHeadSize"），显然单个name值不可能包含这个拼接后的字符串，所以!之后结果永远是true，所有元素都被保留。

正确逻辑应该是检查数组pushedimg是否包含v.name这个字符串，而非反过来。

把判断条件改成!pushedimg.includes(v.name)即可：

const fullvalue = [
        {diaryItemId: 138, name: "growthLength", value: "1"},
        {diaryItemId: 141, name: "wormHeadSize", value: "2"}
]

const pushedimg = ["growthLength", "wormHeadSize"]

const filters = fullvalue.filter((v) => !pushedimg.includes(v.name))

// 结果：filters = []，符合预期

如果pushedimg元素数量较多，为了提升查找性能，可以把它转成Set，因为Set.has()的查找效率比数组includes()更高：

const pushedSet = new Set(pushedimg)
const filters = fullvalue.filter((v) => !pushedSet.has(v.name))

内容的提问来源于stack exchange，提问作者user19476497