如何基于元素属性将JavaScript数组映射为多维数组？

给定对象数组：

var arr = [
    {name:"item1", category:0},
    {name:"item2", category:3},
    {name:"item3", category:1},
    {name:"item4", category:1},
]

目标是生成固定长度（长度为4）的多维数组，每个子数组对应category值匹配的元素：

var arr2 = [
    [{name:"item1", category:0}],
    [{name:"item3", category:1},{name:"item4", category:1}],
    [],
    [{name:"item2", category:3}]
]

你当前的forEach写法逻辑清晰且效率不错（仅遍历原数组一次），如果追求更简洁的声明式一行写法，可以结合map和filter实现：

const arr2 = Array(4).fill().map((_, index) => arr.filter(item => item.category === index));

说明： #

• Array(4)创建一个长度为4的空数组，但稀疏数组无法直接用map遍历，所以用fill()填充（默认填充undefined），让map能遍历每一个索引。
• 对每个索引index，用filter筛选出原数组中category等于该索引的元素，自动组成对应子数组，没有匹配元素时自然生成空数组。

注意： #

这个写法的代价是会遍历原数组4次（每个索引对应一次filter），如果原数组数据量很大，你原来的forEach写法性能会更优——毕竟只遍历一次原数组。如果只是追求代码简洁性，上面的一行写法完全符合需求。

内容的提问来源于stack exchange，提问作者wololoo