如何向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

让我们来理解一下在JavaScript中使用assign()方法如何在不改变现有对象的情况下向对象中添加新元素。

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>