如何优化IProject接口对象数组添加代码提升执行效率

原代码存在的核心问题 #

原始实现不仅效率偏低，还存在会导致功能完全失效的逻辑错误：

• 逻辑错误：Array.concat() 是不可变方法，不会修改原数组，只会返回拼接完成的新数组。原写法没有接收concat的返回值，最终showProjects永远是空数组，完全达不到筛选合并的预期效果。
• 遍历方式低效：for...in是为对象遍历设计的语法，用来遍历数组时会额外遍历原型链上的所有可枚举属性，遍历顺序也无法保证和数组索引一致，性能远低于数组专用的遍历方式。
• 内存开销冗余：如果修正concat的赋值逻辑，每次循环都会生成一个全新的数组，数据量稍大时会产生大量临时内存占用，时间复杂度会劣化到O(n²)。

优化实现方案 #

根据不同的场景需求，可以选择两种优化方向：

1. 常规业务场景（优先可读性，性能够用） #

直接使用数组原生filter方法，这是V8等JS引擎做过底层深度优化的API，性能足够应对绝大多数业务场景，语义清晰代码量最少：

// 直接筛选出show属性为'1'的项，严格相等判断避免隐式类型转换开销
const showProjects: IProject[] = projects.filter(project => project.show === '1')

注意这里用严格相等===判断，因为接口定义中show字段本身就是string类型，不需要==做隐式类型转换，判断速度更快也更安全。

2. 超大数据量场景（追求极致性能） #

如果projects数组体量达到十万级以上，可以用基础for循环配合push实现，这是目前JS环境下性能最高的数组遍历写法，没有函数调用开销，内存占用最低：

const showProjects: IProject[] = []
// 提前缓存数组长度，避免每次循环都重复读取length属性
for (let i = 0, len = projects.length; i < len; i++) {
    const project = projects[i]
    if (project.show === '1') {
        showProjects.push(project)
    }
}

这个实现的性能优势点：

• 直接通过数字索引访问数组元素，访问速度是所有遍历方式里最快的
• 提前缓存数组长度，减少循环中的属性查找开销
• 用push直接在原数组尾部追加元素，不会生成临时数组，内存开销最小
• 严格相等判断省去隐式类型转换的耗时

内容的提问来源于stack exchange，提问作者python-dude153