首页 > 其他分享 >写一个方法js将数组对象中某个属性值相同的对象合并成一个新对象

写一个方法js将数组对象中某个属性值相同的对象合并成一个新对象

时间:2024-12-15 09:09:05浏览次数:8  
标签:keyField 对象 合并 js 数组 merged 属性

在前端开发中,处理数组对象并合并具有相同属性值的对象是一个常见的需求。以下是一个使用 JavaScript 实现的方法,将数组对象中某个属性值相同的对象合并成一个新对象。假设我们要合并的属性名为 keyField,并且我们希望将其他属性的值合并为一个数组。

/**
 * 合并数组中具有相同属性值的对象
 * @param {Array} array - 输入的数组对象
 * @param {string} keyField - 要合并的属性名
 * @returns {Object} - 合并后的对象
 */
function mergeObjectsByKey(array, keyField) {
    const merged = {};

    array.forEach(item => {
        const key = item[keyField];
        if (!merged[key]) {
            merged[key] = {};
        }

        // 合并属性,除了 keyField,其他属性都存入数组
        for (const [propertyName, value] of Object.entries(item)) {
            if (propertyName !== keyField) {
                if (!merged[key][propertyName]) {
                    merged[key][propertyName] = [];
                }
                merged[key][propertyName].push(value);
            }
        }
    });

    return merged;
}

// 示例使用
const data = [
    { id: 1, name: 'John', value: 10 },
    { id: 2, name: 'Jane', value: 20 },
    { id: 1, name: 'John Doe', value: 30 },
    { id: 2, name: 'Jane Smith', value: 40 }
];

const result = mergeObjectsByKey(data, 'id');
console.log(result);

/*
输出:
{
  "1": {
    "name": ["John", "John Doe"],
    "value": [10, 30]
  },
  "2": {
    "name": ["Jane", "Jane Smith"],
    "value": [20, 40]
  }
}
*/

解释

  1. 初始化合并后的对象:我们用一个空对象 merged 来存储合并后的结果。
  2. 遍历数组:使用 forEach 方法遍历输入的数组。
  3. 获取合并的键:从当前对象中获取 keyField 的值作为合并的键。
  4. 初始化合并对象:如果 merged 对象中还没有这个键,则初始化一个空对象。
  5. 合并属性:遍历当前对象的所有属性,如果属性名不是 keyField,则将其值推入对应键的数组中。
  6. 返回结果:返回合并后的对象。

这种方法可以灵活处理不同数组对象的合并需求,只需指定需要合并的属性名即可。

标签:keyField,对象,合并,js,数组,merged,属性
From: https://www.cnblogs.com/ai888/p/18607562

相关文章

  • 【C++指南】类和对象(七):友元
           ......
  • 树状数组详解
    概述树状数组(BinaryIndexedTree,简称BIT),是一种数据结构,用于处理区间查询和更新问题。它是一种可以高效地在对数级别时间复杂度内进行单点更新和区间查询的数据结构。树状数组通常用于解决以下两类问题:区间和查询:给定一个序列,查询序列中任意区间的和。区间更新:给定一个序......
  • Gin存储文件与oss对象存储(二)
    Gin存储文件与oss对象存储(二)原创 何泽丰 ProgrammerHe  2024年12月13日20:53 广东 听全文Gin存储文件与oss对象存储(二)概述朋友们大家好啊,这一篇笔记我们来简单记录一下前端在Vue2项目中base64转图片,在文件上传时实现分片上传、断点续传功能;最后将视频文件存......
  • 【每日一题】3266. K 次乘运算后的最终数组 I&II
    给你一个整数数组 nums ,一个整数 k  和一个整数 multiplier 。你需要对 nums 执行 k 次操作,每次操作中:找到 nums 中的 最小 值 x ,如果存在多个最小值,选择最 前面 的一个。将 x 替换为 x*multiplier 。k 次操作以后,你需要将 nums 中每一个......
  • NestJS 部署Apache
    要将Nest.JS应用搭建在Apache服务器上,你需要了解Nest.JS是一个基于Node.js的框架,因此它本质上是一个后端服务,而Apache通常用作前端服务器或反向代理。以下是将Nest.JS应用与Apache服务器结合使用的步骤:一、准备环境安装Node.js:确保在服务器上安装了Node.js。你可以从Node.js......
  • vue2 配置 mock.js 模拟后端数据
    安装mockj首先确保你有一个vue2项目,如果没有,可以用VueCLI创建一个:vuecreatevue-mock-demo开始安装Mock.jsnpminstallmockjs--save-dev创建Mock配置文件在项目的src目录下新建一个文件夹mock,并在其中创建index.js文件,用于编写模拟接口。例如(src/mock......
  • 力扣 3266. K 次乘运算后的最终数组 II
    发现\(k\le10^9\),肯定不能直接模拟了。但是注意到,如果最小值\(\min\timesm>\max\)存在,我们可以直接给每个数乘上\(m^{\lfloor\frac{k}{n}\rfloor}\),最后再处理剩下的\(k\bmodn\)个\(m\)即可,这个复杂度是\(O(n)\)的。具体地说,最小值乘上一个\(m\)超过最大值之后,其......
  • 新手学习C语言打卡8(数组)
    数组:数组:是一种容器,可以用来存储同种类数据类型的多个值数组的本质是地址数组的定义:数据类型数组名[长度]eg:intarr=[3];                   特点1.连续的空间特点2.一旦定义,长度不可变数组的初始化:数据类型数组名[长度]={数据值,数据值...}......
  • 对象输入输出流,进行文件的读写
     packagecn.edu.sdut.acm;importjava.io.*;importjava.util.*;classStudentimplementsSerializable{//让Student对象可序列化Stringid;Stringname;StringstuClass;intage;publicStudent(Stringid,Stringname,StringstuClass,......
  • Jackson @JsonIgnore 注解
    1.概述Jackson是一个广泛使用的Java库,它允许轻松地将Java对象序列化为JSON以及从JSON反序列化回Java对象。Jackson库提供的其中一个注解是@JsonIgnore。这个注解用于在序列化和反序列化过程中忽略特定的属性。这在转换JSON与Java对象之间时隐藏或省略敏感或不必要的数据......