JavaScript 陣列轉換為 JSON

在 JavaScript 中，陣列是一個特殊的物件，它可以儲存多種型別的值，這意味著它可以同時儲存整數值、字串值或浮點值。在 JavaScript 中建立陣列有多種方法，以下是語法：

var array = [value1, value2, value3,…];
or
var array = new Array(size);
or
var array = new Array(element1, element2,…);

其中 value 是陣列的元素，可以是任何型別。

JSON 是 JavaScript 中的一種物件表示法，用於基於 JavaScript 物件語法表示結構化資料。它通常用於在 Web 應用程式中傳輸資料。例如，如果我們從伺服器向客戶端傳送任何資料，它將顯示在網頁上，反之亦然。

注意 - JSON 不能被呼叫或構造。

在本文中，我們將瞭解如何將陣列轉換為 JSON。

使用 JSON.stringify() 方法

JSON.stringify() 方法用於將 JavaScript 值轉換為 JSON 字串。或者我們可以說它用於將 JavaScript 物件轉換為字串。

眾所周知，在 JavaScript 中，陣列是一個物件，因此我們可以將陣列物件作為引數傳遞給此方法，如下所示：

JSON.stringify(array);

示例

以下是將陣列轉換為 JSON 的程式：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Array to JSON</title>
</head>
<body>
   <script>
      //declare an array
      let array = new Array(5);
      //initialize value
      array[0] = 10;
      array[1] = 20;
      array[2] = 30;
      array[3] = 40;
      array[4] = 50;
      //calculate the array length
      let len = array.length;
      document.write("An array elements are: ");
      for(let i = 0; i<len; i++)
      {
         document.write(array[i] + " ");
      }
      //using JSON.stringify method -
      document.write("<br>Array to JSON: " + JSON.stringify(array));
   </script>
</body>
</html>

在上面的程式中，我們首先宣告一個陣列，並設定其大小，然後初始化其值。並使用 for 迴圈列印陣列元素。

然後，我們使用JSON.stringify(array)方法將陣列轉換為JSON，並將陣列作為方法的引數傳遞。使用document.write()方法列印輸出。

讓我們使用 HTML 和 CSS 與 JavaScript：

HTML 檔案 (index.html)

這是 HTML 檔案，該檔案必須以.html副檔名儲存，透過 HTML，我們將構建內容頁面的結構，我們將建立一個按鈕、標題、段落、span 標籤等。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Array to JSON</title>
</head>
<body>
   <h1>JavaScript program to convert an Array to JSON.</h1>
   <p>Click on the below button to convert an array to JSON.</p>
   <button id = 'btn'>Convert to JSON</button><br>
   <span id = 'result'></span>
   <span id = 'result1'></span>
</body>
</html>

CSS 檔案 (style.css)

使用 CSS，我們將管理整個 HTML 頁面的樣式。頁面內的所有 HTML 元素都透過自定義大小、顏色、位置等來設定樣式。

以下是將 CSS 檔案與 HTML 檔案連線的程式碼片段：

<link rel = ‘stylesheet’ href = ‘style.css’>

style.css

button{
   width: 150px;
   height: 30px;
   cursor: pointer;
}
span{
   position: relative;
   top: 20px;
   color: green;
   font-size: 25px;
}

JavaScript 檔案 (index.js)

在 JavaScript 中，我們編寫一個程式來管理某些活動，我們將使用查詢選擇器來獲取按鈕。接下來，使用 onclick 事件將陣列轉換為 JSON，因為當用戶點選按鈕時，陣列將轉換為 JSON。

以下是將 JavaScript 檔案與 HTML 檔案連線的程式碼片段：

<script src = ‘index.js’>

index.js

let colors = ["red", "black", "green", "yellow"];
let res = document.getElementById('result');
res.innerHTML = "An array elements are: " + colors;
let btn = document.querySelector('#btn');
btn.onclick = function()
{
   document.getElementById('result1').innerHTML = "<br>Array to JSON is: " + JSON.stringify(colors);
}

示例

執行上述 HTML、CSS 和 JavaScript 程式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Array to JSON</title>
   <style>
      button{
         width: 150px;
         height: 30px;
         cursor: pointer;
      }
      span{
         position: relative;
         top: 20px;
         color: green;
         font-size: 25px;
      }
   </style>
</head>
<body>
   <h1>JavaScript program to convert an Array to JSON.</h1>
   <p>Click on the below button to convert an array to JSON.</p>
   <button id = 'btn'>Convert to JSON</button><br>
   <span id = 'result'></span>
   <span id = 'result1'></span>
   <script>
      let colors = ["red", "black", "green", "yellow"];
      let res = document.getElementById('result');
      res.innerHTML = "An array elements are: " + colors;
      let btn = document.querySelector('#btn');
      btn.onclick = function()
      {
         document.getElementById('result1').innerHTML = "<br>Array to JSON is: " + JSON.stringify(colors);
      }
   </script>
</body>
</html>

在上面的程式中，我們使用了 HTML、CSS 和 JavaScript。在 HTML 中，我們建立了按鈕、標題、段落、span 標籤等，在 CSS 中，我們編寫了將設定 HTML 按鈕、標題、段落等的樣式的程式碼。

在 JavaScript 中，我們使用查詢選擇器獲取按鈕，並使用 document.getElementById() 獲取 span 標籤的值。之後，我們使用 onclick 事件和 JSON.stringify() 方法將陣列轉換為 JSON。當用戶點選按鈕時，陣列將轉換為 JSON，我們使用 innerHTML 方法列印輸出。

更新於：2022年11月2日

2K+ 瀏覽量

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告