如何在TypeScript中删除数组项?

Tim*_*ond 321 arrays collections typescript

我有一个我在TypeScript中创建的数组,它有一个我用作键的属性.如果我有该密钥,我该如何从中删除一个项目?

blo*_*ish 532

与在JavaScript中一样.

delete myArray[key];
Run Code Online (Sandbox Code Playgroud)

请注意,这会将元素设置为undefined.

最好使用这个Array.prototype.splice功能:

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}
Run Code Online (Sandbox Code Playgroud)

  • @blorkfish值得一提的是,如果你有一个对象列表,你可以使用`var index = myArray.findIndex(x => x.prop == key.prop);`. (24认同)
  • @CorayThan肯定会被隐式输入,因为`indexOf`会返回一个`number`? (14认同)
  • 你可以添加一个类型!`var index:number = myArray.indexOf(key,0);` (6认同)
  • @Chris虽然在这个简单的情况下很明显,但是如果你明确地为每个变量定义一个类型,它可以帮助你更快地诊断错误.你已经在不止一次使用`index`,其中一个地方(`splice`)想要看到一个数字,否则你会得到一个错误.目前编译器不能阻止你在那里犯错误. (5认同)
  • @ Cirelli94 - 您正在响应较旧的线程,但问题的答案是删除数组元素不会改变其长度或重新索引数组.因为数组是JavaScript中的对象,所以`delete myArr [2]`字面上删除了`myArr`的属性_2`,它也不同于`myArr [2] = undefined`.这个故事的寓意是只使用`splice`来完成这项任务,因为它是一种安全的方法,可以在不混淆副作用的情况下获得理想的效果. (5认同)
  • 为什么`splice`应该比`delete`更好?谢谢! (2认同)

Mal*_*zad 158

如果array是对象的类型,那么最简单的方法是

let foo_object // Item to remove
this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object);
Run Code Online (Sandbox Code Playgroud)

  • 这不会删除它只是过滤的任何内容.如果实际需要修改列表,则不是这样. (16认同)
  • 我认为为了将它作为一个对象返回你必须这样做`this.foo_objects = this.foo_objects.filter(obj => obj!== foo_object)[0];` (6认同)
  • @ user573434是的,你是对的,如名字所示.但这是一个简单的方法,如果你想删除成功删除api调用等对象. (4认同)
  • 这对我来说非常适用于没有唯一键属性的对象数组.@ user573434 filter方法返回一个没有过滤对象的新数组,因此生成的数组确实删除了该对象. (3认同)
  • 这不会修改原始数组,而是创建一个新数组 (3认同)
  • 这有效。仔细阅读第二行。他使用 obj != foo_object 进行过滤。并将其分配给原始变量,从而用 1 减去过滤后的 foo_object 替换原始数组。将其与 id 为 `deleteById(id: string) { this.data = this.data.filter(d => d.id !== id); 的对象数组一起使用 }` 警告一句,如果 Id 不唯一,您将删除所有具有相同 `id` 的内容 (3认同)

小智 50

使用ES6,您可以使用以下代码:

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}
Run Code Online (Sandbox Code Playgroud)

  • 您还可以使用: this.documents.forEach( (item, index, array) => { if(item === doc) array.splice(index,1); }); 这可以更清晰,尤其是在使用嵌套数组时。 (3认同)
  • @MashukurRahman 问题是关于如何删除一项,而不是多次出现 (3认同)
  • 在不更改数组引用的情况下删除的最佳解决方案,并且有可能实现特定的相等算法 (2认同)

小智 18

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

delete this.items[this.items.findIndex(item => item.item_id == item_id)];
Run Code Online (Sandbox Code Playgroud)

或者

this.items = this.items.filter(item => item.item_id !== item.item_id);
Run Code Online (Sandbox Code Playgroud)

  • 第一个解决方案的问题是删除删除了元素,但数组大小仍与删除之前相同。在第二个解决方案中,我们将有一个新对象,因此如果我们有 spme 依赖性,那么我们就会失去它。拼接(位于最上面的答案中)没有这种效果。 (4认同)

Buz*_*zzy 16

这是我的解决方案:

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();
}
Run Code Online (Sandbox Code Playgroud)


小智 14

您可以splice在数组上使用该方法来删除元素.

例如,如果您有一个名称arr使用以下数组:

arr.splice(2,1);
Run Code Online (Sandbox Code Playgroud)

所以这里索引为2的元素将是起点,参数2将决定要删除的元素数量.

如果要删除命名数组的最后一个元素,arr请执行以下操作:

arr.splice(arr.length,1);
Run Code Online (Sandbox Code Playgroud)

这将返回arr并删除最后一个元素.

  • 为了删除数组的最后一个元素,我将使用数组的“pop”方法而不是“splice”。 (3认同)
  • 仅供参考, splice 方法修改数组(因此在这种情况下删除最后一个项目)并返回删除的项目,而不是数组本身。 (2认同)
  • 实际上应该是 arr.splice(arr.length-1,1) 来删除最后一个元素。 (2认同)

Ven*_*ndi 13

Typescript/Javascript 中的多个选项可用于从数组中删除元素。拼接是最好的选择

  1. 它删除内联而不创建新对象
  2. 它正确更新数组的长度(不会留下空白空元素)

下面是使用 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));
Run Code Online (Sandbox Code Playgroud)


小智 12

这对我有用。

你的数组:

DummyArray: any = [
    { "id": 1, "name": 'A' },
    { "id": 2, "name": 'B' },
    { "id": 3, "name": 'C' },
    { "id": 4, "name": 'D' }
]
Run Code Online (Sandbox Code Playgroud)

功能:

remove() {
    this.DummyArray = this.DummyArray.filter(item => item !== item);
}
Run Code Online (Sandbox Code Playgroud)

注意:此函数删除数组中的所有对象。如果要从数组中删除特定对象,请使用此方法:

remove(id) {
    this.DummyArray = this.DummyArray.filter(item => item.id !== id);
}
Run Code Online (Sandbox Code Playgroud)


Lin*_*adu 10

如果您需要从数组中删除给定的对象并且希望确保以下内容,请使用此选项:

  • 该列表未重新初始化
  • 数组长度已正确更新
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }
Run Code Online (Sandbox Code Playgroud)


Abd*_*zad 9

让部门是一个数组。您要从此数组中删除一个项目。

departments: string[] = [];

 removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }
Run Code Online (Sandbox Code Playgroud)


Jos*_*ell 5

使用TypeScript传播运算符回答(...)

// Your key
const key = 'two';

// Your array
const arr = [
    'one',
    'two',
    'three'
];

// Get either the index or -1
const index = arr.indexOf(key); // returns 0


// Despite a real index, or -1, use spread operator and Array.prototype.slice()    
const newArray = (index > -1) ? [
    ...arr.slice(0, index),
    ...arr.slice(index + 1)
] : arr;
Run Code Online (Sandbox Code Playgroud)


Sh.*_*vel 5

使用Typescript的另一种解决方案:

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;
Run Code Online (Sandbox Code Playgroud)


Ale*_*dro 5

let a: number[] = [];

a.push(1);
a.push(2);
a.push(3);

let index: number = a.findIndex(a => a === 1);

if (index != -1) {
    a.splice(index, 1);
}

console.log(a);
Run Code Online (Sandbox Code Playgroud)