使用reduce处理数据

一.reduce的使用方法


😆reduce方法需要传递两个参数一个参数是回调函数,另外一个参数是初始值,回调函数接收四个值分别是,accumulator累计值,currentValue当前值,currentIndex当前索引值,array原始数组,回调函数的返回值作为下次累计的初始值,使用方法如下:

js 复制代码
array.reduce((accumulator,currentValue,currentIndex,array)=>{
  return updatedAccumulator
},initialValue)

二.开发真实案例


🐸如下原数据,将这个原数据使用reduce处理成新的数据,并且只能使用reduce,不能使用其他函数访问。

js 复制代码
const data = [
  {
    "zscp1": {
      "zscpFlag": true,
      "zscpFs": "90"
    }
  },
  {
    "zscp2": {
      "zscpFlag": true,
      "zscpFs": "100"
    }
  },
  {
    "zscp3": {
      "zscpFlag": false,
      "zscpFs": ""
    }
  }
];

🦉处理后的数据格式:

js 复制代码
{
  "zscp1": {
    "zscpFlag": true,
      "zscpFs": "90"
  },
  "zscp2": {
    "zscpFlag": true,
      "zscpFs": "100"
  },
  "zscp3": {
    "zscpFlag": false,
      "zscpFs": ""
  }
}

🤡处理代码:

js 复制代码
this.csfsInfo = res.reduce((acc, cur) => {
  let key = Object.keys(cur)[0];
  let value = cur[key];
  return { ...acc, ...{ [key]: value } };
}, {});
相关推荐
子洋15 分钟前
AI Agent 介绍
前端·人工智能·后端
徐同保19 分钟前
使用n8n自动发邮件
前端
dly_blog1 小时前
setup 函数完整指南!
前端·javascript·vue.js
霍理迪1 小时前
基础CSS语法
前端·css
粟悟饭&龟波功1 小时前
【GitHub热门项目精选】(2025-12-19)
前端·人工智能·后端·github
流浪法师121 小时前
MyPhishing-Web:AI 驱动的钓鱼邮件检测可视化平台
前端·人工智能
写代码的jiang2 小时前
【无标题】实战:Vue3 + Element Plus 实现树形选择器全量预加载与层级控制
前端·javascript·vue.js
晚烛2 小时前
实战前瞻:构建高可靠、低延迟的 Flutter + OpenHarmony 智慧交通出行平台
前端·javascript·flutter
WHOVENLY2 小时前
【javaScript】- 作用域[[scope]]
前端·javascript
来杯三花豆奶2 小时前
Vue3 Pinia 从入门到精通
前端·javascript·vue.js