javascript - 数组转换问题？

Question

我有下面的形式的数组

[{   id: 1,   name: 1,   port: 1,   unit: 2}, {  id: 2,  name: 2,  port: 3,  unit: 4}]

我想根据id和name对其进行分组，得到下面形式的数组，代码要如何编写？

[{  id: 1,  name: 1,  ports: [    {       port: 1, unit: 2    }  ]},{  id: 2,  name: 2,  ports: [    {       port: 3, unit: 4    }  ]}]

Answer 1

如果对数据处理不熟悉，可以直接使用 Lodash，提供了 groupBy 函数用于分组。
分组的时候需要找到每个对象对应的关键字（分组依据），如果 id 和 name 是一一对应关系，只需要按 id 或者 name 分组即可

_.groupBy(list, it => it.id);

如果 id 和 name 不是一一对应，而是存在组合，比如存在 { id: 1, name: 1} 和 { id: 1, name: 2 }、{ id: 2, name: 1} 等情况，那需要把 id 和 name 组成一个 KEY 来分组，比如

_.groupBy(list, it => `${it.id}|${it.name}`);

完整的程序如下

const result = _(list)    .groupBy(it => `${it.id}|${it.name}`)    .values()    .map(its => ({        id: its[0].id,        name: its[0].name,        ports: its.map(({ port, unit }) => ({ port, unit }))    }))    .value();console.log(result);

如果自己写分组，可以在分组的同时处理数据，

const result = Object.values(    list.reduce((group, { id, name, ...portInfo }) => {        const key = `${id}|${name}`;        (group[key] ??= { id, name, ports: [] }).ports.push(portInfo);        return group;    }, {}));console.dir(result, { depth: null });

---

好像回答过不少关于分组的问题，随便搜就搜出来一堆，给几个参考

• js数据去重合并的问题
• js数据格式化求解决思路?
• 问：js如何对以下数据快速有效分组
• 这个数组怎么改，去重去之后算合计
• js 数组对象怎么根据多个字段分组

Answer 2

var data = [  { id: 1, name: 1, port: 1, unit: 2 },  { id: 2, name: 2, port: 3, unit: 4 }];var groupedData = data.reduce((accumulator, current) => {  // 查找是否已经存在相同的分组  var existingGroup = accumulator.find(group => group.id === current.id && group.name === current.name);  if (existingGroup) {    // 如果已存在相同的分组，则将当前对象的 'port' 和 'unit' 添加到该分组的 'ports' 数组中    existingGroup.ports.push({ port: current.port, unit: current.unit });  } else {    // 如果不存在相同的分组，则创建一个新的分组对象，并初始化 'ports' 数组    accumulator.push({      id: current.id,      name: current.name,      ports: [{ port: current.port, unit: current.unit }]    });  }  return accumulator;}, []);console.log(groupedData);

Answer 3

1.用 reduce 方法：

let arr = [{   id: 1,   name: 1,   port: 1,   unit: 2}, {  id: 2,  name: 2,  port: 3,  unit: 4}]let res = arr.reduce((acc, cur) => {    let found = acc.find(item => item.id === cur.id && item.name === cur.name);    if (found) {        found.ports.push({port: cur.port, unit: cur.unit});    } else {        acc.push({            id: cur.id,            name: cur.name,            ports: [{port: cur.port, unit: cur.unit}]        });    }    return acc;}, []);console.log(res);

2.用 Map 对象：

let arr = [{   id: 1,   name: 1,   port: 1,   unit: 2}, {  id: 2,  name: 2,  port: 3,  unit: 4}]let map = new Map();arr.forEach(item => {    let key = `${item.id}-${item.name}`;    let value = map.get(key);    if (value) {        value.ports.push({port: item.port, unit: item.unit});    } else {        map.set(key, {            id: item.id,            name: item.name,            ports: [{port: item.port, unit: item.unit}]        });    }});let res = Array.from(map.values());console.log(res);

Answer 4

let arr = [{   id: 1,   name: 1,   port: 1,   unit: 2}, {  id: 2,  name: 2,  port: 3,  unit: 4}]let res = [], obj = {}arr.forEach(item => {    let key = item.id + '-' + item.name    let target = {port: item.port, unit: item.unit}    if(!obj[key]){        res.push(obj[key] = {          id: item.id,          name: item.name,          ports: [target]        })    }else{        obj[key].ports.push(target)    }})console.log(res)

Answer 5

let tere = arr.map(({ id, name, port, unit }) => ({  id,  name,  ports: [{ port, unit }],}));