ChatGPT解决这个技术问题 Extra ChatGPT

如何在 TypeScript 中删除数组项?

我有一个在 TypeScript 中创建的数组,它有一个我用作键的属性。如果我有那个钥匙,我怎样才能从中删除一个项目?


z
zgue

与在 JavaScript 中的方式相同。

delete myArray[key];

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

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

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

您可以为其添加类型! var index: number = myArray.indexOf(key, 0);
@CorayThan 当然它会被隐式输入,因为 indexOf 返回一个 number
@Chris虽然在这个简单的案例中很明显,但如果您为每个变量明确定义类型,它可以帮助您更快地诊断错误。您已经在不止一次的地方使用了 index,并且其中一个地方 (splice) 想要看到一个数字,否则您会收到错误消息。目前,编译器无法阻止您在那里犯错。
@blorkfish 值得一提的是,如果您有对象列表,则可以使用 var index = myArray.findIndex(x => x.prop==key.prop);
@Cirelli94 - 您正在回复较旧的线程,但您的问题的答案是删除数组元素不会更改其长度或重新索引数组。因为数组是 JavaScript 中的对象,所以 delete myArr[2] 从字面上删除了 myArr属性 2,这也与 myArr[2] = undefined 不同。这个故事的寓意是只使用 splice 来完成这项任务,因为它是一种安全的方式来获得所需的效果,而不会混淆副作用。
M
Malik Shahzad
let foo_object; // Itemitem(object here) to remove
this.foo_objects = this.foo_objects.filter(obj => return obj !== foo_object);

这不会删除它只是过滤的任何内容。如果列表确实需要修改,则不是这样。
@user573434 是的,顾名思义,你是对的。但如果您想在成功的 delete api 调用等上删除对象,这是一种简单的方法。
这对我来说非常适合没有唯一键属性的对象数组。 @user573434 filter 方法返回一个没有过滤对象的新数组,因此结果数组确实删除了对象。
我认为为了将其作为对象返回,您必须这样做this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
这不会修改原始数组,它会创建一个新数组
I
Idak

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

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

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

这是我的解决方案:

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();
}

这个解决方案的好处在于,即使对象相等无法将两个对象识别为相等,它也可以工作。
G
Gius

您可以对数组使用 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"]

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

让部门是一个数组。你想从这个数组中删除一个项目。

departments: string[] = [];

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

A
Audwin Oyong

这对我有用。

你的数组:

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);
}

J
Jamie Armour

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

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

或者

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

第一个解决方案的问题是删除删除了元素,但数组大小保持与删除之前相同。在第二种解决方案中,我们将拥有一个新对象,因此如果我们有 spme 依赖关系,那么我们将失去它。 Splice(在最佳答案中)没有这种效果。
感谢您指出了这一点。我认为在我的用例中我还没有发现这一点。观察得好:)
R
Radu Linu

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

列表未重新初始化

数组长度已正确更新

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

你能分享一下为什么你对每个变量都使用 const 吗?
@shivamsrivastava 我喜欢代码在可能的情况下是不可变的;因此,我使用的是 const 而不是 let
V
Venkatesh Muniyandi

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

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

下面是使用 Splice 函数根据对象数组中的某些字段删除对象的示例

常量人员 = [ { firstName :'John', lastName :'Michel' }, { firstName :'William', lastName :'Scott' }, { firstName :'Amanda', lastName :'Tailor' } ] console.log( '删除前:'+JSON.stringify(persons)); console.log('删除威廉:'); person.splice(persons.findIndex(item => item.firstName === 'William'),1); console.log('删除威廉之后'+JSON.stringify(persons));


我认为你在这里误用了“变异”这个词,因为拼接肯定会变异原始对象
J
Joshua Michael Calafell

使用 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;

S
Sh. Pavel

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

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

虽然这确实解决了所提出的问题,但由于创建新数组并循环原始数组,因此执行起来很昂贵。在一个巨大的阵列上进行这种操作可能会产生不良的副作用,例如移动电池更难、等待时间长、卡顿等。
A
Alessandro
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);

s
supernerd

只是想为数组添加扩展方法。

interface Array<T> {
      remove(element: T): Array<T>;
    }

    Array.prototype.remove = function (element) {
      const index = this.indexOf(element, 0);
      if (index > -1) {
        return this.splice(index, 1);
      }
      return this;
    };

Y
Yisi Tan

您可以尝试先获取列表或数组的索引或位置,然后使用 for 循环将当前数组分配给临时列表,过滤掉不需要的项目并将想要的项目存储回原始数组

removeItem(index) {
    var tempList = this.uploadFile;
    this.uploadFile = [];

    for (var j = 0; j < tempList.length; j++) {
      if (j != index)
        this.uploadFile.push(tempList[j]);
    }
  }

S
Sayef Reyadh

我们可以使用 filterincludes 实现逻辑

const checkAlpha2Code = ['BD', 'NZ', 'IN'] 让 countryAlpha2Code = ['US', 'CA', 'BD', 'NZ', 'AF' , 'AR' , 'BR'] /* * * 在删除与 checkAlpha2Code 匹配的元素后返回修改后的数组 countryAlpha2Code */ countryAlpha2Code = countryAlpha2Code.filter(alpha2code => { return !checkAlpha2Code.includes(alpha2code); }); console.log(countryAlpha2Code) // 输出: [ 'US', 'CA', 'AF', 'AR', 'BR' ] // 再次重置值 countryAlpha2Code = ['US', 'CA', 'BD ', 'NZ', 'AF' , 'AR' , 'BR'] /** * 返回修改后的数组 countryAlpha2Code * 仅匹配带有 checkAlpha2Code 的元素 */ countryAlpha2Code = countryAlpha2Code.filter(alpha2code => { return checkAlpha2Code.包括(alpha2code);}); console.log(countryAlpha2Code) // 输出:[ 'BD', 'NZ' ]


B
Brackets

我看到很多抱怨 remove 方法不是内置的。考虑使用 Set 而不是数组 - 它内置了 adddelete 方法。


M
Michael Freidgeim

类似于 Abdus Salam Azad answer ,但将数组作为参数从 //https://love2dev.com/blog/javascript-remove-from-array/ 传递

function arrayRemove(arr:[], value:any) { 
    
    return arr.filter(function(ele){ 
        return ele != value; 
    });
}

这不是“删除一个项目”,这是“创建一个没有该项目的新数组”。完全不同的东西。
@Clashsoft,是的,但人们通常更喜欢不可变的调用。如果需要,可以将结果重新分配给同一变量 myArr=arrayRemove(myArr, elemToRemove)。