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

实现方式三

// 假设有一个包含 JSON 对象数组的变量
const jsonArray = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 3, name: "Doe" },
];

// 假设有一个 id 数组
const idArray = [1, 3];

const dict = Object.fromEntries(jsonArray.map((it) => [it.id, it]));

const result = idArray.map((id) => dict[id].name).join(",");

console.log(result);

在这个示例中, Object.fromEntries() 方法创建了一个名为 dict 的新对象。jsonArray 是一个对象数组,使用 map() 方法对每个对象进行转换,将其转换为包含键值对的数组。键是每个对象的 id 属性,值是整个对象本身。然后将这些键值对传递给 Object.fromEntries() 方法,以创建 dict 对象。

posted @ 2024-03-21 16:02  飞仔FeiZai  阅读(299)  评论(0编辑  收藏  举报