JavaScript slice方法失效：删除数组元素结果异常求助

嘿，我一眼就揪出你代码里的问题啦！问题出在你对splice()方法的使用上，这直接导致了数组被错误替换，才会出现“点击删除某个元素后，其他元素都消失”的情况。

核心错误原因 #

Array.splice()是原地修改原数组的方法，它的返回值是被删除元素组成的小数组，而不是修改后的完整原数组。你现在写的：

this.contacts = this.contacts.splice(pos, 1);

相当于把原本包含所有元素的this.contacts，替换成了只包含被删除元素的数组——这就难怪剩下的元素都不见了！

修正后的代码 #

只需要去掉错误的赋值操作，直接调用splice()修改原数组即可：

deleteContact(contacts: Contacts){
 if (contacts === null || contacts === undefined) {
 return;
 }
 const pos = this.contacts.indexOf(contacts);
 if (pos < 0) {
 return;
 }
 // 直接调用splice原地修改原数组，无需赋值
 this.contacts.splice(pos, 1);
 // 克隆修改后的完整数组
 this.contactsListClone = this.contacts.slice();
 this.contactListChangedEvent.next(this.contactsListClone);
}

额外优化方案（可选） #

如果你不想原地修改原数组（比如需要保留原始数据），可以用filter()方法创建新数组，这种方式更符合函数式编程风格：

deleteContact(contacts: Contacts){
 if (contacts === null || contacts === undefined) {
 return;
 }
 // 过滤掉要删除的元素，生成新数组
 this.contacts = this.contacts.filter(item => item !== contacts);
 this.contactsListClone = this.contacts.slice();
 this.contactListChangedEvent.next(this.contactsListClone);
}

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