Summary of several solutions for deleting a certain attribute of an object in JS

Preface

In JavaScript, if you want to delete a property of an object, you can usedeleteOperator. Here is a simple example:

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// Delete the 'age' attributedelete ;

(obj); // { name: 'Alice', city: 'New York' }

deleteThe operator deletes the specified attribute from the object. If the property exists, it deletes the property and returnstrue, if the attribute does not exist, returntrue, but the object remains the same. Notice,deleteUnconfigurable properties of objects cannot be deleted, such asThe properties set.

Apart fromdeleteOperators, there are several ways to "remove" an object's property. Here are several common methods:

1. Use deconstruction assignment (create a new object)

If you don't want to modify the original object, you can use deconstruction assignment to create a new object and exclude a certain attribute.

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// Use deconstructed assignment to exclude the 'age' attributeconst { age, ...newObj } = obj;

(newObj); // { name: 'Alice', city: 'New York' }

This method will create a new objectnewObj, does not includeageProperties, original objectobjWill not be changed.

2. Use

You can also pass()Convert an object to an array of key-value pairs and usefilterThe function excludes the attributes that need to be deleted and finally uses()Convert the result back to the object.

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// Delete the 'age' attributeconst newObj = (
  (obj).filter(([key]) => key !== 'age')
);

(newObj); // { name: 'Alice', city: 'New York' }

This method also creates a new object and does not modify the original object.

3. Use  () (ES6)

()yesdeleteAn alternative to the operator, its behavior is more consistent and returns a boolean value indicating whether it is deleted successfully.

let obj = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// Use the 'age' attribute(obj, 'age');

(obj); // { name: 'Alice', city: 'New York' }

This method will modify the original object and return the result of the delete operation (trueorfalse）。

Summarize

• deleteis the most common way to delete attributes, but it will directly modify the original object.
• Deconstructing assignment and()The method creates a new object, suitable for scenes where the original object is not modified.
• ()yesdeleteAlternative method with more consistent behavior.

Which method to choose depends on your needs, especially whether you need to keep the original object unchanged.

If you have a collection object (such as an array) and you want to delete a certain property of each of the objects in it

You can use the map() method combined with delete or other methods to operate each object.

Here are some examples of implementations:

1. Use map() and delete

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// Delete the 'age' attribute of each object(obj => {
  delete ;
});

(array);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

Here we directly traverse each object and usedeletedeleteageAttributes. Note that this will modify the original object.

2. Use map() and deconstruct assignment (create a new object)

If you don't want to modify the original object, you can usemap()and deconstruct the assignment to create a new object and delete the specified attribute.

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// Delete the 'age' attribute of each objectlet newArray = (({ age, ...rest }) => rest);

(newArray);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

This method will not modify the originalarray, instead return a new arraynewArray, in which every object is goneageAttributes.

3. Use map() and  () (suitable for complex objects)

If the object is complex, you can use()and()Combinedmap()To delete the attribute.

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// Delete the 'age' attribute of each objectlet newArray = (obj =>
  ((obj).filter(([key]) => key !== 'age'))
);

(newArray);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

This method is to convert it into an array of key-value pairs, filter out unnecessary properties, and then convert it back to an object, which is suitable for more complex operations.

4. Use map() and (modify the original object)

let array = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 35, city: 'Chicago' }
];

// Use the 'age' attribute of each object to delete(obj => {
  (obj, 'age');
});

(array);
// [
//   { name: 'Alice', city: 'New York' },
//   { name: 'Bob', city: 'Los Angeles' },
//   { name: 'Charlie', city: 'Chicago' }
// ]

This method anddeleteSimilar, but use()To delete the attribute. It also modifies the original object.

Summarize

• usedeleteor()The original object will be modified directly.
• usemap()and deconstruct the assignment or()It can avoid modifying the original array and returning a new array.
• Which method to choose depends on whether the original array needs to be modified.

This is the end of this article about several solutions to delete a certain attribute of an object in JS. For more related contents of a certain attribute of a JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!