H5前端工程师必学JSON对象详解

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}

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 不需要从服务器端发送含有特定内容类型的首部信息。

缺点：

语法过于严谨

代码不易读

eval 函数存在风险

看完文章，您能总结JavaScript字面量和JSON之间的区别了吗？欢迎评论，谢谢