首页 > web前端 > js教程 > 如何在 JavaScript 中按公共属性对数组项进行分组?

如何在 JavaScript 中按公共属性对数组项进行分组?

Susan Sarandon
发布: 2024-12-18 19:50:11
原创
980 人浏览过

How to Group Array Items by a Common Property in JavaScript?

使用对象对数组项目进行分组

处理包含对象的数组时,根据公共属性对项目进行分组可能很有用。这可以通过创建组名称到关联值的映射来实现。

假设您有一个如下所示的数组:

myArray = [
  {group: "one", color: "red"},
  {group: "two", color: "blue"},
  {group: "one", color: "green"},
  {group: "one", color: "black"}
]
登录后复制

您希望将其转换为一个新数组,其中项目按“group”属性分组:

myArray = [
  {group: "one", color: ["red", "green", "black"]},
  {group: "two", color: ["blue"]}
]
登录后复制

要实现此目的,您可以使用以下内容步骤:

  1. 创建一个映射对象,将每个“组”属性值映射到一个空数组。
  2. 迭代原始数组中的每个项目,并且:
    检索“group”属性值。
    b.如果映射对象包含该“group”属性值的键,则将“color”属性值推入关联的数组中。否则,向映射对象添加一个值为空数组的新键,并将“颜色”属性值推入该数组。
  3. 最后,将映射对象转换为所需的格式,其中键是“group”属性值和值是具有“group”和“color”属性的对象。

这里是一个示例 JavaScript实现:

var myArray = [
    {group: "one", color: "red"},
    {group: "two", color: "blue"},
    {group: "one", color: "green"},
    {group: "one", color: "black"}
];

var group_to_values = myArray.reduce(function (obj, item) {
    obj[item.group] = obj[item.group] || [];
    obj[item.group].push(item.color);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function (key) {
    return {group: key, color: group_to_values[key]};
});
登录后复制

执行后,此代码将生成所需的分组数组:

groups:

{
  "one": [
    "red",
    "green",
    "black"
  ],
  "two": [
    "blue"
  ]
}
登录后复制

以上是如何在 JavaScript 中按公共属性对数组项进行分组?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板