当前位置：首页 > article >正文

JS 中 reduce()方法及使用

article 2024/10/26 11:28:37

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

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

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;
    }