如何用JavaScript的map方法为数组对象的items元素添加感叹号？

我来帮你拆解下问题所在～你原来的代码没达到预期，核心原因是**user.items是一个数组**，直接和'!'拼接时，JavaScript会自动把数组转换成逗号分隔的字符串（比如["ball", "book", "pen"]会变成"ball,book,pen"），再加上!就成了"ball,book,pen!"，这显然不是你想要的每个元素单独加!的数组。

推荐实现：Immutable 写法（不修改原数据） #

我们需要在外层map（遍历用户对象）里嵌套一个内层map（遍历每个用户的items数组），给每个元素加上!，同时返回新的对象（避免修改原数组里的原始数据，这种写法在大多数场景下更安全易维护）：

const array = [
 { username: "john", team: "red", score: 5, items: ["ball", "book", "pen"] },
 { username: "becky", team: "blue", score: 10, items: ["tape", "backpack", "pen"] },
 { username: "susy", team: "red", score: 55, items: ["ball", "eraser", "pen"] },
 { username: "tyson", team: "green", score: 1, items: ["book", "pen"] },
];

const plusItems = array.map(user => {
  // 复制原用户对象的所有属性，再覆盖items字段
  return {
    ...user,
    items: user.items.map(item => item + '!')
  };
});

console.log(plusItems);

运行后，每个用户的items都会变成类似["ball!", "book!", "pen!"]的形式，而且原数组的原始对象完全不会被改动。

可选实现：直接修改原数据（不推荐） #

如果完全不在意修改原数组里的对象，也可以直接更新每个用户的items属性：

const plusItems = array.map(user => {
  user.items = user.items.map(item => item + '!');
  return user;
});

这种写法虽然能实现需求，但会直接改变原数组中对象的items值，容易引发意外的副作用，除非你明确知道自己在做什么，否则更推荐第一种 immutable 写法。

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