如何在JavaScript中添加和删除对象的属性
在本文中,我们将尝试了解如何向对象添加属性以及如何添加或删除对象的属性。
在实际上添加和删除对象属性之前,让我们先了解JavaScript对象的基础知识。
对象:
- 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代码
输出结果:
方法2:使用 Object.assign() 方法
这种方法涉及使用 Object.assign() 将一个对象的属性合并到另一个对象中,方便添加属性。要删除属性,可以使用展开操作符创建一个新对象。
示例2: 在这个示例中,我们使用 Object.assign() 将一个对象的属性添加到另一个对象中,然后移除特定属性,从而创建一个不包含这些属性的新对象。
Javascript
输出
方法3:使用Object.defineProperty()和Object.defineProperties()
使用Object.defineProperty()和Object.defineProperties()可以对属性的添加和移除进行细粒度控制,同时可以选择性地创建一个具有所需属性的新对象。
示例3: 在这个示例中,我们使用Object.defineProperty()添加具有属性的属性,并使用Object.defineProperties()移除特定的属性,从而创建一个新对象。
Javascript
输出
方法4:使用扩展运算符(ES6)
在这种方法中,我们使用扩展运算符将一个对象的属性添加到另一个对象中,方便地进行属性添加。为了删除属性,我们会创建一个新的对象,并选择性地排除指定的属性。
示例: 在这个示例中,我们从additionalInfo中添加属性到person中,我们使用扩展运算符(…)。扩展运算符允许我们将additionalInfo的属性合并到person中,并使用扩展运算符创建一个新的对象newPerson,其中不包含原始person对象的age属性。扩展运算符创建一个浅拷贝的属性副本。
Javascript
输出