使用splice移除嵌套数组元素时出现数组合并异常问题

初始数组状态 #

我有一个名为added_collections的数组，初始结构如下：

added_collections
(2) [Array(2), Array(1)]
0: Array(2)
0: []
1: [{…}]
length: 2
[[Prototype]]: Array(0)
1: [Array(10)]
length: 2

执行的操作 #

我需要移除集合中的一个产品，编写了以下代码：

added_collections[0][1].splice(0, 1);

预期结果 #

操作后预期数组结构为：

added_collections
(2) [Array(2), Array(1)]
0: Array(2)
0: []
1: []
length: 2
[[Prototype]]: Array(0)
1: [Array(10)]
length: 2
[[Prototype]]: Array(0)

实际结果 #

但实际得到的结果却是：

(2) [Array(2), Array(1)]
0: Array(0)
length: 0
[[Prototype]]: Array(0)
1: [Array(10)]
length: 2

疑问 #

为什么两个空数组会被合并？我在浏览器控制台中手动执行步骤一切正常，但运行相同代码时结果却不一致，似乎两个空数组消失了。

更新内容 #

added_collection[0]的原始字符串 #

'[[[],[{"id":32620843270280,"product_id":4632299831432,"title":"3 / red","price":"249.00","sku":"DM-03-red-3","position":1,"inventory_policy":"deny","compare_at_price":"0.00","fulfillment_service":"manual"}]]]'

实际运行的JavaScript代码 #

let coll_no = 0;
let page_no = 1;
let product_no = 0;

added_collections[coll_no][page_no].splice(product_no, 1);

问题原因与解决方案 #

1. 数组嵌套层级理解错误
   从你更新的added_collection[0]原始字符串可以看出，它的实际结构是三层数组嵌套：[[[], [{...}]]]，而非你最初认为的[[], [{...}]]。

你代码中added_collections[coll_no][page_no]（coll_no=0、page_no=1）实际访问的是最外层数组的索引1元素，但该层级数组只有1个元素（索引0），导致added_collections[0][1]的值为undefined。对undefined调用splice会触发异常，而你看到的空数组结果，大概率是代码执行时触发了其他逻辑（比如数组自动扁平化、或有过滤空数组的处理），或是数组结构在操作前已被修改。

2. 正确的操作代码
   根据实际嵌套层级，要移除产品应该访问到正确的数组层级：

let coll_no = 0;
let inner_arr_idx = 1; // 对应added_collections[0][0]中的第1个元素
let product_no = 0;

added_collections[coll_no][0][inner_arr_idx].splice(product_no, 1);

3. 控制台与代码执行差异的原因

• 控制台中你手动访问了正确的数组层级，而代码里的page_no值错误（应为0而非1）；
• 代码执行时，added_collections的结构在操作前被其他代码修改，和你在控制台查看的状态不一致。

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