如何移除对象数组中值为0的属性？排查代码返回undefined的问题

嘿，我来帮你拆解下代码里的问题，以及怎么修复它～

你的代码为什么会返回全undefined的数组？ #

核心问题出在map里的forEach调用上：

• forEach方法本身没有返回值（它的返回值是undefined），所以你用map遍历数组时，每一次的回调函数都返回undefined，最终newData自然就是全undefined的数组。
• 另外，你的代码还直接修改了原数组data里的对象（通过delete e[key]），这会导致原数据被篡改，可能带来意料之外的副作用。

正确的实现方式 #

我们需要在map里返回处理后的新对象，同时不修改原数据。这里有两种简洁的写法：

方法1：使用reduce构建新对象 #

const data = [ { percent: 123, unit: -1 }, { percent: 456, unit: 0 }, { percent: 0, unit: 5}, { percent: 789, unit: -3 } ];
const newData = data.map(item => {
  // 遍历原对象的键，筛选出值不为0的属性，构建新对象
  return Object.keys(item).reduce((newObj, key) => {
    if (item[key] !== 0) {
      newObj[key] = item[key];
    }
    return newObj;
  }, {});
});
console.log(newData);

方法2：使用Object.fromEntries（更简洁） #

利用Object.entries把对象转成键值对数组，筛选后再转回对象：

const data = [ { percent: 123, unit: -1 }, { percent: 456, unit: 0 }, { percent: 0, unit: 5}, { percent: 789, unit: -3 } ];
const newData = data.map(item => 
  Object.fromEntries(
    Object.entries(item).filter(([_, value]) => value !== 0)
  )
);
console.log(newData);

这两种方法都会输出你预期的结果，并且不会修改原数组里的对象，保持了数据的不可变性。

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