详解js中Json的语法与格式-js教程-PHP中文网

首页

web前端

js教程

详解js中Json的语法与格式

高洛峰

Dec 05, 2016 pm 04:52 PM

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

JSON语法规则:

数据在名称/值对仲
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON 名称/值对介绍

"name":"张飞",
"age":23

登录后复制

Json的值可以是：

数字(整数或浮点数)
字符串(要包括在双引号中)
逻辑值(true或false)
数组(在方括号中)
对象(在花括号中)

Json转javascript对象的方法为:

eval("(" + str + ")");

代码示例：

<html>
<head>
 <title>Json测试</title>
 <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
 <script type="text/javascript">
  //基本上，Json返回的要么是对象，要么是数组，如果单纯返回一个字符串，那么就没有必要用Json了，因此
  //Json基本就下面这些可，不过要注意双引号
  var str0 = "{employees:&#39;测试&#39;}";
  var obj0 = eval("(" + str0 + ")");
  alert(obj0.employees);   //输出测试
 
  var str = "{name:&#39;张三&#39;,Age:21}";
  var obj = eval("(" + str + ")");
  document.write(obj.name + obj.Age); //输出 张三21
  alert(obj.name);
 
  //别看下面那段Json长，其实是一个对象，属性employees的值是一个对象数组。和上面的相比，只是name:张三 中的"张三"字符串 变成了对象数组而已
  var str2 = &#39;{ "employees" : [&#39; + &#39;{ "firstName":"Bill" , "lastName":"Gates" },&#39; + &#39;{ "firstName":"George" , "lastName":"Bush" },&#39; + &#39;{ "firstName":"Thomas" , "lastName":"Carter" } ]}&#39;;
  var obj2 = eval("(" + str2 + ")");
  alert(obj2.employees[0].firstName);  //弹出 Bill
 
  var str3 = "[1,2,3,4,5,6]";    //json 数组
  var obj3 = eval("(" + str3 + ")");  //输出 2
  alert(obj3[1]);
 </script>
</head>
<body>
 <div id="div1">
 </div>
</body>
</html>

登录后复制

Json与JavaScript对象转换

　　JSON转javascript对象

//Json转对象1
function JsonToObject(str) {
 return eval("(" + str + ")");
}
 
//Json转对象2
function strToJson(str){
 var json = (new Function("return " + str))();
 return json;
}
 
//Json转对象3 jQuery工具函数
$.parseJSON()

登录后复制

　　javascript对象转JSON

//javascript对象转Json
function ObjectToJson(o) {
 var arr = [];
 var fmt = function(s) {
  if (typeof s == &#39;object&#39; && s != null) return json2str(s);
  return /^(string|number)$/.test(typeof s) ? "&#39;" + s + "&#39;" : s;
 }
 for (var i in o) arr.push("&#39;" + i + "&#39;:" + fmt(o[i]));
 return &#39;{&#39; + arr.join(&#39;,&#39;) + &#39;}&#39;;
}

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

如何使用源地图调试缩小JavaScript代码？ Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。

初学者的打字稿，第2部分：基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型与JavaScript一样，TypeScript中的null

如何有效地使用Java的收藏框架？ Mar 13, 2025 pm 12:28 PM

本文探讨了Java收藏框架的有效使用。它强调根据数据结构，性能需求和线程安全选择适当的收集（列表，设置，地图，队列）。通过高效优化收集用法

开始使用Chart.js：PIE，DONUT和BUBBLE图表 Mar 15, 2025 am 09:19 AM

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。创建饼图和环形图饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体

See all articles

详解js中Json的语法与格式

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题