JavaScript 中怎么用箭头函数简化数组求和与映射的代码编写-js教程-PHP中文网

箭头函数通过隐式返回和简短语法使数组求和与映射更简洁可读：reduce配合箭头函数可一行求和，map配合箭头函数能清晰转换元素，支持链式调用，但需注意无this、返回对象须加括号等限制。

javascript 中怎么用箭头函数简化数组求和与映射的代码编写

箭头函数能让数组求和与映射操作更简洁、可读性更强，关键是利用其隐式返回和简短语法，避免冗余的 function 关键字和花括号。

用 `reduce` + 箭头函数快速求和

传统写法需要显式写 return 和函数体；箭头函数配合 reduce 可一行搞定：

// 传统方式
const sum = arr.reduce(function(acc, curr) { return acc + curr; }, 0);
<p>// 箭头函数简化（单参数可省括号，单表达式可省花括号和 return）
const sum = arr.reduce((acc, curr) => acc + curr, 0);</p><p>// 若初始值为 0，且数组非空，甚至可省略初始值（但不推荐，空数组会报错）
const sum = arr.reduce((a, b) => a + b); // ⚠️ 注意：arr 为空时抛出错误</p>

用 `map` + 箭头函数清晰转换元素

对每个元素做简单计算或提取属性时，箭头函数让意图一目了然：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

// 将数字数组平方
const squares = numbers.map(x => x * x);
<p>// 提取对象数组中的 name 字段
const names = users.map(user => user.name);</p><p>// 带逻辑的映射（仍保持单行，条件运算符代替 if）
const doubledOrZero = nums.map(n => n > 0 ? n * 2 : 0);</p><p>// 返回新对象（记得加小括号包裹对象字面量，避免被解析为代码块）
const withId = items.map((item, index) => ({ ...item, id: index + 1 }));</p>

组合使用：先映射再求和（链式调用）

箭头函数让多步数组处理像自然语言一样流畅：

// 计算所有商品价格总和（price 是字符串，需转数字）
const total = products.map(p => parseFloat(p.price)).reduce((a, b) => a + b, 0);
<p>// 或一步到位（更紧凑，但可读性略降，按需选择）
const total = products.reduce((sum, p) => sum + parseFloat(p.price), 0);</p><p>// 过滤后求和：只统计已发货订单的金额
const shippedTotal = orders
.filter(order => order.status === 'shipped')
.map(order => order.amount)
.reduce((a, b) => a + b, 0);</p>