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+ 次瀏覽

啟動您的 職業生涯

完成課程後獲得認證

開始學習
廣告