从JS数组中删除项

Question

我有一个数组，我想从中删除一个站点，但不知为何无法实现。我已经在该函数中添加了一个alert提示，可以确认函数确实被调用了。

为了简化问题，我已经从帖子中移除了一些无关的函数。其中有一个函数能够成功地从数组中删除元素，只是根据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
      }
    ]
  }
]

这是用于删除站点的函数：

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": 1231654351,
        "title": "This is item 2",
        "qty": 1
      },
      {
        "catNum": 9418956196,
        "title": "This is item 1",
        "qty": 1
      }
    ]
  }
]

在线示例：https://jsfiddle.net/Bigmuddyfoot/4v5w2nLa/

coobird · Answer

你好，考虑到你的代码之间并无关联，我以这种方式编写，以便你将其应用到你的项目中。希望对你有所帮助。

const data = [
  {
    "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
      }
    ]
  },
  {
    "siteId": "9843598",
    "items": [
      {
        "catNum": 9418956196,
        "title": "This is item 3",
        "qty": 1
      }
    ]
  }
];

function removeDuplicateSiteIds(data) {
  try {
    const seenSiteIds = new Set();

    for (let i = 0; i < data.length; i++) {
      const siteId = data[i].siteId;

      if (seenSiteIds.has(siteId)) {
        // 重复siteId已找到，移除此项
        const removedItem = data.splice(i, 1)[0];
        i--; // 移除元素后调整索引
        console.log(`已移除重复siteId: ${siteId}`, removedItem);
      } else {
        seenSiteIds.add(siteId);
      }
    }
  } catch (error) {
    console.error("在移除重复siteId时发生错误：", error.message);
  }
}

// 示例用法
console.log("移除前：", data);

removeDuplicateSiteIds(data);

console.log("移除后：", data);

poke · Answer

var cart = [
  {
    "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
      }
    ]
  }
];

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);
  }
}

deleteSite(cart, (89419111).toString());

Divakar · Answer

我认为deleteSite函数可能由于作用域问题未能正确更新购物车。当你将quoteCart传递给deleteSite函数时，函数内部所做的修改仅限于局部作用域。因此，你可以让deleteSite函数返回更新后的quoteCart值，并使用该返回值。

请查看修改后的版本：

function deleteSite(quoteCart, siteId) {
    try {
        // 移除指定siteId的站点
        quoteCart = quoteCart.filter((site) => site.siteId !== siteId);
        console.log("Filtered array:", quoteCart); // 检查过滤后的数组

        // 如果只剩一个站点且其siteId与指定值匹配，则清空quoteCart
        if (quoteCart.length === 1 && parseInt(quoteCart[0].siteId) === siteId) {
            quoteCart = [];
        }

        return quoteCart; // 返回更新后的quoteCart
    } catch (error) {
        console.error("Error in deleteSite:", error);
        return quoteCart; // 若出现错误，返回原始的quoteCart
    }
}

在调用deleteSite函数时，更新quoteCart变量并刷新显示：

quoteCart = deleteSite(quoteCart, siteIdToDelete);
updateCartDisplay();

点击此处查看JSFiddle示例

Gareth · Answer

我认为使用filter()方法是错误的。要移除项目，应使用splice()方法。splice()方法还会直接修改原始数组，因此无需处理返回值。

function deleteSite(quoteCart, siteId) {
  try {
    let index = quoteCart.findIndex((site) => site.siteId === siteId);
    if(index !== -1) quoteCart.splice(index, 1);
    console.log("Filtered array:", quoteCart); // 检查过滤后的数组

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