数组元素分组的方法

184 阅读1分钟

将数组中的元素进行分组,暂时了解到有两种简便的方法。

将如下数组按照gender属性进行分组

const persons = [
  {name: "张三", gender: "男"},
  {name: "李四", gender: "女"},
  {name: "王五", gender: "女"},
  {name: "郑六", gender: "男"},
  {name: "马七", gender: "女"},
];

第一种

使用js中的reduce方法

const result = persons.reduce((resultObj, person) => {
    if(!resultObj[person.gender]){
        resultObj[person.gender] = []
    }
    resultObj[person.gender].push(person)
    return resultObj
}, {});
console.log(result);
//结果如下:
/**
{
  '男': [ { name: '张三', gender: '男' }, { name: '郑六', gender: '男' } ],
  '女': [
    { name: '李四', gender: '女' },
    { name: '王五', gender: '女' },
    { name: '马七', gender: '女' }
  ]
}*/

第二种

使用lodash库中的groupBy方法

import { groupBy } from 'lodash';
const result = groupBy(persons, 'gender');
//结果如下:
/**
{
  '男': [ { name: '张三', gender: '男' }, { name: '郑六', gender: '男' } ],
  '女': [
    { name: '李四', gender: '女' },
    { name: '王五', gender: '女' },
    { name: '马七', gender: '女' }
  ]
}*/

这个方法也可以按照不同的条件去对数组进行分组,如下:

const users = ['eight', 'nine', 'four', 'seven'];
const grouped_data = groupBy(users,  'length');
console.log(grouped_data);
//结果如下:
/**
{'4': ['nine', 'four'], '5': ['eight', 'seven']}
*/
const nums = [6.5, 4.12, 6.8, 5.4];
const grouped_data = groupBy(nums, Math.floor);
console.log(grouped_data);
//结果如下:
/**
{'4': [4.12], '5': [5.4], '6': [6.5, 6.8]}
*/