如何在 JavaScript 中添加和删除对象的属性？

在本文中，我们将尝试了解如何向对象添加属性以及如何在 JavaScript 中从对象中添加或删除属性。

在我们真正去了解对象中属性的添加和删除之前，让我们首先了解 JavaScript 中对象的基础知识。

目的：

• JavaScript 中的对象是属性的集合。
• JavaScript 对象中的单个属性实际上是名称（或键）和值之间的关联。
• 一个对象可以包含不同数量的属性，这些属性进一步具有不同的名称和值。

语法：通过使用以下语法，可以轻松创建具有不同数量属性的对象。

let object_name =
{
    property_name: value,
    ...
}

现在我们已经了解了 JavaScript 中与对象相关的基本细节，让我们看一些在对象中添加属性以及如何从对象中删除属性的示例。

从对象中添加/删除属性：

• 如上图所示，我们可以通过遵循某些方法或技术轻松地在 JavaScript 中添加或删除对象的多个属性。
• 要添加任何属性，可以使用object_name.property_name = value (或) object_name[“property_name”] = value 。
• 要删除任何属性，可以轻松使用delete object_name.property_name (或) delete object_name[“property_name”] 。

让我们看一些示例，以便更好地了解如何从对象中添加和删除属性。

示例 1：在此示例中，我们首先创建一个对象，然后我们将向其添加一些属性。

Javascript

    let object = {
        name: "ABC",
        email: "[e-mail]"
    };
    console.log(object);
  
    // Adding some properties into the
    // above created object...
    object.age = 10;
    object.contact = 123467890;
    object.place = "Earth";
    object["country"]= "India";
  
    console.log(object);

输出：

{ name: 'ABC', email: '[e-mail]' }
{
  name: 'ABC',
  email: '[e-mail]',
  age: 10,
  contact: 123467890,
  place: 'Earth',
  country: 'India'
}

示例 2：在此示例中，我们将首先创建一个对象，然后删除一些属性。

Javascript

    let object = {
        name: "ABC",
        email: "[e-mail]",
        age: 10,
        contact: 1234567890,
        place: "Earth",
        country: "India",
    };
    console.log(object);
  
    // Removing some properties 
    // from the above created object
    delete object.age; // age property deletion
    console.log(object);
      
    // country property deletion
    delete object["country"]; 
    console.log(object);
    delete object.place; // place property deletion
    console.log(object);

输出：

{
  name: 'ABC',
  email: '[e-mail]',
  age: 10,
  contact: 1234567890,
  place: 'Earth',
  country: 'India'
}
{
  name: 'ABC',
  email: '[e-mail]',
  contact: 1234567890,
  place: 'Earth',
  country: 'India'
}
{
  name: 'ABC',
  email: '[e-mail]',
  contact: 1234567890,
  place: 'Earth'
}
{
 name: 'ABC', 
 email: '[e-mail]', 
 contact: 1234567890
}

示例 3：

• 在此示例中，我们将使用另一种方法从对象中删除属性。
• 这是不改变原始对象的最新方法。
• 这种方法称为使用剩余参数的对象解构。

Javascript

let person_data = {
    first_name: "ABC",
    last_name: "DEF",
    age: 20,
    eye_color: "brown",
    place: "XYZ",
};
  
let { eye_color, ...remainingObject } = person_data;
console.log("Original Object...");
console.log(person_data);
console.log("Remaining Object.....");
console.log(remainingObject);
  
//Another way of Object Destructuing Approach Implementation......
  
let property_name = "place";
let { [property_name]: removedProperty, ...restObject } = person_data;
console.log("Remaining Object");
console.log(restObject);
  
//Another way of Object Destructuing Approach Implementation......
let { place, age, ...leftObject } = person_data;
console.log("Remaining Object");
console.log(leftObject);
  
// This code is contributed by Aman Singla....

输出：

Original Object...
{ first_name: 'ABC', last_name: 'DEF', age: 20, 
    eye_color: 'brown', place: 'XYZ' }
Remaining Object.....
{ first_name: 'ABC', last_name: 'DEF', age: 20, place: 'XYZ' }
Remaining Object
{ first_name: 'ABC', last_name: 'DEF', age: 20, eye_color: 'brown' }
Remaining Object
{ first_name: 'ABC', last_name: 'DEF', eye_color: 'brown' }