JavaScript对象按名称过滤：如何移除指定图表分类？

我正在为图表创建过滤功能，点击过滤器时需移除对应分类。API返回包含名称的对象集合（共40项），我需要按名称过滤掉其中5项。请问最优实现方式是什么？

我尝试将需过滤的属性名称手动存入数组，再对数据执行filter方法，但返回的仍是未过滤的完整对象，代码如下：

filterDiagram() {

    Const array = ["all the names of the properties I want to filter out"]
    
    carbonates = array.forEach(x) => {console.log(x)}
    
    Const filterCat = data.filter (io => 
    io.name !== carbonates)

}

你的代码问题分析 #

1. 语法错误：Const需改为小写const；array.forEach(x) =>写法错误，正确格式是array.forEach(x => {})；注意使用英文引号而非中文引号。
2. 逻辑错误：forEach没有返回值，导致carbonates变量为undefined，io.name !== undefined的条件永远为真，自然过滤不掉任何数据。
3. 判断逻辑偏差：你需要判断当前项的name是否属于待排除列表，而非和单个变量做比较。

最优实现方案 #

针对你的需求，推荐两种实现方式，可根据数据量选择：

方案一：使用Set提升查询性能（适合大量过滤项或数据）

function filterDiagram(data) {
    // 存储需排除的名称集合
    const excludedNames = new Set([
        "待排除名称1",
        "待排除名称2",
        "待排除名称3",
        "待排除名称4",
        "待排除名称5"
    ]);
    
    // 过滤掉在排除列表中的项
    const filteredData = data.filter(item => !excludedNames.has(item.name));
    
    return filteredData;
}

• 优势：Set.has()的查询时间复杂度为O(1)，比数组includes的O(n)更高效，处理大规模数据时性能提升明显。

方案二：使用数组includes（代码简洁，适合少量过滤项）

如果仅需排除5项，直接用数组includes更简洁：

function filterDiagram(data) {
    const excludedNames = ["待排除名称1", "待排除名称2", "待排除名称3", "待排除名称4", "待排除名称5"];
    const filteredData = data.filter(item => !excludedNames.includes(item.name));
    return filteredData;
}

注意事项 #

• 确保data参数正确传入函数，原代码中未传递data可能导致变量未定义错误。
• 待排除名称需与API返回的name字段完全匹配，注意大小写、空格等细节。

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