如何在 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+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告