javascript - 为什么当数组元素相同时 Splice 只删除最后一个元素

Question

转到此 StackBlitz Link (不工作)

转到此 StackBlitz Link (工作正常)

我的问题是关于Array.splice。Array.splice 在数组数据不同但数组数据相同时工作正常，Array.splice 仅删除最后一个索引。在这种情况下，拼接忽略提供的索引以从数组中删除元素。

两个例子都有共同的 HTML 模板

<div class="container">
    <table class="table table-dark table-striped table-hover">
        <thead>
           <tr>
               <td scope="col"> Index </td>
               <td scope="col"> Value </td>
               <td scope="col"> Action </td>
           </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of rows; let i = index"  [@itemAnim]>
                <td> {{i}} </td>
                <td>{{row}}</td>
                <td><button class="btn btn-danger" (click)="deleteRow(i)">Delete</button></td>
           </tr>
        </tbody>
    </table>
    <button class="btn btn-primary " (click)="addRow()">Add row</button>
</div>

查看此示例按预期工作:

index = 1;
rows = [1]; 

addRow() {   
   this.rows.length > 0 ?  this.index ++ : this.index = 1;
   this.rows.push(this.index)
}

deleteRow(row: number) {
   return this.rows.length > 0 ? this.rows.splice(row, 1) : this.index = 1;
}

这不起作用:

rows = [1]; 

addRow() {   
  this.rows.push(1)
}

deleteRow(row: number) {
   this.rows.splice(row, 1) ;
}

在上面的代码中，当单击 addButton 时，我只推送 1。并且删除按钮仅从最后一个索引中删除而不是提供行号索引。

我的问题是为什么会这样？ 上面的 stackBlitz 链接显示了同样的歧义。

Answer 1

因为你实际上是在删除选中的索引，但是 Angular 没有任何关于值之间差异的信息，让我们看一个例子:

我们有这个数组:[1, 1, 1, 1]然后你删除第二个项目，然后删除之前的 Angular 将看到:

[1, 1, 1, 1]

及之后:

[1, 1, 1]

此时angular只知道少了一个item，不知道wish item，然后angular只删除最后一个。

您需要确保传递不同的值或引用(推荐)，然后 Angular 将知道如何区分数组项。

您可以使用以下对象修复它:{ data: 1 }，您的数组将如下所示:

[
  { data: 1 },
  { data: 1 },
  { data: 1 },
  { data: 1 }
]

为什么这行得通？因为引用不相同 ( Value vs Reference Types )，即使数据相同，angular 也会看到不同的引用。

这对你有用:

rows = [{ data: 1 }]; 

addRow() {   
  this.rows.push({ data: 1 });
}

deleteRow(row: number) {
  this.rows.splice(row, 1);
}

在这个例子中，你总是传递一个新对象和它自己的引用。

---

另一个例子将不起作用

sameReference = { data: 1 };

rows = [this.sameReference]; 

addRow() {   
  this.rows.push(this.sameReference);
}

deleteRow(row: number) {
  this.rows.splice(row, 1);
}

因为 sameReference 变量存储的是引用，而不是对象，angular 不会(再次)知道项目之间的差异，此外，当您更改一个元素的数据值时，所有元素都会得到它值，因为数组中只有一个对象被引用 N 次。

---

这也行

sameReference = { data: 1 };

rows = [{ ...this.sameReference }]; 

addRow() {   
  this.rows.push({ ...this.sameReference });
}

deleteRow(row: number) {
  this.rows.splice(row, 1);
}

因为这里我们将对象的值复制到具有不同引用的新对象中。