JavaScript 实现通过 id 数组获取可展示的 name 拼接字符串
场景
有一个包含许多对象的数组，每个对象都包含了一个标识（id）和一个名称（name）。想要从这个数组中选出特定的一些对象，这些对象的标识（id）在另一个数组中已经给出。然后，想把这些选出来的对象的名称（name）连接成一个字符串，用逗号分隔起来，以便进一步处理或显示。
代码实现
实现方式一
可以使用 JavaScript 中的 Array 的 filter() 和 map() 方法来实现这个功能。以下是一个示例代码：
// 假设你有一个包含 JSON 对象数组的变量
const jsonArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
{ id: 3, name: "Doe" },
];
// 假设你有一个 id 数组
const idArray = [1, 3];
// 使用 filter() 方法筛选出符合 id 数组中的 id 的对象，然后用 map() 方法获取对应的 name 属性
const filteredNames = jsonArray
.filter((obj) => idArray.includes(obj.id))
.map((obj) => obj.name);
// 使用 join() 方法将 name 组合成字符串，以 , 分隔
const result = filteredNames.join(", ");
// 输出结果
console.log(result); // 输出: John, Doe
这个代码首先使用 filter() 方法从 jsonArray 中筛选出符合 idArray 中 id 的对象，然后使用 map() 方法将这些对象转换为对应的 name 属性的数组。最后，使用 join() 方法将数组中的 name 以 , 分隔成一个字符串。
实现方式二
当使用 find() 方法查找数组中的对象时，它会返回第一个满足条件的元素。而 map() 方法会创建一个新数组，其中的元素是原始数组元素调用某个方法后的返回值。
下面是如何使用 find() 和 map() 方法来实现你的场景：
// 假设你有一个包含 JSON 对象数组的变量
const jsonArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
{ id: 3, name: "Doe" },
];
// 假设你有一个 id 数组
const idArray = [1, 3];
// 使用 map() 方法将 id 数组中的每个 id 对应的 name 找出来
const filteredNames = idArray.map((id) => {
// 使用 find() 方法查找满足条件的对象
const foundObject = jsonArray.find((obj) => obj.id === id);
// 如果找到了对象，则返回其 name 属性；否则返回空字符串
return foundObject ? foundObject.name : "";
});
// 使用 join() 方法将 name 组合成字符串，以 , 分隔
const result = filteredNames.join(", ");
// 输出结果
console.log(result); // 输出: John, Doe
在这个示例中，map() 方法用于遍历 idArray 数组中的每个元素，并使用 find() 方法在 jsonArray 中查找与当前 id 匹配的对象。如果找到了匹配的对象，则返回它的 name 属性；否则返回空字符串。最后，使用 join() 方法将 filteredNames 数组中的元素用逗号连接成一个字符串。