繁体   English   中英

使用 slice 或 spread 从 JavaScript 中的数组中删除一个元素

[英]Remove an element from an array in JavaScript with slice or spread

我一直在观看来自 Dan Abramov 的视频 redux avoiding -array-mutations并且我已经研究了如何使用slice通过 id 从数组中删除元素,返回新数组而不进行突变。

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 中的帮助程序 function 来执行此操作,它的工作原理与 concat 方法一样简单,您可以在其中传入要删除的元素的 id 并返回新的元素数组,所以基本上拼接但没有突变。

正如@thefourtheye 已经提到的那样,最好在示例中使用.filter

但是,如果要使用扩展运算符按索引删除元素,则可以执行以下操作:



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

为什么不过滤呢?

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

这将返回一个新数组,其中只有满足谓词函数的元素。


注意:这不能用于仅删除一个元素,或仅删除特定索引处的元素。 如果是这种情况,您可以简单地这样做

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

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

解构可能是你正在寻找的

let [ a, ...b] = ['a', 'b', 'c'];
console.log(a); // 'a'
console.log(b); // ['b', 'c'];

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

好吧,我之前已经对这个主题进行了一些思考,因为在函数式 JS 中,一些数组方法没有经过深思熟虑。 所以有时他们必须稍微调整一下......有两个问题

  1. 你不应该改变不属于你的东西。
  2. 你应该返回一些适当的东西。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM