reduce是JavaScript归并数组最常用灵活的方法,通过设置初始值为[]并用concat或扩展运算符合并子数组,可实现扁平化、条件筛选及对象属性聚合等操作。

JavaScript 中归并数组最常用、最灵活的方式就是 reduce 方法。它不是专为“合并数组”设计的,但通过合理设置初始值和累加逻辑,能干净利落地把多个数组(或数组元素)合并成一个结果——比如扁平化、拼接、统计、对象聚合等。
reduce 基本用法:两个核心参数
reduce 接收一个回调函数和一个可选的初始值(initialValue),对数组每一项依次执行回调,把上一次返回的结果传给下一次,最终输出单个值。
语法:
arr.reduce((accumulator, currentValue, index, array) => { /* ... */ }, initialValue)
accumulator:累积器,即上一轮回调的返回值(或初始值)currentValue:当前正在处理的数组元素initialValue 很关键:归并数组时,通常设为 [](空数组),这样每次都能往里 push 或 concat
把多个数组合并成一个(扁平化一层)
比如你有:[[1,2], [3,4], [5]],想得到 [1,2,3,4,5]:
立即学习“Java免费学习笔记(深入)”;
const arrs = [[1,2], [3,4], [5]];const merged = arrs.reduce((acc, cur) => acc.concat(cur), []);// → [1, 2, 3, 4, 5]
说明:
初始值是空数组 []每轮把当前子数组 cur 拼到 acc 后面,用 concat(不修改原数组)也可用扩展运算符:[...acc, ...cur],更现代直观
合并不规则嵌套结构(如含非数组项)
如果数组里混着数字、字符串、null 等,想只提取并合并所有数组项:
const mixed = [[1,2], "hello", [3], null, [4,5]];const flatOnlyArrays = mixed.reduce((acc, item) => { if (Array.isArray(item)) { return [...acc, ...item]; } return acc;}, []); // → [1, 2, 3, 4, 5]
这种写法比 flat() 更可控,适合带条件的归并。
进阶:按字段归并对象数组(如合并同 id 的数据)
例如,把多个请求返回的用户列表按 id 合并,避免重复:
const users1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];const users2 = [{id: 2, score: 95}, {id: 3, name: 'Charlie'}];const allUsers = [...users1, ...users2].reduce((map, user) => { const existing = map.get(user.id) || {}; map.set(user.id, { ...existing, ...user }); return map;}, new Map());// 转回数组:Array.from(allUsers.values())// → [{id:1,name:'Alice'}, {id:2,name:'Bob',score:95}, {id:3,name:'Charlie'}]
这里用 Map 当 accumulator,实现去重+属性合并,体现 reduce 的强大表达力。
基本上就这些。reduce 不是“必须用”,但一旦理解了 accumulator 如何流转,你会发现它比 for 循环更声明式、更少出错,尤其在需要链式归并、条件累积或状态维护时。多练几次,自然就顺手了。
以上就是javascript如何归并数组_ reduce怎么用的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1543184.html
微信扫一扫
支付宝扫一扫