JavaScript 实现通过 id 数组获取可展示的 name 拼接字符串

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 数组中的元素用逗号连接成一个字符串。