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

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

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

在实际上添加和删除对象属性之前,让我们先了解JavaScript对象的基础知识。

对象:

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

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

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

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

向对象添加/删除属性:

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

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

有几种方法可用于向对象添加和删除属性。

  • 使用点表示法或方括号表示法
  • 使用Object.assign()方法
  • 使用Object.defineProperty()和Object.defineProperties()方法
  • 使用扩展运算符(ES6)

方法1:使用点表示法或方括号表示法

在这种方法中,要向对象添加属性,可以使用点表示法或方括号表示法。要从对象中删除属性,可以使用delete关键字与点表示法或方括号表示法。

示例1: 在这个示例中,我们有一个初始属性为name,age和occupation的对象person。然后,我们使用点表示法和方括号表示法向对象添加属性(city,email,hobby和gender)。接下来,我们使用点表示法和方括号表示法从对象中删除属性(age,occupation,hobby和gender)

Javascript代码

let person = {
    name: 'Amit',
    age: 24,
    occupation: 'Engineer',
};
 
// Adding properties using dot notation
person.city = 'Uttarakhan';
person.email = 'Amit@example.com';
 
// Adding properties using bracket notation
person['hobby'] = 'Gyming';
person['gender'] = 'Male';
 
console.log('After adding properties:');
console.log(person);
 
 
// Removing properties using dot notation
delete person.age;
delete person.occupation;
 
// Removing properties using bracket notation
delete person['hobby'];
delete person['gender'];
 
console.log('After removing properties:');
console.log(person);
JavaScript

输出结果:

After adding properties:  
{  
  name: 'Amit',  
  age: 24,  
  occupation: 'Engineer',  
  city: 'Uttarakhan',  
  email: 'Amitn@example.com',  
  hobby: 'Gyming',  
  gender: 'Male'  
}  
After removing properties:  
{ name: 'Amit', city: 'Uttarakhan', email: 'Amitn@example.com' }
JavaScript

方法2:使用 Object.assign() 方法

这种方法涉及使用 Object.assign() 将一个对象的属性合并到另一个对象中,方便添加属性。要删除属性,可以使用展开操作符创建一个新对象。

示例2: 在这个示例中,我们使用 Object.assign() 将一个对象的属性添加到另一个对象中,然后移除特定属性,从而创建一个不包含这些属性的新对象。

Javascript

let person = {
    name: 'Aman',
    age: 30,
};
 
// Additional information to be added
const additionalInfo = {
    city: 'Noida',
    occupation: 'Engineer',
};
 
// Adding properties using Object.assign()
Object.assign(person, additionalInfo);
 
console.log('After adding properties:');
console.log(person);
 
// Removing properties using Object.assign() 
//(creates a new object without specified properties)
const { age, occupation, ...newPerson } =
    Object.assign({}, person);
 
console.log('After removing properties:');
console.log(newPerson);
JavaScript

输出

After adding properties:
{ name: 'Aman', age: 30, city: 'Noida', occupation: 'Engineer' }
After removing properties:
{ name: 'Aman', city: 'Noida' }
JavaScript

方法3:使用Object.defineProperty()和Object.defineProperties()

使用Object.defineProperty()和Object.defineProperties()可以对属性的添加和移除进行细粒度控制,同时可以选择性地创建一个具有所需属性的新对象。

示例3: 在这个示例中,我们使用Object.defineProperty()添加具有属性的属性,并使用Object.defineProperties()移除特定的属性,从而创建一个新对象。

Javascript

let person = {
    name: 'Rohan',
    age: 20,
};
 
// Adding a property using Object.defineProperty()
Object.defineProperty(person, 'city', {
    value: 'Noida',
    writable: true,
    enumerable: true,
    configurable: true,
});
 
console.log('After adding a property:');
console.log(person);
 
 
// Removing properties using Object.defineProperties() 
//(creates a new object without specified properties)
const { age, ...newPerson } =
    Object.defineProperties({}, {
        name: {
            value: person.name,
            writable: true, enumerable: true
        },
    });
 
console.log('After removing properties:');
console.log(newPerson);
JavaScript

输出

After adding a property:
{ name: 'Rohan', age: 20, city: 'Noida' }
After removing properties:
{ name: 'Rohan' }
JavaScript

方法4:使用扩展运算符(ES6)

在这种方法中,我们使用扩展运算符将一个对象的属性添加到另一个对象中,方便地进行属性添加。为了删除属性,我们会创建一个新的对象,并选择性地排除指定的属性。

示例: 在这个示例中,我们从additionalInfo中添加属性到person中,我们使用扩展运算符(…)。扩展运算符允许我们将additionalInfo的属性合并到person中,并使用扩展运算符创建一个新的对象newPerson,其中不包含原始person对象的age属性。扩展运算符创建一个浅拷贝的属性副本。

Javascript

let person = {
    name: 'Nikita',
    age: 20,
};
 
// Adding properties using the spread operator
const additionalInfo = {
    city: 'Uttarakhan',
    occupation: 'Doctor',
};
 
person = { ...person, ...additionalInfo };
 
console.log('After adding properties:');
console.log(person);
 
 
// Removing properties using the spread operator
const { age, ...newPerson } = person;
 
console.log('After removing properties:');
console.log(newPerson);
JavaScript

输出

After adding properties:
{ name: 'Nikita', age: 20, city: 'Uttarakhan', occupation: 'Doctor' }
After removing properties:
{ name: 'Nikita', city: 'Uttarakhan', occupation: 'Doctor' }
JavaScript

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册