数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学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 方法打印输出。
2K+ 浏览量
