在 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 };
Array 是类似数据元素的集合,将存储在连续的内存位置。可以使用索引号访问数组元素。这些索引号将从 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>