如何在 JavaScript 对象中添加元素？

在 JavaScript 中，对象是一个实时实体，包含属性和方法。简单来说，对象是类的实例。它以键值对的形式存储数据。键通常称为属性，值通常称为属性值。

在 JavaScript 中定义对象有两种方法。

语法

var obj = new Object();

(或)

var obj = {property1: value, property2 : value2 …….}

使用点 (.) 运算符

在 JavaScript 中，使用点 (.) 运算符可以访问存储在对象中的变量。点 (.) 运算符将充当对象和要添加的变量之间的连接器。

此运算符不仅有助于向对象添加新元素，还将在程序的任何其他地方用于访问对象中的现有元素。

let obj = {property: value, …..};
obj.property = value;

让我们通过一个合适的示例来讨论这种方法。

示例

在下面的示例程序中，我们使用了点 (.) 运算符方法来访问和添加对象中的元素。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var student = {
         name: 'abc',
         age: 20,
         city: 'Hyderabad',
      }
      student.marks = 80;
      document.write(
         "Name: " + student.name + "<br>" +
         "Age: " + student.age + "<br>" +
         "City: " + student.city + "<br>" +
         "Marks: " + student.marks
      )
      console.log(student);
   </script>
</body>
</html>

使用 assign() 方法

在 JavaScript 中，assign() 是一个内置方法。使用 assign() 方法，我们可以为现有对象赋值或添加新值，或者创建新对象而无需更改现有对象的值。

语法

Object.assign(target,source);

在 JavaScript assign(目标, 源) 方法接受两个参数，第一个是目标，通常意味着我们可以定位现有对象，或者可以在目标位置放置一个空对象，以便它将创建一个新对象而不会更改现有对象。

而源则表示我们要为对象赋值的属性。

示例 1

让我们了解 assign() 方法如何在不更改现有对象的情况下向 JavaScript 对象添加新元素。

Object.assign({},objectname,{property: value});

在这个例子中，我们使用了 assign() 方法向现有对象添加一个新元素。为此，我们使用了空目标位置并创建了一个新对象，因此它不会更改现有对象的值。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var book = {
         name: 'English',
         price: 250,
      }
      var newobj = Object.assign({}, book, {publishyear : 2015});
      document.write(
         "Name: " + newobj.name + "<br>" +
         "Price: " + newobj.price + "<br> " +
         "Publish year: " + newobj.publishyear
      )
   </script>
</body>
</html>

示例 2

在这个例子中，我们将了解 assign() 方法如何通过修改现有对象来工作。

Object.assign(objectname,{prooerty:value});

在程序中，我们将 assign 方法中的目标参数作为现有对象名称，以便它也将更改现有对象的值。让我们看看下面的例子是如何发生的：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var book = {
         name: 'English',
         price: 250,
      }
      var newobj = Object.assign(book,{publishyear : 2015});
      document.write(
         "Name: " + newobj.name + "<br>" +
         "Price: " + newobj.price + "<br> " +
         "Publish year: " + newobj.publishyear
      )
   </script>
</body>
</html>

使用方括号 []

使用方括号 []：在 JavaScript 中，我们可以使用 [] 方括号向对象添加元素。这是向 JavaScript 对象添加元素的另一种方法。

let obj = {};
obj[property] = value;

示例

在下面的示例程序中，我们使用了方括号 [] 来获取任何特定索引中的元素数组。我们还可以向数组添加元素。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Add Element in an Object</title>
</head>
<body>
   <script>
      var student = {
         name: 'abc',
         age: 20,
      }
      student['city'] = 'Hyderabad';
      document.write(
         "Name: " + student.name + "<br>" +
         "Age: " + student.age + "<br>" +
         "City: " + student.city
      )
      console.log(student);
   </script>
</body>
<html>

更新于：2023年9月2日

70,000+ 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告