VueJS中如何对对象数组的price字段保留两位小数？

嘿，你的问题我懂了——你用myObj.map(a => a.price.toFixed(2))没得到想要的结果，核心原因是这个写法只返回了处理后的price值数组，而不是包含修改后price的完整对象数组。咱们来一步步解决：

为什么原写法不生效？ #

Array.map()会根据你返回的值生成新数组。你当前的代码只返回了a.price.toFixed(2)，所以最终得到的是像["24.77", "12.16", "2.00"]这样的字符串数组，而不是你想要的、保留原对象结构的数组。

正确实现方式 #

方式1：生成新数组（推荐，不修改原数据） #

我们需要在map里返回一个新对象，复制原对象的所有属性，同时替换处理后的price：

const myObj = [ {name: 'ice', price: 24.76834}, {name: 'cake', price: 12.1623}, {name: 'powder', price: 2} ];

// 得到price为字符串类型的新数组（比如"24.77"）
const updatedObj = myObj.map(item => ({
  ...item, // 复制原对象的所有属性
  price: item.price.toFixed(2)
}));

// 如果需要price是数字类型（比如24.77），可以转一下类型
const updatedObjWithNumber = myObj.map(item => ({
  ...item,
  price: Number(item.price.toFixed(2))
}));

方式2：直接修改原数组 #

如果你确实需要修改原数组的内容，可以用forEach遍历修改每个对象的price：

myObj.forEach(item => {
  // 同样可以选择字符串或数字类型
  item.price = Number(item.price.toFixed(2));
});

小提示 #

• toFixed(2)会自动做四舍五入，并且返回字符串格式的结果；如果需要数值类型，记得用Number()转换。
• 浮点数运算可能存在精度问题（比如某些极端数值的四舍五入），如果是涉及金额等敏感场景，建议考虑用专门的数值处理库，但一般业务场景下上面的写法足够用啦。

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