美文网首页
javascript数组按属性分组实现方法

javascript数组按属性分组实现方法

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-08-30 19:32 被阅读0次

背景

在开发过程中,前端有时需要对后端返回的数据进行一些处理,当后端返回给我们json对象数组时,我们可能会需要按照对象中的某一个属性来进行分组

一、forEach实现

let arr = [
    {name: '张三', age: 18},
    {name: '李四', age: 20},
    {name: '王五', age: 18},
    {name: '赵六', age: 20},
    {name: '孙七', age: 21},
];
let obj = {};
arr.forEach(item => {
    if (!obj[item.age]) {
        obj[item.age] = [];
    }
    obj[item.age].push(item);
});
console.log(obj);
// {
//   18: [{name: '张三', age: 18}, {name: '王五', age: 18}],
//   20: [{name: '李四', age: 20}, {name: '赵六', age: 20}],
//   21: [{name: '孙七', age: 21}],
// }

二、reduce实现

const people = [  
{ name: 'Alice', gender: 'female' },  
{ name: 'Bob', gender: 'male' },  
{ name: 'Charlie', gender: 'male' },  
{ name: 'Diana', gender: 'female' },
];

const groups = people.reduce((groups, person) => {
  const key = person.gender;
  if (!groups[key]) {
    groups[key] = [];
  }
  groups[key].push(person);
  return groups;
}, {});

console.log(groups);
// Output:
// {
//   female: [
//     { name: 'Alice', gender: 'female' },
//     { name: 'Diana', gender: 'female' },
//   ],
//   male: [
//     { name: 'Bob', gender: 'male' },
//     { name: 'Charlie', gender: 'male' },
//   ],
// }

三、对没有属性名的数组进行分组


相关文章

  • js中对象数组按对象属性排序

    数组对象要按属性大小排序怎么办? 数组对象属性排序 我们要如何实现数组中的对象按data大小排序? sort方法 ...

  • 数组的方法

    数组的方法 JavaScript Array对象的属性和方法 : https://...

  • javascript碎片知识002

    javascript 中的数组 数组的初始化 数组的使用 数组的属性 数组的方法 push 方法:能把元素添加到数...

  • swift 高阶函数

    1、按数组的某个元素、某个元素属性进行分组: 2、数组元素每2个为一组分段:

  • Js实现json数组分组合并操作示例

    这篇文章主要介绍了js实现json数组分组合并操作,涉及javascript针对json数组的遍历、判断、添加、赋...

  • 14JavaScript数组对象去重的方法

    JavaScript数组对象去重方法 方法一:采用对象访问属性的方法,判断属性值是否存在,如果不存在就添加。

  • python数据分析(二)--Numpy

    n维数组对象ndarray 两部分组成--数组内容和数组属性(数组类型和数组维度) 定义一个数组方法:a=nump...

  • 一维数组变二维再变一维

    一维数组变二维数组,再变为一维数组,Flutter实现 将一维object数组中某属性值相同的元素分组。 一维:[...

  • 【IMWeb秋招训练营】【Day3】面试题总结

    经典面试题 9.在Javascript中什么是伪数组?如何将伪数组转化为标准数组? 具有length属性 按索引方...

  • javascript代码积累

    一、javascript实现继承 1.基于原型链实现继承 2.基于属性和方法复制实现继承 二、javascript...

网友评论

      本文标题:javascript数组按属性分组实现方法

      本文链接:https://www.haomeiwen.com/subject/elsamdtx.html