JSON对象详解
JSON（JAVAScript Object Notation）一种简单的数据格式 ， 比xml更轻巧 。XML曾经是程序界风靡一时的语言 ， 但JSON的出现对他也有不小的冲击 。
JSON是JavaScript原生格式 ， 这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包 。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合 。一个对象以“{”（左括号）开始 ， “}”（右括号）结束 。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔 。
规则如下:
1) JSON的属性名称要求以“双引号”包裹
2) 映射用冒号（“：”）表示 。”名称”:值
3) 并列的数据之间用逗号（“ ， ”）分隔 。名称1:值1,名称2:值2
4) 映射的集合（对象）用大括号（“{}”）表示 。{名称1:值1,名称2:值2}
【H5前端工程师必学JSON对象详解】5) 并列数据的集合（数组）用方括号(“[]”)表示 。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
6) 元素值可具有的类型：string, number, object, array, true, false, null
1.1. JSON示例
JSON 用冒号(而不是等号)来赋值 。每一条赋值语句用逗号分开 。整个对象用大括号封装起来 。可用大括号分级嵌套数据 。
var obj = {};
对象描述中存储的数据可以是字符串 ， 数字或者布尔值 。对象描述也可存储函数 ， 那就是对象的方法 。
1.2. 解析JSON
JSON 只是一种文本字符串 。
可以JavaScript 的 eval 语句 。函数 eval 会把一个字符串当作它的参数 。然后这个字符串会被当作 JavaScript 代码来执行 。因为 JSON 的字符串就是由 JavaScript 代码构成的 ， 所以它本身是可执行的
代码实例：
<script language="JavaScript">
var jsonObj = {"name":"xiaoq","age":18};
// 查看json对象的原生结构
console.debug(jsonObj); // "({name:"xiaoq", age:18})"
</script>
<script language="JavaScript">
var jsonStr =’{"name":"xiaoq","age":18}’;
// 查看json对象的原生结构
console.debug(eval(“(”+jsonStr+”)”)); //
</script>
1.3. JSON和JS字面量(重要)
JS字面量：
{name:”小强”}
JSON：
{“name”:”小强”}
格式的识别 ， 可以采用字符串转换方式 。
但是 ， eval的参数是js字符串（并不是JSON字符串） 。
var obj = eval("(" + jsonText + ")");
在ECMAScript3.1标准中 ， 已经提供了一个名为JSON的全局对象 ， 专门用来解析和反解析JSON字符串 。
var obj = JSON.parse("{}"); // 字符串转JSON
JSON.stringify(obj);// 对象转JSON
1.4. 操作JSON
例子1：
<script language="JavaScript">
var people ={"firstName": "Brett", "lastName":"McLaughlin",
"email": "brett@newInstance.com" };
alert(people.firstName);
alert(people.lastName);
alert(people.email);
</script>
<script language="JavaScript">
var people =[
{"firstName": "Brett","email": "brett@newInstance.com" },
{"firstName": "Mary","email": "mary@newInstance.com" }
];
alert(people[0].firstName);
alert(people[0].email);
alert(people[1].firstName);
alert(people[1].email);
</script>
<script language="JavaScript">
var people ={
"username":"mary",
"age":"20",
"info":{"tel":"1234566","celltelphone":788666},
"address":[
{"city":"beijing","code":"1000022"},
{"city":"shanghai","code":"2210444"}
]
};
window.alert(people.username);
window.alert(people.info.tel);
window.alert(people.address[0].city);
</script>
1.5. JSON小结
优点：
作为一种数据传输格式 ， JSON 与 XML 很相似 ， 但是它更加灵巧 。
JSON 不需要从服务器端发送含有特定内容类型的首部信息 。
缺点：
语法过于严谨
推荐阅读
- 全网最系统、完整的Web前端和移动APP开发知识点
- 一位算法工程师给初学者的一封信
- web前端开发需要掌握什么方法与技巧？
- 网络工程师必须了解的ARP知识
- 前端开发工程师必会的5种网页布局方式
- 作为网络工程师必须牢记的几个命令
- 互联网前端开发技术之JavaScript JSON语法详解
- 前端开发中Cookie详解
- 前端三大框架之React前世今生
- 篮球过人10大必学技巧 运球过人