使用array.map()修改巧克力蛋糕状态的问题及实现咨询

原蛋糕数组：

var cakes = [
    {name: "cake", flavor: "vanilla", status: "available"},
    {name: "brownie", flavor: "chocolate", status: "available"},
    {name: "pie", flavor: "strawberry", status: "available"},
    {name: "muffin", flavor: "pistachio", status: "available"},
    {name: "donut", flavor: "chocolate", status: "available"},
];

尝试的代码：

var soldOut1=cakes.map(function(cake){
    if(cake.flavor==="chocolate"){
        return cake.status="sold out";
}
else{return cake;}
});
console.log(soldOut1);

得到的结果：

[
  { name: 'cake', flavor: 'vanilla', status: 'available' },
  'sold out',
  { name: 'pie', flavor: 'strawberry', status: 'available' },
  { name: 'muffin', flavor: 'pistachio', status: 'available' },
  'sold out'
]

问题核心：巧克力口味的蛋糕项仅返回了status值，丢失了其他属性。想知道仅使用array.map()能否完成需求，以及如何修正代码？

仅用array.map()完全可以完成这个需求，你的问题出在回调函数的返回值上：当处理巧克力口味蛋糕时，你返回的是cake.status="sold out"——这个赋值语句的返回值是字符串"sold out"，而非修改后的完整蛋糕对象，所以数组里对应的位置就变成了字符串，丢失了其他属性。

修正方案1：修改原对象（会改变原数组） #

如果不介意修改原数组的对象，可以直接修改对象的status属性，然后返回整个对象：

var soldOut1 = cakes.map(function(cake) {
  if (cake.flavor === "chocolate") {
    cake.status = "sold out"; // 修改原对象的status属性
  }
  return cake; // 始终返回完整的蛋糕对象
});

执行后，soldOut1里的每一项都是完整的蛋糕对象，巧克力口味的status已被改为sold out。但注意：原数组cakes里的巧克力蛋糕对象也会被修改（因为对象是引用类型）。

修正方案2：创建新对象（不修改原数组，推荐） #

如果希望保留原数组不变，遵循函数式编程的纯函数原则，可以用对象展开运算符创建新对象，避免修改原数据：

var soldOut1 = cakes.map(function(cake) {
  return cake.flavor === "chocolate" 
    ? {...cake, status: "sold out"} // 复制原对象并覆盖status
    : {...cake}; // 非巧克力口味也复制原对象（若不需要保护原对象，可直接return cake）
});

这个方案里，map返回的是全新的对象数组，原数组cakes不会有任何变化，更安全且符合map的设计初衷。

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