js数组如何根据属性分组

arr = [

      { name: 'apple', color: 'red' },

      { name: 'banana', color: 'yellow' },

      { name: 'grape', color: 'purple' },

      { name: 'apple', color: 'green' },

      { name: 'banana', color: 'green' },

      { name: 'grape', color: 'purple' },

    ];

一.根据name分组

1.用findIndex（）

let dataArr = [];
arr.map((mapItem) => {
      let index = dataArr.findIndex((item) => item.name === mapItem.name);
      if (index === -1) {
        dataArr.push({
          name: mapItem.name,
          List: [mapItem],
        });
      } else {
        dataArr[index].List.push(mapItem);
      }
    });
let newArr= dataArr;
console.log(newArr)
-----输出结果----
[
{name: "apple",List:[{name: 'apple', color: 'red'},{name: 'apple', color: 'green'}]},
{name:"banana",List:[{name: 'banana', color: 'yellow'},{name: 'banana', color: 'green'}]},
{name:"grape",List:[{name: 'grape', color: 'purple'},{name: 'grape', color: 'purple'}]}
]

2.用for循环

const names = Array.from(new Set(arr.map(item => item.name)));
let list = [];
for (let j = 0; j < arr.length; j++) {
    let index = names.indexOf(arr[j].name);
    if (list[index]) {
        list[index] = [...list[index], ...[arr[j]]];
    } else {
        list.push([arr[j]]);
    }
}
console.log(list)
----输出结果---
[
[{name: 'apple', color: 'red'},{name: 'apple', color: 'green'}],
[{name: 'banana', color: 'yellow'},{name: 'banana', color: 'green'}],
[{name: 'grape', color: 'purple'},{name: 'grape', color: 'purple'}]
]

二.根据name 、color一起分组

let result = arr.reduce((acc, cur) => {
      let key = cur.name + cur.color;
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(cur);
      return acc;
    }, {});

    console.log(result);
----输出结果----
    {
  "applered": [
    { "name": "apple", "color": "red" }
  ],
  "bananayellow": [
    { "name": "banana", "color": "yellow" }
  ],
  "grapepurple": [
    { "name": "grape", "color": "purple" },
    { "name": "grape", "color": "purple" }
  ],
  "applegreen": [
    { "name": "apple", "color": "green" }
  ],
  "bananagreen": [
    { "name": "banana", "color": "green" }
  ]
}