用于删除的拼接和过滤器有什么区别？

Question

当我在 copymembers 上使用 splice 时，members 是一个从父组件传到子组件的道具，它正在父组件中更新成员的副本

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

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

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

Answer 1

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place [1]

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

The filter() method creates a new array with all elements that pass the test implemented by the provided function [2]

当您使用过滤器时，不会发生这种情况，因为您正在创建一个包含所有符合条件的元素的新数组。

Answer 2

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

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

Answer 3

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

what is the difference between splice and filter for the use in delete?