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

javascriptweb developmentfront end technology更新于 2024/5/19 3:17:00

可以使用 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>

相关文章