Làm cách nào để hợp nhất các đối tượng thành một mảng đối tượng duy nhất bằng JavaScript?

Sau đây là mã để hợp nhất các đối tượng thành một mảng đối tượng -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,.sample {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
   .sample {
      color: red;
   }
</style>
</head>
<body>
<h1>Merge objects into a single object array</h1>
<div class="sample">
[{id:22, class:7},{name:'Rohan', age:12},{state:'Delhi',country:'India'}]
</div>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to merge the above objects inside array into a single object</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let personObj = [
      { id: 22, class: 7 },
      { name: "Rohan", age: 12 },
      { state: "Delhi", country: "India" },
   ];
   BtnEle.addEventListener("click", () => {
      personObj = Object.assign(...personObj);
      for (let i in personObj) {
         resEle.innerHTML += "key = " + i + " : Value = " + personObj[i] + "<br>";
      }
   });
</script>
</body>
</html>