根据 Id 映射对象数组答案

【问题标题】：Map array of objects based on Id根据 Id 映射对象数组
【发布时间】：2020-08-01 02:33:47
【问题描述】：

这里是 Noob javascript 爱好者。

我正在尝试理解 javascript 的各种高阶函数，并且对 .map() 在对象数组上的可能性特别好奇。

假设你有以下：

selectedId = ['u1', 'u2']
data = [
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'},
{id: 'u3', color: 'yellow', age: '15'}
]

你将如何创建一个只包含 u1 和 u2 对象的新数组？即：

selectedData = [
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'},
]

【问题讨论】：

哪个数组取决于结果的顺序？你试过什么吗？什么不起作用？

标签： javascript arrays javascript-objects array.prototype.map

【解决方案1】：

如果我理解正确，您可以使用数组过滤器

data.filter(el => selectedId.includes(el.id));

会给

[
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'}
]

也可以选择

selectedId.map((id) => data.find((el) => el.id === id));

会给

[
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'}
]

【讨论】：

【解决方案2】：

您必须在selectedId 数组上使用Array#map，然后使用Array#find 在data 数组中找到相应的对象。

const selectedId = ['u1', 'u2'];

const data = [
  {id: 'u1', color: 'red', age: '24'},
  {id: 'u2', color: 'blue', age: '18'},
  {id: 'u3', color: 'yellow', age: '15'}
];

const res = selectedId.map((id) => data.find((o) => o.id === id));

console.log(res);

【讨论】：