时间戳

首页 > 解决方案 > 将具有不同对象类型的两个不同数组合并为一个

javascript - 将具有不同对象类型的两个不同数组合并为一个

问题描述

我想将两个具有不同对象类型的不同数组合并为一个。

假设我有一个数组：

var column = [
  {
    "href": "./?course=13&sort=firstname&silast=all&sifirst=all",
    "title": null
  },
  {
    "href": undefined,
    "title": undefined
  },
  {
    "href": "http://someurl.edu.lk/mod/questionnaire/view.php?id=304",
    "title": "Survey on student familiarity with the online learning platform"
  },
  {
    "href": "http://someurl.edu.lk/mod/assign/view.php?id=307",
    "title": "update your profile"
  }
]

另一个数组为：

var obj = [
  {
    name: "POD DLK",
    profile: "http://someurl.edu.lk/user/view.php?id=217&course=103"
  },
  {
    name: "BGC DO",
    profile: "http://someurl.edu.lk/user/view.php?id=218&course=103"
  },
  {
    name: "CAD SG",
    profile: "http://someurl.edu.lk/user/view.php?id=219&course=103"
  },
  {
    name: "BON DTH",
    profile: "http://someurl.edu.lk/user/view.php?id=207&course=103"
  }
]

我试过一个使用：

const mergedArray = [ ...column, ...obj]
console.log(mergedArray)

但这在mergeArray中创建了一个单独的对象。

但是，我想将第一个对象从obj合并到column中的第一个对象。

预期输出：

[{
  href: "./?course=13&sort=firstname&silast=all&sifirst=all",
  title: null,
  name: "POD DLK",
  profile: "http://someurl.edu.lk/user/view.php?id=217&course=103"
}, {
  href: undefined,
  title: undefined,
  name: "BGC DO",
  profile: "http://someurl.edu.lk/user/view.php?id=218&course=103"
}, {
  href: "http://someurl.edu.lk/mod/questionnaire/view.php?id=304",
  title: "Survey on student familiarity with the online learning platform",
  name: "CAD SG",
  profile: "http://someurl.edu.lk/user/view.php?id=219&course=103"
}, {
  href: "http://someurl.edu.lk/mod/assign/view.php?id=307",
  title: "update your profile",
  name: "BON DTH",
  profile: "http://someurl.edu.lk/user/view.php?id=207&course=103"
}]

标签： javascriptarraysdata-structuresmapreducemapping

解决方案

您需要按相同的索引合并。

const
    column = [{ href: "./?course=13&sort=firstname&silast=all&sifirst=all", title: null }, { href: undefined, title: undefined }, { href: "http://someurl.edu.lk/mod/questionnaire/view.php?id=304", title: "Survey on student familiarity with the online learning platform" }, { href: "http://someurl.edu.lk/mod/assign/view.php?id=307", title: "update your profile" }],
    obj = [{ name: "POD DLK", profile: "http://someurl.edu.lk/user/view.php?id=217&course=103" }, { name: "BGC DO", profile: "http://someurl.edu.lk/user/view.php?id=218&course=103" }, { name: "CAD SG", profile: "http://someurl.edu.lk/user/view.php?id=219&course=103" }, { name: "BON DTH", profile: "http://someurl.edu.lk/user/view.php?id=207&course=103" }],
    result = column.map((o, i) => ({ ...o, ...obj[i] }));

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

与 reduce 完全不同的方法

const
    column = [{ href: "./?course=13&sort=firstname&silast=all&sifirst=all", title: null }, { href: undefined, title: undefined }, { href: "http://someurl.edu.lk/mod/questionnaire/view.php?id=304", title: "Survey on student familiarity with the online learning platform" }, { href: "http://someurl.edu.lk/mod/assign/view.php?id=307", title: "update your profile" }],
    obj = [{ name: "POD DLK", profile: "http://someurl.edu.lk/user/view.php?id=217&course=103" }, { name: "BGC DO", profile: "http://someurl.edu.lk/user/view.php?id=218&course=103" }, { name: "CAD SG", profile: "http://someurl.edu.lk/user/view.php?id=219&course=103" }, { name: "BON DTH", profile: "http://someurl.edu.lk/user/view.php?id=207&course=103" }],
    result = [column, obj].reduce((r, a) => a.map((o, i) => ({ ...r[i], ...o })), []);

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

推荐阅读