从数组中删除项目并将其添加到另一个数组

Question

我正在向用户显示一系列包含内容的 div，用户可以从页面中删除 div，这样他们就不会再看到它了。

我想获取从数组中删除的相同 div 内容并将其添加到另一个数组中，该数组将用于填充下拉列表。

这就是我所拥有的：

//Remove function
removeCategory(index: number): void {
    this.categories.splice(index, 1);
}
//Array
categories: Array<Item> = [
    new Item(1, 'test1'),
    new Item(2, 'test2')
];
//New Array to add previous removed item
ddoptions: Array<object> = [];

是否可以在 removeCategory 函数的拼接前做一个 push 语句？我不确定要传递什么，因为这样做会给我一个错误：

this.ddoptions.push(index);

Answer 1

2020 年更新

使用较新的 ES 规范，您还可以在数组上使用解构赋值运算符，这意味着您不必在给定上下文中使用 concat 或 apply push 函数。这实际上是在我最初写这篇文章的时候出现的，但现在更常见了。

this.ddoptions.push(...this.categories.splice(index, 1));

但是下面的规则仍然适用，使用 push 和 splice 将改变现有数组，因此如果您想要不可变，可能仍应使用 concat。

---

原答案

你可以直接拼接到push方法中，因为splice返回的是被移除的对象。

this.ddoptions.push(this.categories.splice(index, 1)[0]);

splice 方法实际上返回一个被移除元素的数组。在您的情况下，您只删除一个，因此上述代码有效。如果要删除一个或多个元素，可以使用多种方法将它们添加到第二个数组中。

通过使用 concat 生成一个新数组：

this.ddoptions = this.ddoptions.concat(this.categories.splice(index, 1));

这可能会破坏事情，因为 ddoptions 不再是同一个对象。这取决于你在做什么以及 Angular 在做什么。

您可以通过应用推送原型将数组作为多个参数传递给推送。

[].push.apply(this.ddoptions, this.categories.splice(index, 1));

这样，ddoptions 将保持为同一个数组，并将所有新元素推入其中。

Answer 2

Array#splice 方便地返回一个包含已删除元素的数组：

removeCategory (index) {
  this.ddoptions.push( this.categories.splice(index, 1)[0] )
}

---

View TypeScript Demo

---

JavaScript 演示：

class Item {
  constructor(a, b) { return [a, b] }
}

class Example {
  removeCategory (index) {
    this.ddoptions.push( this.categories.splice(index, 1)[0] )
  }
  //Array
  categories = [
    new Item(1, 'test1'),
    new Item(2, 'test2')
  ]
  //New Array to add previous removed item
  ddoptions = []
}

var example = new Example()

example.removeCategory(1)

console.log(example.ddoptions)

Answer 3

Splice 返回已删除元素的数组。您可以添加数组的大小测试，以确保里面有一个元素..

//Remove function
removeCategory(index: number): void {
    var deletedElement = this.categories.splice(index, 1);
    ddoptions.push(deletedElement[0]);
}