ChatGPT解决这个技术问题 Extra ChatGPT

How do I remove an array item in TypeScript?

I have an array that I've created in TypeScript and it has a property that I use as a key. If I have that key, how can I remove an item from it?


z
zgue

Same way as you would in JavaScript.

delete myArray[key];

Note that this sets the element to undefined.

Better to use the Array.prototype.splice function:

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

You can add a type to that! var index: number = myArray.indexOf(key, 0);
@CorayThan Surely it would be implicitly typed as indexOf returns a number?
@Chris While it's obvious in this simple case, it can help you diagnose bugs faster if you define a type for every variable explicitly. You're using index in more than once place already and one of those places (splice) wants to see a number or you'll get an error. Currently the compiler can't prevent you making mistakes there.
@blorkfish it's good to mention that if you have a list of objects, you can use var index = myArray.findIndex(x => x.prop==key.prop);.
@Cirelli94 - you're responding to an older thread, but the answer to your question is that deleting an array element does not change its length or re-index the array. Because arrays are objects in JavaScript, delete myArr[2] literally deletes the property 2 of myArr, which is also different than myArr[2] = undefined. The moral of this story is to just use splice for this task because it is a safe way to get the desired effect without confusing side effects.
M
Malik Shahzad
let foo_object; // Itemitem(object here) to remove
this.foo_objects = this.foo_objects.filter(obj => return obj !== foo_object);

This does not remove anything it simply filters. If the list actually needs to be modified this is not the way.
@user573434 yes, you are right, as the name indicate. But this is simple approach in case where you want to remove an object on successful delete api call etc.
This worked perfectly for me on an array of objects without a unique key property. @user573434 the filter method returns a new array without the filtered object, so the resulting array does have the object removed.
i think in order to return it as an object you have to do this this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
this doesn't modify the original array, it creates a new one
I
Idak

With ES6 you can use this code :

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

Best solution to remove without changing array reference AND with possibility to implement specific equality algorythm
Best answer have found
Best answer if using ES6
You can also use: this.documents.forEach( (item, index, array) => { if(item === doc) array.splice(index,1); }); Which can be a lot cleaner, especially when working with nested arrays.
@MashukurRahman question is about how to remove one item, not multiple ocurrences
B
Butsaty

It is my solution for that:

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

What's nice about this solution is that it will work even when object equality fails to identify two objects as equal.
G
Gius

You can use the splice method on an array to remove the elements.

for example if you have an array with the name arr use the following:

arr.splice(2, 1);

so here the element with index 2 will be the starting point and the argument 2 will determine how many elements to be deleted.

If you want to delete the last element of the array named arr then do this:

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

This will return arr with the last element deleted.

Example:

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

Just FYI, the splice method modifies the array (so in this case removes the last item) and returns the removed item(s), not the array itself.
It should actually be arr.splice(arr.length-1,1) to remove the last element.
In order to delete the last element of an array, I'd use Array's pop method instead of splice.
A
Abdus Salam Azad

let departments is an array. You want to remove an item from this array.

departments: string[] = [];

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

A
Audwin Oyong

This worked for me.

Your array:

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

Function:

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

Note: This function deletes all the objects form your array. If you want to delete a specific object from array then use this method:

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

J
Jamie Armour

Here's a simple one liner for removing an object by property from an array of objects.

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

or

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

The problem with first solution is that delete removes element, but array size remains the same as before deteling. In second solution we will have a new object, so if we have spme dependency then we are losing it. Splice (which is in the top answer) does not have this effect.
Thanks for pointing that out. I think in my use case I had not discovered that yet. Well observed :)
R
Radu Linu

Use this, if you need to remove a given object from an array and you want to be sure of the following:

the list is not reinitialized

the array length is properly updated

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

Could you please share why you used const for every variable?
@shivamsrivastava I like the code to be immutable where is possible; because of that I was using const instead of let.
V
Venkatesh Muniyandi

Multiple options in Typescript/Javascript to remove an element from Array. Splice is the best option as

It removes inline without creating a new object It properly updates the length of the array (wont leave blank null element)

Below is an example of removing an object based on some field in a object array using Splice function

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


I think you have misused the word 'mutate' here because splice definitely mutates the original object
J
Joshua Michael Calafell

Answer using TypeScript spread operator (...)

// 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

One more solution using Typescript:

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

While this does resolve the problem asked, it is expensive to execute because of the creation of a new array and looping over the original. Doing this kind of operation on a huge array could produce undesirable side effects like, harder on mobile batteries, long waiting, jank, etc.
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

Just wanted to add extension method for an array.

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

You can try to get index or position of list or array first, then use for loop to assign current array to a temp list, filter out unwanted item and store wanted item back to original array

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

We can implement the logic using filter and includes

const checkAlpha2Code = ['BD', 'NZ', 'IN'] let countryAlpha2Code = ['US', 'CA', 'BD', 'NZ', 'AF' , 'AR' , 'BR'] /** * Returns the modified array countryAlpha2Code * after removing elements which matches with the checkAlpha2Code */ countryAlpha2Code = countryAlpha2Code.filter(alpha2code => { return !checkAlpha2Code.includes(alpha2code); }); console.log(countryAlpha2Code) // Output: [ 'US', 'CA', 'AF', 'AR', 'BR' ] // Resetting the values again countryAlpha2Code = ['US', 'CA', 'BD', 'NZ', 'AF' , 'AR' , 'BR'] /** * Returns the modified array countryAlpha2Code * which only matches elements with the checkAlpha2Code */ countryAlpha2Code = countryAlpha2Code.filter(alpha2code => { return checkAlpha2Code.includes(alpha2code); }); console.log(countryAlpha2Code) // Output: [ 'BD', 'NZ' ]


B
Brackets

I see many complaints that remove method is not in-built. Consider using Set instead of array - it has add and delete methods in-built.


M
Michael Freidgeim

Similar to Abdus Salam Azad answer , but passing array as parameter from //https://love2dev.com/blog/javascript-remove-from-array/

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

This is not "removing an item", this is "creating a new array without that item". Entirely different things.
@Clashsoft, true, but people often prefer immutable calls. If you want , you can re-assign result to the same variable myArr=arrayRemove(myArr, elemToRemove).