从JSON对象转换为JavaScript中的数组

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

语法

以下是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对象中可枚举属性[key, value对]的数组。

默认情况下，内部可枚举值为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>