javascrpt 数组组返回未定义的键值 [英] javascrpt array group return undefined key value

问题描述

我使用下面的代码有条件地向数组添加元素:当 arr1 中的 域 在该域的 arr2 中没有 kwd 时，然后添加键:域、键、位置:n/a"、日期、引擎和设备.

I'm using the code below to add element to the array conditionally: when for a domain in arr1 there isn't a kwd in arr2 for that domain then add the keys: domain, key, position: "n/a", date, engine and device.

jsfiddle

var arr1 = ["xxx", "yyy"];

var arr2 = [
  { domain: "xxx", kwd: "a", position: 1, date: "2021-05-07T08:05:16.806Z", engine: "google", device: "desktop"},
  { domain: "yyy", kwd: "a", position: 2, date: "2021-05-07T08:05:16.806Z", engine: "google", device: "desktop"},

  { domain: "xxx", kwd: "b", position: 1, date: "2021-05-07T08:05:16.806Z", engine: "google", device: "desktop"},
  { domain: "yyy", kwd: "b", position: 2, date: "2021-05-07T08:05:16.806Z", engine: "google", device: "desktop"},

  { domain: "yyy", kwd: "c", position: 2, date: "2021-05-07T08:05:16.806Z", engine: "google", device: "desktop"},

  { domain: "xxx", kwd: "d", position: 1, date: "2021-05-07T08:05:16.806Z", engine: "google", device: "desktop"}
];

const grouped = arr2.reduce((group, entry) => {
  const lookup = group[entry.kwd] || {};
  return {
    ...group,
    [entry.kwd]: {
      ...lookup,
      [entry.domain]: entry
    }
  };
}, {});

const filledIn = Object.entries(grouped).reduce(
  (arr, [key, group]) => [
    ...arr,
    ...arr1.map((domain) =>
      domain in group
        ? group[domain]
        : {
            domain,
            kwd: key,
            position: "n/a",
            date: grouped.date,
            engine: grouped.engine,
            device:grouped.device,
          }
    )
  ],
  []
);

console.log(filledIn);

脚本工作正常，但返回未定义的日期、引擎和设备.

The script works fine but return undefined date, engine and device.

...
{
  date: undefined,
  device: undefined,
  domain: "yyy",
  engine: undefined,
  kwd: "d",
  position: "n/a"
}]

我该如何解决这个问题?

How can I fix this?

谢谢

推荐答案

这是修改后的代码，用于在我的 原始答案.我还添加了一些评论.

Here's the code modified to fill in more values on a missing domain from my original answer. I also added some comments.

通过在最后一步中使用 flatMap() 而不是使用 reduce() 手动生成平面数组，我能够使代码更加简单.

I was able to make the code even simpler by using flatMap() in the last step instead of manually producing a flat array with reduce().

// Group all array rows by their keyword, and inside of the group index each
// entry by its domain, so we can easily check if a domain is in this group.
// Also store an an example of a known good entry so we can clone its values
// onto missing entries in the next step
const grouped = arr2.reduce(
  (groups, entry) => ({
    ...groups,
    [entry.kwd]: {
      ...(groups[entry.kwd] || {}),
      example: entry,
      [entry.domain]: entry
    }
  }),
  {}
);

// Now iterate over the group and pull out all the valid known domains and put
// it back into array form. If a domain is missing, use the "example" we
// captured get example values of a valid domain, and fill in the rest manually
const filledIn = Object.values(grouped).flatMap((group) =>
  arr1.map(
    (domain) =>
      group[domain] || {
        ...group.example,
        position: "n/a"
      }
  )
);

console.log(filledIn);

这篇关于javascrpt 数组组返回未定义的键值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！