JavaScript 中将对象数组转换为对象

给定一个数组，任务是将对象数组转换为对象。

输入-输出场景

让我们来看一下将数组对象转换为对象的输入-输出场景。假设有一个包含对象的数组。现在，我们需要将这些数组对象转换为单个 JSON 对象。

Const Arr = [ 
   {1:'one'}, 
   {2:'two'} 
];  

Output = { 
   "1":"one", 
   "2":"two" 
}; //Object

使用 Object.assign()

Object.assign() 方法是 JavaScript 中的一个内置属性，它将一个或多个对象的自身可枚举属性复制到目标对象。

语法

以下是 Object.assign() 的语法：

Object.assign(target, ...src)

其中，

  • target 是要复制值和属性的对象。修改后将返回此目标对象。

  • src 是包含要复制的属性的源对象。

此 Object.assign() 方法将返回目标对象。

示例

在下面的示例中，我们创建了一个包含对象的数组。然后我们使用了Object.assign() 方法并将一个空对象作为目标对象传递。然后通过使用扩展运算符 (…)，我们可以将对象的所有元素扩展为一系列值。我们将数组对象复制到空对象中。

<!DOCTYPE html> 
<html> 
<head> 
   <title>Converting array of objects to an object</title 
</head> 
<body> 
   <button onClick="func()"> Click to convert</button> 
   <p id = "para"></p> 
   <script> 
      function func(){ 
         const Cricket = [ 
            { Team: 'India' }, 
            { Captain: 'Virat kohli' },  
            { Age: 34 } 
         ]; 
         const obj = Object.assign({}, ...Cricket); 
         document.getElementById("para").innerHTML = JSON.stringify(obj); 
      }; 
   </script> 
</body> 
</html>

在输出中，我们将所有数组对象属性复制到目标对象（空对象）。

使用 map() 方法

map() 方法将通过为每个数组元素调用函数来创建一个新数组，它仅为数组中的每个元素调用一次函数。原始数组不会被修改。

语法

以下是 JavaScript 中 map() 方法的语法。

map((ele) => { /* … */ })

其中，

  • ele 是正在数组中处理的当前元素。

map() 方法将在新数组中返回回调函数的结果，即每个元素。

示例

在下面的示例中，我们有一个对象数组。在 map() 方法中，我们传递了 (item) 作为参数，它将在数组中被处理，并且我们向 map() 方法传递了一个函数，该函数将以数组的形式返回属性（因为 map() 方法以数组形式返回输出）。

因此，要转换此对象数组，我们使用 object.assign() 方法。通过使用扩展运算符 (…)，我们提取 map() 方法输出的所有元素并将它们复制到目标对象（空对象）。

<!DOCTYPE html> 
<html> 
   <title>Convert an array of objects to an object</title> 
<head> 
   <button onClick="func()"> Click to convert</button> 
   <p id = "para"></p> 
   <script> 
      const players = [ 
         {name:'Dhoni',team:'India'}, 
         {name:'Dilshan',team:'Srilanka'}, 
         {name:'Daniel sams',team:'Australia'}, 
         {name:'Dinesh karthik',team:'India'} 
      ]; 
      function func(){ 
         var res = players.map(item => ({ [item.name]: item.team }) ); 
         var obj = Object.assign({}, ...res ); 
         document.getElementById("para").innerHTML = JSON.stringify(obj); 
      }; 
   </script> 
</head> 
</html>

如我们所见，对象数组已转换为对象。

示例

for 循环

在下面的示例中，我们有一个对象数组。我们运行了一个 for 循环并遍历数组。该循环将name 和team 分配到空对象，直到它分配所有属性。然后我们打印空对象，并将得到 name – team 对作为对象。

<!DOCTYPE html> 
<html> 
<head> 
   <title>Convert an array of objects to an object</title> 
</head> 
<body> 
   <button onClick="func()"> Button </button> 
   <p id = "para"> </p> 
   <script> 
      function func(){ 
         var batsmen = [  
            {name : 'Virat', team : 'India'}, 
            {name : 'Ponting', team : 'Australia'}, 
            {name : 'Kallis', team : 'South Africa'} 
         ]; 
         var obj = {}; 
         let x = 0; 
         let len = batsmen.length; 
         for (x; x < len; x++) { 
            obj[batsmen[x].name] = batsmen[x].team; 
         } 
         document.getElementById("para").innerHTML = JSON.stringify(obj);  
      }; 
   </script> 
</body> 
</html>

在输出中，我们使用 for 循环和空对象将对象数组转换为对象。

更新于： 2022-09-23

397 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告