将数组的数组转换为JavaScript分组的数组对象
假设我们有一个二维数组,其中包含有关某种颜色和水果的数据,如下所示
const data = [ ['orange', 'fruit'], ['red', 'color'], ['green', 'color'], ['orange', 'color'], ['banana', 'fruit'], ['blue', 'color'], ['lemon', 'fruit'], ['mango', 'fruit'], ['lemon', 'color'], ];
我们必须编写一个函数,该函数采用此数组并返回一个数组,其中不同的水果和颜色按其类别分组。
例如,在这个示例中,我们只有两个类别,即“水果”和“颜色”,因此我们应该希望在输出中获得一个包含两个对象的数组,如下所示 -
[ { group: 'fruit', value: [ 'orange', 'banana', 'lemon', 'mango' ] }, { group: 'color', value: [ 'red', 'green', 'orange', 'blue', 'lemon' ] } ]
请注意 - 在此示例中,我们只有两个类别,但我们需要编写一个解决方案,适用于动态数量的类别,而不仅仅是两个。
因此,让我们为这个问题构思一个解决方案。我们将使用 Array.prototype.reduce() 方法,对于每个子数组,我们将检查我们是否有现有的组。如果该组存在,我们会将其新值推入其值属性,否则我们会为该组创建一个新对象并将其推入数组。
示例
const data = [ ['orange', 'fruit'], ['red', 'color'], ['green', 'color'], ['orange', 'color'], ['banana', 'fruit'], ['blue', 'color'], ['lemon', 'fruit'], ['mango', 'fruit'], ['lemon', 'color'], ]; const groupData = arr => { return arr.reduce((acc, val) => { const [value, groupName] = val; const groupIndex = acc.findIndex(el => el?.group === groupName); if(groupIndex !== -1){ acc[groupIndex].value.push(value); }else{ acc.push({ group: groupName, value: [value] }); } return acc; }, []); }; console.log(groupData(data));
输出
控制台中的输出将为 -
[ { group: 'fruit', value: [ 'orange', 'banana', 'lemon', 'mango' ] }, { group: 'color', value: [ 'red', 'green', 'orange', 'blue', 'lemon' ] } ]
广告