关于JS filter方法在导出变量上的使用疑问求助

1. 先搞懂filter和splice的本质区别 #

• splice是「原地修改」原数组：它直接在你调用它的那个数组上删改元素，数组本身在内存里的位置没变，只是内部内容发生了变化。
• filter是「返回新数组」：它完全不会改动原数组，只是遍历原数组把符合条件的元素挑出来，组装成一个全新的数组返回给你，原数组从头到尾都保持原样。

2. 你的代码里到底发生了什么？ #

假设你的业务代码是类似这样的：

// 模块或全局的cart变量
let cart = [{id: 1, quantity: 1}, {id: 2, quantity: 2}];

function decreaseQuantity(productId) {
  const targetItem = cart.find(item => item.id === productId);
  if (!targetItem) return;

  targetItem.quantity--;
  // 数量到0时用filter重新赋值cart
  if (targetItem.quantity === 0) {
    cart = cart.filter(item => item.quantity !== 0);
  }
}

测试里你可能是这样获取cartArr的：

// 直接引用原cart或者浅拷贝
const cartArr = cart; 
// 或者 const cartArr = [...cart];

两种场景的差异 #

场景A：cartArr是原cart的直接引用（const cartArr = cart）

• 用splice修改时：因为splice是原地改原数组，cart和cartArr指向内存里的同一个数组，所以cartArr的内容会同步变化。
• 用filter重新赋值cart时：cart = cart.filter(...)这行代码是让cart变量指向了一个全新的数组，但cartArr还是死死指着原来的旧数组——就像你原来指着一个篮子，后来换了个新篮子，但你的朋友还是盯着旧篮子看，自然看不到新篮子里的东西。

场景B：cartArr是原cart的浅拷贝（const cartArr = [...cart]）

不管用splice还是filter，cartArr都不会变：

• splice改的是原cart数组，cartArr是另一个独立的数组（只是里面的对象元素和原数组共享引用），原数组删元素，cartArr里的元素还在。
• filter是让cart指向新数组，cartArr还是指向之前拷贝出来的旧数组，当然不会有变化。

3. 你困惑「浅拷贝却没被修改」的原因 #

你混淆了数组本身的引用和数组元素的引用：

• 浅拷贝的数组，只是里面的对象元素和原数组共享引用（比如改元素的quantity属性，原数组和拷贝数组的对应元素都会变），但数组本身是两个完全独立的内存块。
• 不管是filter重新赋值cart，还是splice修改原数组的结构，都是在操作「数组本身」，不是操作元素的属性，所以浅拷贝的数组自然不会跟着变。

解决办法 #

如果想让测试里的cartArr能同步看到cart的最新状态，有两种思路：

1. 不要提前赋值cartArr，每次操作后重新获取cart的最新值；
2. 改用splice来删除数量为0的元素，这样cart本身的引用不变，cartArr如果是原引用的话就会同步更新：

// 替换filter的splice写法
if (targetItem.quantity === 0) {
  const itemIndex = cart.findIndex(item => item.id === productId);
  if (itemIndex !== -1) {
    cart.splice(itemIndex, 1);
  }
}

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