Question

我一直在观看Dan Abramov avoiding-array-mutations关于redux的视频，我已经研究了如何使用slice通过id从数组中删除元素，返回新数组而没有变异。< / p>

var arrayOld = ['apple', 'orange', 'fig']
var index = arrayOld.indexOf('orange')
var arrayNew = arrayOld.slice(0,index).concat(arrayOld.slice(index + 1))
// ['apple', 'fig']

我想知道如何使用es6 spread语法来做同样的事情？

另外，我想知道为什么没有更简单的方法：例如es6中的一个辅助函数可以做到这一点，就像concat方法一样，你只需要传入要删除的元素的id，然后返回新数组，所以基本上拼接但没有变异。

Answer 1

为什么不过滤它？

console.log(['apple', 'orange', 'fig'].filter(item => item !== 'orange'));
// [ 'apple', 'fig' ]

这将返回一个新数组，只包含满足谓词函数的元素。

注意：这不能用于删除一个元素，或仅删除特定索引处的元素。如果是这种情况，你可以像这样做

var index = arrayOld.indexOf('orange')
console.log(arrayOld.filter((item, idx) => idx !== index));

传递给谓词函数的第二个参数是数组中元素的实际索引。

Answer 2

正如@thefourtheye已经提到的，最好使用.filter作为你的例子。

但是，如果要使用spread运算符通过索引删除元素，可以执行以下操作：

```

＆＃13;

let arrayOld = ['apple', 'orange', 'fig']
let index = 1;
let arrayNew = [...arrayOld.slice(0, index), ...arrayOld.slice(index + 1)];

＆＃13;

```

Answer 3

之前我已经考虑过这个问题，因为在功能JS中，一些数组方法没有得到很好的考虑。所以有些受害者必须稍微调整一下......有两个问题

你不应该改变不属于你的东西。
你应该回复一些合适的东西。

因此，例如在删除项目时，根据您的用例，您可能希望将已删除的项目或结果数组作为参数传递给函数，而不会改变原始数组。因此，在这种特殊情况下，您有两个选项，例如您提到的那个

myFunction(myArr.slice(0,i).concat(a.slice(i+1))) // pass resulting array as argument

或其他方式将删除的项目作为结果。

myFunction(a.slice().splice(i,1)[0]) // pass deleted item as an argument

使用切片或传播从JavaScript中删除数组中的元素

3 个答案: