Delete array object in javascript

7 ways to Remove object from array in Javascript

In this post, we are going to learn 7 ways to Remove object from array in Javascript with examples.We are going to use array.pop(), array.shift(), array.filter(), array.slice(), array.splice() and map() and foreach loop.

1. Remove First object from an array in Javascript

In this JavaScript example, We are removing the first object from an array of objects by calling the array.shift() method.Let us understand with the below example.

let Employee =[ , , , ] Employee.shift(); console.log(Employee)

2. Remove the Last element from array of object

In this JavaScript program, We are removing the last object from an array object by using an array.pop() method.The array.pop() return the deleted object from the array. So we are displaying the updated array of objects (Employee)

Another way of deleting an object from an array of objects using splice with map() function and indexof() and finally passing the index to splice() method to detele element on this index.

let Employee =[ , , , ] const Index = Employee.findIndex( item => item.EmpID === 4 ); if (index > -1) < Employee.splice( Index, 1 ); >console.log(Employee) //using map() function var Index = Employee.map(item=> < return item.EmpId; >).indexOf(4); Employee.splice(Index, 1); console.log(Employee)

4. Slice() to Remove object from array in Javascript

In this Javascript Program, we have used an array.slice() method to remove an object from an array.The array.slice().It returns a shallow copy of the array into a new array from start to end index.

let Employee =[ , , , ] var newArray = Employee.slice(2, 4); console.log(newArray)

5. Array.filter() to remove object from array in Javascript

In this Javascript program, we have used array.filter() method that returns an object from the array where empId not equals 1.

let Employee =[ , , , ] var updateobj = Employee.filter((elem) => elem.EmpID!== 1); console.log(updateobj);

6. Foreach loop to Remove object from array in Javascript

In this example we have used foreach loop to iterate over an array of objects, we are checking the conditions where empID is not equal to 4. It will push all employees except the employee EmpID==4.

let Employee =[ , , , ] var resultArr = []; Employee.forEach(function(data) < if(data.EmpID!== 4)< resultArr.push(data); >>); console.log(resultArr);

7. Remove object From another array of objects

To remove objects based on another array of objects.We have used array.filter().Let us understand with the below example.

let Employee =[ , , , ] Employee2 = [ ] var resultArr = Employee.filter(x => !Employee2.filter(y => y.EmpID === x.EmpID).length); console.log(resultArr);

Источник

Delete array object in javascript

Last updated: Dec 21, 2022
Reading time · 4 min

# Remove an Object from an Array by its Value in JavaScript

To remove an object from an array by its value:

1. Use the Array.filter() method to iterate over the array.
2. Check if each object has a property that points to the specified value.
3. The filter() method will return a new array that doesn’t contain the object.

Copied! 
const arr = [id: 1>, id: 3>, id: 5>]; const newArr = arr.filter(object =>  return object.id !== 3; >); console.log(newArr) // 👉️ [, ] 

The Array.filter method doesn’t mutate the contents of the original array, it returns a new array.

The function we passed to the filter() method gets invoked with each object in the array. If it returns a truthy value, the object is added to the new array.

Copied! 
const arr = [id: 1>, id: 3>, id: 5>]; const newArr = arr.filter(object =>  return object.id !== 3; >); console.log(newArr) // 👉️ [, ] 

On each iteration, we check if the current object’s id property doesn’t have a specific value.

The new array contains all of the objects of the original array that meet the condition.

# Remove an Object from an Array by its Value using Array.findIndex()

This is a two-step process:

1. Use the Array.findIndex() method to get the index of the object in the array.
2. Use the Array.splice() method to remove the object at that index.

Copied! 
const arr = [id: 1>, id: 3>, id: 5>]; const indexOfObject = arr.findIndex(object =>  return object.id === 3; >); console.log(indexOfObject); // 👉️ 1 arr.splice(indexOfObject, 1); console.log(arr); // 👉️ [, ] 

The function we passed to the Array.findIndex() method gets called with each element (object) in the array until it returns a truthy value or iterates over the entire array.

In the example, we got the index of the first object in the array that has an id property with a value of 3 .

Copied! 
const arr = [id: 1>, id: 3>, id: 5>]; const indexOfObject = arr.findIndex(object =>  return object.id === 3; >); console.log(indexOfObject); // 👉️ 1 

The next step is to use the Array.splice method to remove the object at that index from the array.

The arguments we passed to the Array.splice() method are:

1. start index — the index at which to start changing the array.
2. delete count — how many elements should be deleted from the array.

Our start index is the index of the object to be removed and we only want to delete a single array element.

Copied! 
const arr = [id: 1>, id: 3>, id: 5>]; const indexOfObject = arr.findIndex(object =>  return object.id === 3; >); console.log(indexOfObject); // 👉️ 1 arr.splice(indexOfObject, 1); console.log(arr); // 👉️ [, ] 

The findIndex method returns -1 if the condition is never met.

If we pass -1 as a start index to the Array.splice() method, it would remove the last element from the array, which would be a bug in our program.

If this is a possible scenario in your code, use the Array.filter() method instead.

The splice method changes the contents of the original array, which can be confusing and difficult to follow. Most of the time it’s better to create a new array, containing only the elements that we need.

The Array.filter() method is different from the findIndex() and splice() approach for a couple of reasons:

1. The findIndex() method returns the index of the first element that meets the condition, whereas the filter() method might filter out multiple elements with the same value.
2. The splice() method changes the contents of the original array, whereas the filter() method creates a new array.

Alternatively, you can use the Array.slice() method.

# Remove an Object from an Array by its Value using Array.slice()

This is a two-step process:

1. Use the Array.findIndex() method to get the index of the object in the array.
2. Use the Array.slice() method to create a new array excluding the object at that index.

Copied! 
const arr = [id: 1>, id: 3>, id: 5>]; const indexOfObject = arr.findIndex(object =>  return object.id === 3; >); const newArr = [ . arr.slice(0, indexOfObject), . arr.slice(indexOfObject + 1), ]; // 👇️ [ < id: 1 >, < id: 5 >] console.log(newArr); 

We used the Array.findIndex() method to get the index of the object in the array.

The method returns the index of the object that has an id property with a value of 3 .

We then used the Array.slice() method to create a new array that doesn’t contain the object at that index.

The spread syntax (. ) is used to unpack the values of the array slices into a new array.

We passed the following arguments to the Array.slice method:

• start index — index (zero-based) at which to start extraction.
• end index — extract values up to, but not including this index.

We added 1 to the start index in the second call to the Array.slice() method to exclude the object from the new array.

Copied! 
const arr = [id: 1>, id: 3>, id: 5>]; const indexOfObject = arr.findIndex(object =>  return object.id === 3; >); const newArr = [ . arr.slice(0, indexOfObject), . arr.slice(indexOfObject + 1), ]; // 👇️ [ < id: 1 >, < id: 5 >] console.log(newArr); 

The Array.slice() method doesn’t mutate the original array.

The newArr variable contains all objects of the original array excluding the object that has an id property with a value of 3 .

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник