从JS数组中按siteId删除元素失败，寻求问题排查方案

我有一个包含站点对象的数组，尝试通过deleteSite函数根据siteId删除对应站点元素，但功能无法正常工作。已确认函数能被调用，其他数组元素删除功能运行正常，唯独按siteId删除站点的功能异常。

数组结构 #

[
  {
    "siteId": "9843598",
    "items": [
      {
        "catNum": 9418956196,
        "title": "This is item 1",
        "qty": 1
      }
    ]
  },
  {
    "siteId": "89419111",
    "items": [
      {
        "catNum": 1231654351,
        "title": "This is item 2",
        "qty": 1
      },
      {
        "catNum": 9418956196,
        "title": "This is item 1",
        "qty": 1
      }
    ]
  }
]

现有deleteSite函数代码 #

function deleteSite(quoteCart, siteId) {
  try {
    quoteCart = quoteCart.filter((site) => site.siteId !== siteId);
    console.log("Filtered array:", quoteCart); // 查看过滤后的数组

    updateCartDisplay();
    openWindowWithArrayContents();
  } 
  catch (error) {
    console.error("Error in deleteSite:", error);
  }
}

预期结果 #

删除siteId为"9843598"的站点后，数组应变为：

[
  {
    "siteId": "89419111",
    "items": [
      {
        "catNum": 9418956196,
        "title": "This is item 1",
        "qty": 1
      },
      {
        "catNum": 1231654351,
        "title": "This is item 2",
        "qty": 1
      }
    ]
  }
]

问题原因 #

核心问题是数组作为参数传递时是值传递：你在函数内部重新赋值quoteCart = quoteCart.filter(...)，只是修改了函数内部的局部变量，并没有改变外部的原数组引用。所以外部的原数组根本没被更新，导致页面显示没有变化。

解决方案 #

方案1：返回过滤后的数组，外部更新原数组 #

这种方式遵循函数式编程思路，不修改原数组，返回新数组供外部更新引用：

function deleteSite(quoteCart, siteId) {
  try {
    const filteredCart = quoteCart.filter((site) => site.siteId !== siteId);
    console.log("Filtered array:", filteredCart);
    updateCartDisplay();
    openWindowWithArrayContents();
    return filteredCart; // 返回处理后的新数组
  } catch (error) {
    console.error("Error in deleteSite:", error);
    return quoteCart; // 出错时返回原数组，避免数据丢失
  }
}

// 调用函数时更新原数组引用
quoteCart = deleteSite(quoteCart, "9843598");

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

如果需要保持原数组引用不变，可以用splice直接修改原数组：

function deleteSite(quoteCart, siteId) {
  try {
    // 找到要删除的站点索引
    const targetIndex = quoteCart.findIndex(site => site.siteId === siteId);
    if (targetIndex !== -1) {
      quoteCart.splice(targetIndex, 1); // 从原数组中删除对应元素
    }
    console.log("Updated array:", quoteCart);
    updateCartDisplay();
    openWindowWithArrayContents();
  } catch (error) {
    console.error("Error in deleteSite:", error);
  }
}

两种方案都能解决问题，可根据你的代码上下文选择：如果偏好不可变数据，选方案1；如果需要维持原数组引用，选方案2。

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