美文网首页
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' },
    //   ],
    // }
    

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

    
    

    相关文章

      网友评论

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

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