javascript - 如何通过 id 将对象与 jquery 合并

Question

我需要能够连接两个 JavaScript 对象，如下所示：

let arr1 = [
              {"0": { id: "abdc4051", date: "2017-01-24" }},
              {"1": { id: "abdc4052", date: "2017-01-22" }}
           ];
let arr2 = [
              {"0": { category: "Sport", data: {code: "abdc4051", name: "ab"} } },
              {"1": { category: "Others", data: {code: "abdc4052", name: "abc"} } }
           ];

有没有人有这个脚本或知道内置的方法来做到这一点？我希望将日期添加到 arr2 上的数据中，条件代码等于 id

标签： javascriptjqueryarraysobject

Answer 1

您的对象形状使这比应有的更难。您确定要每个对象中的顺序属性，还是记录/解析不良的工件？

如果您确实需要它们，则需要解决它们，在下面的代码段中使用Object.values()in 创建 a Mapfrom arr1，并Object.entries()在最终map()调用中使用arr2来存储顺序键，然后在合并逻辑之后的 return 中重新引入它。

const
  arr1 = [{ "0": { id: "abdc4051", date: "2017-01-24" } }, { "1": { id: "abdc4052", date: "2017-01-22" } }],
  arr2 = [{ "0": { category: "Sport", data: { code: "abdc4051", name: "ab" } } }, { "1": { category: "Others", data: { code: "abdc4052", name: "abc" } } }],

  // create map of dates: Map(2) { 'abdc4051' => '2017-01-24', 'abdc4052' => '2017-01-22' }
  dateMap = new Map(arr1.map(o => {
    const [{ id, date }] = Object.values(o);
    return [id, date];
  })),
  
  // map over arr2, get date from Map and add it to 'data' if it exists
  result = arr2.map(o => {
    const [[k, _o]] = Object.entries(o);
    const date = dateMap.get(_o.data.code);
    return {
      [k]: {
        ..._o,
        data: { ..._o.data, ...(date ? { date } : {}) }
      }
    };
  });

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

如果您不需要初始顺序键，则合并变得不那么冗长。

const
  arr1 = [{ id: "abdc4051", date: "2017-01-24" }, { id: "abdc4052", date: "2017-01-22" }],
  arr2 = [{ category: "Sport", data: { code: "abdc4051", name: "ab" } }, { category: "Others", data: { code: "abdc4052", name: "abc" } }],

  dateMap = new Map(arr1.map(o => [o.id, o.date])),

  result = arr2.map(o => (
    {
      ...o,
      data: { ...o.data, ...(dateMap.has(o.data.code) ? { date: dateMap.get(o.data.code) } : {}) }
    }
  ));

console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }