如何将JavaScript数组元素转为对象值并添加指定对象？

先说说你之前代码的问题： #

• forEach的错误：forEach没有返回值，所以obj2最终会是undefined；另外箭头函数里直接写{label: "element", value: "element"}会被解析成代码块而非对象，要包裹成({label: element, value: element})，而且你写的"element"是字符串，应该用遍历的变量element。
• map的错误：map的回调函数每次只能返回一个元素，你用逗号分隔两个对象返回时，JS的逗号表达式只会取最后一个值，所以最终得到的数组全是{label: "Others", value: "Others"}，原数组的元素根本没被正确转换添加。

正确的实现方法： #

这里提供几种简洁有效的写法：

方法1：扩展运算符 + map

const stringsArray = ["abc", "def", "ghi"];
const stringsObjects = [
  // 先把原数组每个元素转成目标结构
  ...stringsArray.map(item => ({ label: item, value: item })),
  // 最后追加Others对象
  { label: "Others", value: "Others" }
];

方法2：map + concat

const stringsArray = ["abc", "def", "ghi"];
const stringsObjects = stringsArray
  .map(item => ({ label: item, value: item }))
  // 用concat追加单个对象（concat支持传入对象或数组）
  .concat({ label: "Others", value: "Others" });

方法3：map + push（适合需要修改原转换数组的场景）

const stringsArray = ["abc", "def", "ghi"];
const stringsObjects = stringsArray.map(item => ({ label: item, value: item }));
// 直接push追加对象
stringsObjects.push({ label: "Others", value: "Others" });

这些方法都能正确得到你想要的对象数组结构。

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