如何提取数组内对象的指定属性值并拼接为目标字符串

问题场景 #

现有如下JSON结构：

{
  "restaurant": {
    "categories": [
      {
        "name": "Italia"
      },
      {
        "name": "Modern"
      }
    ]
  }
}

当通过restaurant.categories访问该属性时，返回结果为[object Object],[object Object]，需要提取数组内每个对象的name属性值，最终得到格式为Italia, Modern的字符串。

解决方案 #

方法1：map() + join()（最简洁高效）

通过map()遍历数组，将每个对象转换为对应的name值，再用join()将数组元素拼接成逗号分隔的字符串：

// 假设已获取到目标restaurant对象
const restaurant = {
  "categories": [
    { "name": "Italia" },
    { "name": "Modern" }
  ]
};

const categoryStr = restaurant.categories.map(item => item.name).join(', ');
console.log(categoryStr); // 输出：Italia, Modern

方法2：forEach()手动收集后拼接

如果需要兼容较旧的JavaScript环境，或者想要更直观的手动处理方式：

const categoryNames = [];
// 遍历数组收集所有name值
restaurant.categories.forEach(item => {
  categoryNames.push(item.name);
});
// 将数组拼接为目标字符串
const categoryStr = categoryNames.join(', ');
console.log(categoryStr); // 输出：Italia, Modern

方法3：reduce()一步完成拼接

使用reduce()方法在遍历过程中直接完成字符串拼接，避免额外数组存储：

const categoryStr = restaurant.categories.reduce((prev, current) => {
  // 处理第一个元素，避免开头出现多余逗号
  return prev ? `${prev}, ${current.name}` : current.name;
}, '');
console.log(categoryStr); // 输出：Italia, Modern

内容的提问来源于stack exchange，提问作者Muhammad Husein Al Hakim