JS 中 reduce()方法及使用

在这里插入图片描述
摘要：

开发中经常会遇到求合计的状况！比如和，积等！这次遇到的是求合计的和！

reduce()方法是JavaScript中Array对象的一种高阶函数，用于对数组中的每个元素执行一个由您提供的reducer函数（回调函数），将其结果汇总为单个返回值。以下是关于reduce()方法的详细解释：

arr.reduce(callback, initialValue)

callback: 必需。数组中的每个值（从左到右）都会执行该回调函数。

previousValue: 必需。上一次调用回调函数的结果，或者初始值（initialValue）。
currentValue: 必需。当前被处理的元素。
index（可选）：当前元素的索引。
array（可选）：调用reduce的数组。
initialValue（可选）：传递给回调函数的初始值。如果没有提供初始值，reduce会从数组的第二个元素开始调用回调函数，跳过第一个元素。

工作原理

如果提供了initialValue，则从数组的第一个元素开始，将initialValue作为第一次调用回调函数的第一个参数（previousValue），数组的第一个元素作为第二个参数（currentValue）。
如果没有提供initialValue，则从数组的第二个元素开始，将数组的第一个元素作为第一次调用回调函数的第一个参数（previousValue），数组的第二个元素作为第二个参数（currentValue）。
每次回调函数执行后，其返回值会作为下一次调用回调函数的第一个参数（previousValue）。
最终，reduce方法返回最后一次调用回调函数的返回值，作为整个reduce操作的结果。

求和：

let arr = [1, 2, 3, 4];
let sum = arr.reduce((prev, cur) => prev + cur, 0); // 输出10
console.log(sum);

求乘积:

let arr = [1, 2, 3, 4];
let product = arr.reduce((prev, cur) => prev * cur, 1); // 输出24
console.log(product);

计算数组中每个元素出现的次数:

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre, cur) => {if (cur in pre) {pre[cur]++} else {pre[cur] = 1}return pre
}, {});
console.log(nameNum); // 输出{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

展平多维数组:

let twoDArr = [[0, 1], [2, 3], [4, [5, 6, 7]]];
let newArr = twoDArr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), []);
console.log(newArr); // 输出[0, 1, 2, 3, 4, 5, 6, 7]

注意事项:

如果数组为空且没有提供initialValue，则会抛出TypeError。
reduce()对于空数组是不会执行回调函数的，除非提供了initialValue。

计算table中商品信息合计：

<el-table :data="productsList" border show-summary :summary-method="getSummaries"><el-table-column label="商品名称" prop="name" width="auto" align="center"/><el-table-column label="价格" prop="price" width="150" align="center"><template #default="{ row }">{{ row.price / 100 }}元</template></el-table-column><el-table-column label="下单数量" prop="count" width="100" align="center" /><el-table-column label="下单重量" prop="" width="100" align="center"><template #default="{ row }">{{ row.count * row.skus[0].sku}}</template></el-table-column><el-table-column label="下单金额" prop="payPrice" width="150" align="center"><template #default="{ row }">{{ row.payPrice / 100 }}元</template></el-table-column><el-table-column label="实发数量" prop="sendCount" width="100" align="center" /><el-table-column label="实发重量" prop="" width="100" align="center"><template #default="{ row }">{{ row.sendCount == unll ? row.sendWeight : row.sendCount * row.skus[0].unitNum }}             </template></el-table-column><el-table-column label="退补金额" prop="" width="150" align="center"><template #default="{ row }">{{ (row.makeUpMoney + row.quitUpMoney) / 100 }}元</template></el-table-column>
</el-table>

/** 合计 */
const getSummaries = (param) => {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计';return;}switch (column.label) {case '价格':sums[index] = `${data.reduce((total, row) => total + row.price, 0) / 100}元`;break;case '下单数量':sums[index] = data.reduce((total, row) => total + row.count, 0);break;case '下单重量':sums[index] = data.reduce((total, row) => total + (row.count * row.skus[0].skus), 0);break;case '下单金额':sums[index] = `${data.reduce((total, row) => total + row.payPrice, 0) / 100}元`;break;case '实发数量':sums[index] = data.reduce((total, row) => total + row.sendCount, 0);break;case '实发重量':sums[index] = data.reduce((total, row) => total + (row.sendCount == null ? row.sendWeight : row.sendCount * row.skus[0].sku), 0);break;case '退补金额':sums[index] = `${data.reduce((total, row) => total + ((row.makeUpMoney + row.quitUpMoney)), 0) / 100}元`;break;default:sums[index] = '';}});return sums;
}

方法二：

getSummaries(param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计';return;}const values = data.map(item => Number(item[column.property]));if (!values.every(value => isNaN(value))) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr);if (!isNaN(value)) {return prev + value;} else {return prev;}}, 0);if (column.property === 'price' || column.property === 'payPrice' || column.property === 'makeUpMoney' || column.property === 'quitUpMoney') {sums[index] = `${sums[index] / 100}元`;}} else {sums[index] = '';}});// 特殊处理下单重量和实发重量sums[3] = data.reduce((sum, item) => sum + (item.count * item.skus[0].sku), 0);sums[6] = data.reduce((sum, item) => sum + (item.sendCount !== null ? item.sendCount * item.skus[0].sku: item.sendWeight), 0);return sums;}