JavaScript中字符串数组转键值对对象数组的实现问题

给定如下字符串数组：

const locationQuery = [
  "Antwerpen",
  "Hemiksem",
  "Antwerpenlei, Brasschaat",
  "Antwerpenplein, Gent",
  "Antwerpenstraat, Bredene",
  "Antwerpenstraat, Oostende",
  "'s-Herenstraat, Antwerpen",
  "'t Berkenveld, Antwerpen",
  "'t Doolhofje, Antwerpen",
  "'t Duivelshoekje, Antwerpen"
];

需要将其转换为每个元素都包含title和value属性（属性值为原数组对应字符串）的对象数组。

错误原因分析 #

你之前使用reduce只得到最后一个元素，是因为初始值设为了空对象{}，每次迭代都会生成一个新对象覆盖之前的title和value，最终只会保留最后一次迭代的结果。

正确解法 #

方法1：使用map（推荐）

map是数组转换场景下最直观的方法，它会遍历数组并返回一个新数组，每个元素对应原数组元素的转换结果：

const transformedArray = locationQuery.map(item => ({
  title: item,
  value: item
}));

方法2：使用reduce（如果非要用的话）

需要将初始值设为空数组[]，每次迭代向数组中添加新对象：

const transformedArray = locationQuery.reduce((acc, item) => {
  acc.push({ title: item, value: item });
  return acc;
}, []);

两种方法最终都会生成你期望的格式：

[
  {title: "Antwerpen", value: "Antwerpen"},
  {title: "Hemiksem", value: "Hemiksem"},
  {title: "Antwerpenlei, Brasschaat", value: "Antwerpenlei, Brasschaat"},
  // ... 剩余元素
]

内容的提问来源于stack exchange，提问作者intercoder