首页 > 其他分享 >js中数组方法reduce的妙用

js中数组方法reduce的妙用

时间:2024-07-31 22:26:10浏览次数:13  
标签:妙用 name list reduce js 数组 type 属性

        在JavaScript中,reduce()是数组的一个方法,它用于将数组中的所有元素按照指定的函数进行合并并返回一个结果。使用reduce()方法,可以对数组进行求和、累加等操作。

        我一直陷入固有思维,一直只使用reduce 来进行累加操作。今天在做项目时在要进行复杂对象中的数组属性进行整合时发现reduce方法也能快速实现相关操作,如下作为记录

例:基础数据

// 对该对象中的list属性进行整合成一个新对象
const data = {
      pay: [
        {
          type: 'foods',
          name: '餐饮',
          list: [
            { type: 'food', name: '餐费' },
            { type: 'drinks', name: '酒水饮料' },
            { type: 'dessert', name: '甜品零食' },
          ],
        }
      ],
      income: [
        {
          type: 'professional',
          name: '其他支出',
          list: [
            { type: 'salary', name: '工资' },
            { type: 'overtimepay', name: '加班' },
            { type: 'bonus', name: '奖金' },
          ],
        },
      ]
    }

目标数据

效果实现

// Objet.keys() 获取该对象的基础属性名 [ pay , income ]
const newData = Object.keys(data).reduce((pre, key) => {
// 对每个基础属性的内部属性进行遍历处理
    data[key].forEach(element => {
// 相同处理直至目标属性
        element.list.forEach(item=>{
            // 进行新对象的属性添加
            pre[item.type]=item.name
        })
    });
      return pre
}, {})

console.log(newData);
// 结果:
// { type: 'food', name: '餐费' , 
//   type: 'drinks', name: '酒水饮料', 
//   type: 'dessert', name: '甜品零食' },

标签:妙用,name,list,reduce,js,数组,type,属性
From: https://blog.csdn.net/Lil_y1/article/details/140826402

相关文章

  • 14. 迭代器、生成器、模块与包、json模块
    1.迭代器1.1迭代器介绍迭代器是用来迭代取值的工具每一次迭代得到的结果会作为下一次迭代的初始值,单纯的重复并不是迭代#while循环实现迭代取值a=[1,2,3,4,5,6]index=0whileindex<len(a):print(a[index])index+=1 1.2可迭代对象内置有_......
  • ctfshow-web入门-nodejs系列
    web334下载源码后缀改为zip打开即可先对源码经行一个简单的分析login.js//引入Express框架varexpress=require('express');//创建一个路由实例varrouter=express.Router();//引入用户数据,假设user模块导出的是一个包含用户项的对象varusers=require('../m......
  • 基于Java+SSM+jsp的医药管理系统的设计与实现(源码+数据库+讲解等)
    文章目录前言详细视频演示项目运行截图技术框架后端采用SSM框架前端框架JSP可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • js中两种设置子类原型(prototype)来实现原型式继承的本质区别
    在JavaScript中,这两种设置子类(Child)原型(prototype)的方法虽然都能实现继承的基本功能,但它们之间存在一些重要的区别和潜在的陷阱。1. Child.prototype=Object.create(Parent.prototype);这个方法使用Object.create()来创建一个新对象,其原型(__proto__)被设置为Parent.prototy......
  • js各种实际场景的使用案例合集(全)
    1、两个数组的交集场景1:找出两个数组arr1的activityProdId值存在在arr2中,如果存在则放入新数组arr3中场景条件:arr1=[        {activityProdId:23,name:"06",},        {activityProdId:56,name:"07",},        {activityProdId:78,name......
  • JSON格式说明
    JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScriptProgrammingLanguage,StandardECMA-2623rdEdition-December1999的一个子集。JSON的数据类型主要包括以下几种:对象(Object):在JSON中,对象是一个无序......
  • echarts 地图 geojson 街道级别获取
    echarts地图geojson街道级别获取最近开发遇到需求是要制作echarts地图,原本制作echarts地图也并不难,但是偏偏我要制作街道级别的地图,难就难在如何获取geojson的数据。获取渠道目前遇到的最多的获取geojson的方法是通过阿里的地理工具去获取,https://datav.aliyun.com/por......
  • JS逆向 (简单)
    在该网站输入账户123和密码123F12抓包发生密码被加密成74ce2ba17b2c218246e778fb5e895c95,并且密码字段为pwd点击搜索搜索pwd,并且查看是哪里给他加密的发现此处有用到加密,但不是pwd是hiddenPwd,在这个周围看看发现他把hiddenPwd的值赋值给pwd查看里面password的值......
  • 微信小程序nodejs+vue+uniapp学生选课系统dmkas源码lw包安装
    系统分为学生和管理员,教师三个角色小程序端运行软件 微信开发者工具/hbuiderxuni-app框架:使用Vue.js开发跨平台应用的前端框架,编写一套代码,可编译到Android、小程序等平台。基于微信小程序学生选课系统后台是本系统分为学生,教师,管理员三个角色,学生的主要功能是查看课程介......
  • Medium.com 无效的 Json?
    我试图从Medium.com获取最新的帖子,例如,我转到这里https://medium.com/circle-blog/latest?format=json但是当我复制并粘贴整个内容时JSON到JSONEditorOnline.org时,我收到错误消息Error:Parseerroronline1:])}while(1);</x>{"su^Expecting'STRING',......