为何let声明的mockProducts变量经filter过滤后未改变？

核心原因 #

Array.prototype.filter() 是一个不会修改原数组的纯函数——它的作用是遍历原数组，返回一个包含所有符合过滤条件元素的新数组，而不会对原数组做任何改动。

你的代码里只是调用了filter方法，但没有把它返回的新数组赋值给mockProducts变量，所以原数组自然保持原样：

// 这行代码只生成了新数组，但没有保存它
mockProducts.filter(el => el.id !== req.params.id);

解决方案 #

要让mockProducts更新为过滤后的结果，需要把filter返回的新数组重新赋值给它：

app.put('/remove_product/:id', (req, res) => {
  // 将过滤后的新数组赋值给原变量
  mockProducts = mockProducts.filter(el => el.id !== req.params.id);
  // 可以返回更新后的数组给前端
  res.json({ success: true, updatedProducts: mockProducts });
});

替代方案：直接修改原数组（使用splice） #

如果你更倾向于直接修改原数组而非替换它，可以用findIndex找到目标元素的索引，再用splice删除：

app.put('/remove_product/:id', (req, res) => {
  const targetIndex = mockProducts.findIndex(el => el.id === req.params.id);
  // 找到元素才执行删除操作
  if (targetIndex !== -1) {
    mockProducts.splice(targetIndex, 1);
  }
  res.json({ success: true, updatedProducts: mockProducts });
});

两种方式的区别 #

• filter方式：符合函数式编程风格，不修改原数组，避免副作用，代码简洁直观。
• splice方式：直接操作原数组，适合需要保留原数组引用的场景（比如其他地方还在引用这个数组的内存地址）。

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