如何在 JavaScript 对象中添加属性？

在本文中，我们将学习如何在 JavaScript 对象中添加属性。

JavaScript 对象

JavaScript 对象是键值对形式的属性的集合。

语法

演示

我们将创建一个名为 student 的对象，其中包含四个属性。

代码

输出

 
{
  firstName: 'Justin',
  lastName: 'Timberlake',
  rollNo: 32,
  stream: 'commerce'
}   

我们可以在 JavaScript 中向已定义的对象添加新属性。有几种方法可以用来向 JavaScript 对象添加属性。

以下是用于修改 JavaScript 对象的方法：

• 方括号表示法
• 点表示法
• assign() 方法
• ES6 计算属性名
• defineProperty() 方法
• 展开运算符语法

我们将通过示例来理解每种方法。

使用方括号表示法

我们将使用方括号表示法向对象添加一个新属性。

演示

我们将创建一个名为 student 的对象，其中包含 firstName 和 lastName 两个属性。我们将添加名为 age，值为 19，以及名为 stream，值为 commerce 的新属性。

语法

代码

输出

我们可以看到，已将两个新属性添加到 student 对象中。

 
{ firstName: 'Vedant', lastName: 'Singh', age: 19, stream: 'commerce' }  

使用点表示法

我们将使用点表示法将一个新属性添加到对象中。

语法

演示

我们将创建一个名为 'employee' 的对象，该对象包含 firstName 和 lastName 两个属性。我们将添加名为 age，值为 28，以及名为 department，值为 finance 的新属性。

代码

输出

我们可以清楚地看到，已将两个新属性添加到 employee 对象中。

 
{
  firstName: 'Sahil',
  lastName: 'Kumar',
  age: 28,
  department: 'finance'
}   

使用 Object.assign()

我们将使用 Object.assign() 属性将一个新属性添加到对象中。

语法

演示

我们将创建一个名为 car 的对象，其中包含 carCompany 和 carModel 两个属性。我们将添加一个名为 carColor，值为 red 的新属性。

代码

输出

 
{ carCompany: 'Ford', carModel: 'Ford Figo', carColor: 'red' }   

使用 ES6 计算属性名

ES6 计算属性名允许您使用变量来设置属性名。

演示

我们将创建一个名为 food 的对象，其中包含五个属性。我们将添加一个名为 Pizza，值为 249 的新属性。

代码

输出

 
{
  Burger: 99,
  Cheeseburger: 119,
  Taco: 105,
  Sandwich: 59,
  FrenchFries: 109,
  Pizza: 249
}   

使用 Object.defineProperty() 方法

Object.defineProperty() 方法用于修改对象属性，例如向对象添加新属性。此方法还可以配置属性的行为。配置可以是可枚举的或可写的。如果 writable 为 false，则无法向对象添加新值；如果 writable 为 true，则可以向对象添加新值。

语法

演示

我们将使用 Object.defineProperty() 方法修改 JavaScript 对象。

代码

输出

 
Object ID: 501
Object Name: Kartik Kumar   

使用展开运算符 (...)

我们可以使用展开运算符将一个新属性添加到对象中。它会复制现有对象的所有属性，然后通过使用内联属性定义为其添加一个新属性。

语法

演示

我们将创建一个名为 obj 的对象，其中有两个属性 id 和 name。我们将添加两个属性：名为 nationality，值为 Indian，以及名为 gender，值为 Male。

代码

输出

 
{ id: '105', name: 'Kamal' }
{ id: '105', name: 'Kamal', nationality: 'Indian', gender: 'Male' }
{
  name: 'Sonam',
  lastName: 'Singh',
  age: '28',
  gender: 'Female',
  country: 'India',
  city: 'Noida',
  pincode: '201301'
}   

结论

在本文中，我们已经了解了如何在 JavaScript 对象中添加属性。我们通过示例理解了可以用来向对象添加新属性的各种方法。