我想用这串 keys

const vec_of_vals = ["one", "two", "three", "four"]

对对象数组进行分组和过滤的步骤

const data = [
  {grade: "one"},
  {grade: "one"},
  {grade: "one"},
  {grade: "two"},
  {grade: "four"},
  {grade: "four"},
  {grade: "four"},
  {grade: "four"},
  {grade: "five"},
  {grade: "five"},
  {grade: "five"},
  {grade: "six"}
]

我找到了可以帮助我做到这一点的帖子,but they don't include an empty 100 array which is in my initial 101

以下是我try 过的方法

function groupByKey(array, key) {
  return array.reduce((hash, obj) => {
    if (obj[key] === undefined) return hash;
    return Object.assign(hash, {
      [obj[key]]: (hash[obj[key]] || []).concat(obj),
    });
  }, {});
}

groupByKey(
  data.filter((x) => vec_of_vals.includes(x.grade)),
  "grade"
);

但是这不会给我提供空的three数组,并且它不会保持我数据的原始顺序!作为视觉效果,下面是我想要的输出:

Desired Output

let desired_output = {
  "one" : [
    {grade: "one"},
    {grade: "one"},
  ],
  "two" : [
    {grade: "two"},
  ],
  "three" : [],
  "four" : [
    {grade: "four"},
    {grade: "four"},
    {grade: "four"},
    {grade: "four"}
  ]
}

如何将groupByKey函数更改为不仅按grade分组,而且插入任何缺失的分数,删除不在原始关键字中的任何分数,并保持原始vec_of_vals的顺序?

推荐答案

你可以给你的成绩打Array::reduce()分:

const grades = 'abcd'.split('');
const data = [
        { grade: "a" }, { grade: "a" }, { grade: "a" }, { grade: "b" }, { grade: "d" }, { grade: "d" }, { grade: "d" }, { grade: "d" }, { grade: "e" }, { grade: "e" }, { grade: "e" }, { grade: "f" }
    ];

const grouped = grades.reduce((grouped, key) => (grouped[key] = data.filter(({grade}) => grade === key)) && grouped, {});

console.log(JSON.stringify(grouped));

或者,您可以迭代您的数据数组(速度快两倍):

const grades = 'abcd'.split('');
const data = [
        { grade: "a" }, { grade: "a" }, { grade: "a" }, { grade: "b" }, { grade: "d" }, { grade: "d" }, { grade: "d" }, { grade: "d" }, { grade: "e" }, { grade: "e" }, { grade: "e" }, { grade: "f" }
    ];

const grouped = grades.reduce((grouped, grade) => (grouped[grade] = []) && grouped, {});

data.forEach(item => grouped[item.grade]?.push(item));

console.log(JSON.stringify(grouped));

And the benchmark: enter image description here

<script benchmark data-count="1">

    const grades = 'abcd'.split('');

    const data = JSON.parse(JSON.stringify(Array.from({ length: 300000 }).reduce(arr => arr.push(...[
        { grade: "a" }, { grade: "a" }, { grade: "a" }, { grade: "b" }, { grade: "d" }, { grade: "d" }, { grade: "d" }, { grade: "d" }, { grade: "e" }, { grade: "e" }, { grade: "e" }, { grade: "f" }
    ]) && arr, [])));

    // @benchmark reducing grades and filtering data

    grades.reduce((grouped, key) => (grouped[key] = data.filter(({ grade }) => grade === key)) && grouped, {});

    // @benchmark iterating data array

    const grouped = grades.reduce((grouped, grade) => (grouped[grade] = []) && grouped, {});

    data.forEach(item => grouped[item.grade]?.push(item));
    grouped;


</script>
<script src="https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js"></script>

Javascript相关问答推荐

TypScript:根据共享属性对项目进行分组并为其分配groupID

如何在非独立组件中使用独立组件?

通过实现regex逻辑自定义数据表搜索

如何保持子画布元素的1:1宽高比?

如何在不分配整个数组的情况下修改包含数组的行为主体?

有Angular 的material .未应用收件箱中的价值变化

materialized - activeIndex返回-1

如何避免移动设备中出现虚假调整大小事件?

如何在RTK上设置轮询,每24小时

. NET中Unix时间转换为日期时间的奇怪行为

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器?

如何在输入元素中附加一个属性为checkbox?

如何使用JavaScript拆分带空格的单词

在我的index.html页面上找不到我的Java脚本条形图

如何 for each 输入动态设置输入变更值

将范围 Select 器添加到HighChart面积图

OnClick更改Json数组JSX中的图像源

用于部分字符串的JavaScript数组搜索

输入的值的类型脚本array.排序()

有没有办法更改Chart.js 3.x.x中主要刻度的字体?