JavaScript 中将 JSON 对象转换为数组

可以使用 JavaScript 创建JSON（JavaScript 对象表示法）对象。JSON 对象 始终用花括号 {} 括起来。键必须是字符串，值必须是有效的 JSON 数据类型。 JSON 支持字符串、数字、对象、布尔值、数组和 Null 等数据类型。键和值之间用冒号 (:) 分隔，逗号分隔每个键值对。

语法

以下是 JSON 对象的语法：

var JSONObj = {};

以下示例是在 JavaScript 中声明 JSON 对象的基本方法：

var JSONObj = {  
   "Movie ":"Avatar", 
   "Director":"James Cameron", 
   "Budget_in_dollars": 250 
};

数组是存储在连续内存位置的相似数据元素的集合。可以使用索引号访问数组元素。这些索引号从 0 开始。

语法

以下是创建数组的语法：

const array = [element1, element2, ...];

这是 JavaScript 中数组的基本声明：

const array = ["shirt","pant","shoe"];

输入输出场景

假设我们有一个包含值和键对的 JSON 对象，我们需要将该对象转换为数组。当我们尝试将 JSON 对象转换为数组时，它将如下例所示。

JSONObject = { 
   "Fisrtname": 'Mohammed", 
   "Lastname": "Ali" 
}; 
Output = [["Firstname", "Mohammed"], ["Lastname", "Ali"]]

Object.keys()

JavaScript 中的Object.keys() 方法将返回一个包含元素的数组，这些元素取自对象的枚举属性。字符串中元素的顺序与对象中的顺序相同。

让我们考虑下面的示例，我们声明了一个包含键值对的 JSON 对象。通过使用Object.keys()，我们将对象的枚举属性转换为字符串数组。

示例

以下是如何使用 object.keys() 方法将 JSON 对象转换为数组的示例：

<html> 
<head> 
   <title>JSON object to an array</title>
   <p id = 'para'> </p> 
</head> 
<body> 
   <script> 
      const JSON_obj = { 
         "Name": "Ali", 
         "Hometown": "Hyderabad", 
         "age": "29" 
      }; 
      var array = Object.keys(JSON_obj); 
      document.getElementById("para").innerHTML = array; 
   </script> 
</body> 
</html>

使用 for…in 循环将 JSON 对象转换为数组

我们可以使用 for…in 循环 将 JSON 对象转换为数组。此循环将迭代所有对象的可枚举属性，这些属性是字符串编码的。默认情况下，内部可枚举值为 true，因为我们通过简单的赋值分配了对象的属性。

让我们考虑一个示例，在这里我们创建一个 JSON 对象并将其转换为数组，方法是将所有属性推入数组中。在这里，循环将迭代对象及其键和值，然后将其推入数组。

示例

以下是如何使用 for…in 循环将 JSON 对象转换为数组的示例：

<!DOCTYPE html> 
<html> 
<head> 
   <title>JSON object to an array</title>
   <button onClick = "func()"> click to convert</button> 
   <p id ='para'> </p> 
   <script> 
      const JSONobject = { 
         "name": "yuvraj", 
         "role": "batsmen", 
         "age": "37", 
         "bat": "left" 
      }; 
      function func(){ 
         const res_array = []; 
         for(let i in JSONobject) { 
            res_array.push([i,JSONobject[i]]); 
         }; 
         document.getElementById("para").innerHTML = res_array; 
      }; 
   </script> 
</head> 
</html>

使用 Object.entries() 方法

JavaScript 中的Object.entries() 方法将返回一个包含 JSON 对象中可枚举属性 [键值对] 的数组。

默认情况下，内部可枚举值为true，因为我们使用简单的赋值分配了对象的属性，数组中属性的顺序与对象中的顺序相同。

示例

在下面的示例中，我们创建了一个 JSON 对象，并使用Object.entries() 将对象的键和值都推入空数组(res_array)。

<!DOCTYPE html> 
<html> 
<head> 
   <title>JSON object to an array</title>
   <button onClick = "func()">Convert!</button> 
   <h2 id = 'heading1'></h2> 
   <script> 
      const JSONobject = { 
         'Movie': 'RRR', 
         'Actor1': 'Ram Charan', 
         'Actor2': 'NTR', 
         'Director': 'SS Rajamouli' 
      };  
      function func(){ 
         const resArray = []; 
         for (const [key, value] of Object.entries(JSONobject)) { 
            resArray.push([`${key}`, `${value}`]); 
         } 
         document.getElementById("heading1").innerHTML = resArray; 
      }; 
   </script> 
</head> 
</html>

更新于：2023年9月12日

40K+ 次浏览

启动您的 职业生涯

完成课程后获得认证

开始学习
广告