如何在TypeScript中删除数组项？

Question

我在TypeScript中创建了一个数组，它有一个属性作为键。如果我拥有这个键，我该如何从数组中删除一个元素？

- Tim Almond

Answer 1

和在 JavaScript 中一样。

delete myArray[key];

请注意，这将把元素设置为undefined。

最好使用Array.prototype.splice函数：

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}

- blorkfish

---

你可以给它添加一个类型！var index: number = myArray.indexOf(key, 0); - CorayThan

当然，它会被隐式地声明类型为“number”，因为indexOf返回一个数字？ - Chris

在这个简单的例子中虽然很显而易见，但如果你为每个变量显式定义类型，可以帮助您更快地诊断错误。您已经在多个地方使用了 index，其中一个地方（splice）需要看到一个数字，否则会出错。目前编译器无法防止您在那里犯错误。 - Jochem Kuijpers

@blorkfish提到，如果你有一个对象列表，可以使用var index = myArray.findIndex(x => x.prop==key.prop);来查找特定属性与关键字匹配的对象的索引。 - Francisco Cabral

@Cirelli94 - 您在回复一个老的帖子，但是您问题的答案是删除数组元素不会改变它的长度或重新索引数组。因为JavaScript中的数组是对象，delete myArr[2]实际上删除了myArr的属性2，这也不同于myArr[2] = undefined。这个故事的寓意是，只需使用splice来完成此任务，因为它是一种安全的方式，可以获得所需的效果，而不会产生混淆的副作用。 - Elianora

Answer 2

let foo_object; // Itemitem(object here) to remove
this.foo_objects = this.foo_objects.filter(obj => return obj !== foo_object);

- Malik Shahzad

---

这并不会删除任何内容，它只是进行过滤。如果实际上需要修改列表，那么这种方法是行不通的。 - user573434

@user573434 是的，你是对的，正如名称所示。但这只是一种简单的方法，适用于你希望在成功删除 API 调用等情况下删除一个对象的情况。 - Malik Shahzad

这对我在没有唯一键属性的对象数组上运作得非常完美。@user573434，筛选方法返回一个新的、已去除筛选对象的数组，因此结果数组确实已经移除了该对象。 - Jason Watmore

我认为如果要将它作为一个对象返回，您需要执行以下操作this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];。 - Shift 'n Tab

这不会修改原始数组，而是创建一个新的数组。 - Julio Villane

Answer 3

使用ES6，您可以使用以下代码：

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}

- Idak

---

最佳解决方案应该能够在不改变数组引用的情况下移除元素，并具有实现特定相等算法的可能性。 - Sid

找到最佳答案 - Gvs Akhil

如果使用ES6，最佳答案 - Nathan Beck

您也可以使用：this.documents.forEach((item, index, array) => { if (item === doc) array.splice(index, 1); }); 这种方法更加简洁，尤其是在处理嵌套数组时。 - CGundlach

这个答案更好，但它只会删除第一个匹配的项。 - Mashukur Rahman

MashukurRahman的问题是关于如何删除一个项目，而不是多个出现次数。 - Mauricio Gracia Gutierrez

Answer 4

这是我的解决方案:

onDelete(id: number) {
    this.service.delete(id).then(() => {
        let index = this.documents.findIndex(d => d.id === id); //find index in your array
        this.documents.splice(index, 1);//remove element from array
    });

    event.stopPropagation();
}

- Butsaty

---

这个解决方案的好处在于，即使对象相等性无法将两个对象标识为相等，它仍然可以工作。 - Brad Johnson

Answer 5

令departments为一个数组。你想从这个数组中移除一个项目。

departments: string[] = [];

 removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }

- Abdus Salam Azad

Answer 6

你可以使用数组的 splice 方法来删除元素。

例如，如果你有一个名为 arr 的数组，请使用以下方法：

arr.splice(2, 1);

这里，索引为2的元素将是起始点，参数2将确定要删除多少个元素。

如果您想删除名为arr的数组的最后一个元素，则可以执行以下操作：

arr.splice(arr.length-1, 1);

这将返回删除了最后一个元素的arr。

示例：

var arr = ["orange", "mango", "banana", "sugar", "tea"];
arr.splice(arr.length-1, 1)
console.log(arr); // return ["orange", "mango", "banana", "sugar"]

- akash venugopal

---

顺便提一下，splice 方法修改了数组（在这种情况下是删除了最后一个项），并返回被删除的项（们），而不是数组本身。 - CGundlach

实际上应该是 arr.splice(arr.length-1,1) 来移除最后一个元素。 - Steve In CO

为了删除数组的最后一个元素，我会使用数组的 pop 方法而不是 splice。 - Iván Pérez

Answer 7

这对我有用。

你的数组：

DummyArray: any = [
    { "id": 1, "name": 'A' },
    { "id": 2, "name": 'B' },
    { "id": 3, "name": 'C' },
    { "id": 4, "name": 'D' }
]

功能：

remove() {
    this.DummyArray = this.DummyArray.filter(item => item !== item);
}

注意：此函数将删除数组中的所有对象。如果您想从数组中删除特定的对象，请使用以下方法：

remove(id) {
    this.DummyArray = this.DummyArray.filter(item => item.id !== id);
}

- Amartya Deshmukh

Answer 8

这是一个简单的一行代码，用于从对象数组中根据属性删除一个对象。

delete this.items[this.items.findIndex(item => item.item_id == item_id)];

或者

this.items = this.items.filter(item => item.item_id !== item.item_id);

- Jamie Armour

---

第一种解决方案的问题在于删除元素，但数组大小仍然与删除之前相同。在第二种解决方案中，我们将拥有一个新对象，因此如果我们有某些依赖关系，则会失去它们。Splice（在顶部答案中）没有这种影响。 - Krystian

谢谢指出。我想在我的使用情况中，我还没有发现那个问题。观察得很仔细 :) - Jamie Armour

Answer 9

Typescript/Javascript中有多种选项可用于从数组中删除元素。

Splice是最佳选择，因为：

1. 它可以在不创建新对象的情况下进行内联删除
2. 它可以正确更新数组的长度（不会留下空的null元素）

以下是使用Splice函数基于对象数组中的某个字段删除对象的示例：

const persons = [
 {
   firstName :'John',
   lastName :'Michel'
  },
  {
   firstName :'William',
   lastName :'Scott'
  },  
  {
   firstName :'Amanda',
   lastName :'Tailor'
  }
]

console.log('Before Deleting :'+JSON.stringify(persons));
console.log('Deleting William:');
persons.splice(persons.findIndex(item => item.firstName === 'William'),1);
console.log('After Deleting William'+JSON.stringify(persons));

- Venkatesh Muniyandi

---

我认为你在这里误用了“变异”一词，因为splice明确会改变原始对象。 - myol

Answer 10

如果您需要从数组中删除一个给定的对象，并且您希望确保以下事项，请使用此操作：

• 列表不会被重新初始化
• 数组长度被正确更新

    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }

- Radu Linu

---

你能分享一下为什么你在每个变量上都使用了const吗？ - shivam srivastava

@shivamsrivastava 我喜欢在可能的情况下将代码设置为不可变的；因此我使用 const 而不是 let。 - Radu Linu