在delete中使用splice和filter有什么区别?

Question

members是从父组件传递到子组件的道具当我对copymembers使用splice时成员的副本在父组件中得到更新

copyMembers = [...members]
copyMembers[memberIndex].notes.splice(noteIndex,1);

而不是像上面那样如果我使用过滤器那么它不会在父组件中更新为什么会发生这种情况它们之间的区别是什么

copyMembers = [...members]
copyMembers[memberIndex].notes = copyMembers[memberIndex].notes.filter((item : any) => item.notesId !== notesId)

Answer 1

splice()方法通过删除或替换现有元素和/或添加新元素来改变数组的内容[1]

这解释了你在splice中看到的行为。您正在将数据向下传递给子组件，而子组件正在更新实际的数组引用，因此父组件正在更新。

filter()方法创建一个新数组，其中包含通过提供的函数[2]实现的测试的所有元素

当您使用filter时，这不会发生，因为您正在创建一个包含所有通过条件的元素的新数组。

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

[2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 2

当你在JS中复制一个数组时，它只做一个浅拷贝。这意味着嵌套属性共享相同的引用，在你的情况下notes是通过引用共享的，所以如果你在副本中修改它，它会在源代码中被修改。

splice()(可变)修改数组，因此也修改复制的数组，因为它们共享相同的引用。filter()(不可变)创建一个新的数组，不修改原来的数组。

Answer 3

filter()方法创建一个包含所有通过所提供函数实现的测试的元素的新数组。splice()方法通过删除或替换现有元素和/或添加新元素来更改数组的内容，并返回被删除的项。Splice()改变原始数组