17370845950

JavaScript操作数组最常用高效的方式是使用高阶函数。1.map用于映射生成新数组；2.filter用于筛选生成新数组；3.reduce用于聚合计算为单个值；4.find/findIndex用于查找首个匹配项；掌握这四个可覆盖90%日常需求。

JavaScript 中操作数组最常用、最高效的方式就是使用高阶函数——它们接收函数作为参数，对数组元素进行声明式处理，无需手动写 for 循环，代码更简洁、可读性更强、也更不容易出错。

map：生成新数组，每个元素按规则转换

用于“映射”原数组的每一项，返回一个等长的新数组。原数组不变。

• 适合场景：格式化数据（如给每个对象加字段、转字符串、计算新值）
• 注意：回调函数必须有 return，否则对应位置是 undefined
• 例子：[1, 2, 3].map(x => x * 2) → [2, 4, 6]

filter：筛选符合条件的元素，生成新数组

遍历数组，保留回调函数返回 true 的项，返回新数组。原数组不变。

• 适合场景：去重前过滤、查找特定状态的数据、剔除空值
• 注意：不改变原数组长度逻辑，只做“选择”
• 例子：[1, 2, 3, 4].filter(x => x % 2 === 0) → [2, 4]

reduce：聚合计算，把数组“压成”一个值

从左到右累积处理，常用于求和、拼接、扁平化、分组统计等。

• 必需提供累加器（acc）和当前值（cur），通常要设初始值（如 0、[]、{}）
• 例子：[1, 2, 3].reduce((sum, x) => sum + x, 0) → 6
• 进阶用法：用空数组作初始值实现 flat；用空对象实现 groupBy

find 与 findIndex：快速定位第一个匹配项

不同于 filter 返回所有匹配项，find 返回第一个满足条件的元素，findIndex 返回其索引。

• 适合场景：查用户、找配置项、判断是否存在某条记录
• 注意：没找到时 find 返回 undefined，findIndex 返回 -1
• 例子：[{id:1},{id:2}].find(u => u.id === 2) → {id:2}

其他实用但稍少用的还有 some（是否有至少一个满足）、every（是否全部满足）、sort（排序，会修改原数组）、flatMap（map + flat 合并）、includes（判断是否含某值）。掌握 map/filter/reduce/find 这四个，已覆盖日常开发中 90% 的数组操作需求。