javascript - JS 拼接空值数组会删除最后一个索引，无论参数如何

Question

由于特定于此应用程序的原因，数据数组或 null s 用于显示表单列表。差异取决于数据是由服务提供还是手动添加，其中 null表示所有内容都是通过手动添加的 一个按钮而不是一个服务。

所以忽略 null 数组的用例事实证明[null, null, null].splice(0, 1);删除null根据数组长度将值输入到显示的不同表单中，然后查看谁在删除时消失，在索引 2 而不是 0 处。

可以通过添加一些独特的东西来使其工作，例如 { index: theIndex }到数组而不是 null 。因此 splice 现在可以正确删除索引 0 而不是 2 处的项目，但现在我很好奇 splice 在幕后做了什么，无论索引与其他索引相比它的值如何，它都无法删除索引指数。

谁能解释一下splice是在做？基于spec for splice我真的不明白为什么会发生这种情况。

Answer 1

(这来自问题中的评论，但太大而无法成为评论)。

所以我认为您存在概念上的误解(^^)。看一下这个例子:

let a = [1, 2, 3]
a.splice(0, 1) // => 1
a // => [2, 3]

let b = [1, 2, 3]
delete b[0] // => true
b // => [<1 empty slot>, 2, 3]

splice 函数就地修改数组。请注意，虽然我们拼接了第一个元素，但我们得到了一个由两个元素组成的数组。

现在看这个例子

let a = [1, 1, 1]
a.splice(0, 1)
a // => [1, 1]
let b = [1, 1, 1]
b.splice(2, 1)
b // => [1, 1]

我们正在删除 a 中的第一个元素和 b 中的最后一个元素，但当然没有办法知道，所以只需查看结果即可。

在 null 的情况下，也会发生同样的事情。某些库(Angular)试图找出您删除了哪个元素，但无法知道。这是因为 null === null。

例如，如果您使用空对象数组，就会有一种了解的方法。由于 {} !== {}——因为每次转换 {} 时，您都会创建一个唯一的对象——，那么你就可以知道空对象数组中缺少哪个元素。数组 [1, 2, 3] 的情况类似。

let a = [{}, {}, {}] // lets imagine that each object has a unique id
                     // and we have [{}#1, {}#2, {}#3]
let [obj1, obj2, obj3] = a
obj1 === obj2 // => false, because they have different ids.

a.splice(0, 1)
a // => [{}#2, {}#3]
a.includes(obj1) // => false, because {}#1 is no longer in a

因此，使用 null 数组的替代方法是使用空对象数组。我认为这就是为什么当您使用像 { index: theIndex } 这样的对象时，代码对您有用。当然，这一切都取决于 Angular 的智能程度。我敢打赌有一种更原生的删除元素的方法，正如 @KaiserKatze 指出的那样，“如果数组映射到您的模型，直接删除或添加数组中的元素总是一个坏主意。”

你必须明白，当你拼接数组时，你只是在做——从数组中删除一个元素。 拼接数组时您没有删除“表单元素”。相反，一些外部代码正在读取数组并试图在幕后找出您打算做什么。