@Dale-Lin 2018-11-02T09:24:02.000000Z 字数 2498 阅读 833

JSON

JavaScript

语法

JSON语法可以表示三种类型的值。

基本类型：字符串、数值、布尔值、null，但不支持undefined、function、Symbol（会被忽略，若在数组中包含则转化成 null）。
对象：无序的键值对或数组，不可枚举的属性会被忽略。

对象的值可以为以上的JSON合法数据类型。

5
"Hello world!"  //JSON中不使用单引号
{       //JSON中不使用变量
    "name": "Nicholas",     //属性名必须加引号
    "age": 29
}
[11, "hi", true, {"example": fine}]     //数组字面量

JSON 的数组、对象不能有多余的 , 。

解析与序列化

JSON对象

ES5定义了全局对象JSON，有两个方法：

JSON.stringify(value[, replacer[, space]])
将一个JavaScript值转换为一个JSON字符串，如指定了replacer为一个函数，则每一个属性都会经过该函数的转化和处理；如指定了replacer为数组，则数组中存在的属性才被转化。

非数组对象的属性不能保证序列化后在字符串中的顺序。

布尔值、数字、字符串的包装对象在序列化过程中会转化为对应的原始值。

undefined、函数、symbol值在序列化过程中会被忽略（非数组中）或转化成null（数组中）

不可枚举属性会被忽略

JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
//'[1, "false", false]'
JSON.stringify({[Symbol("foo")]: "foo"};
//'{}'
JSON.stringify(
    Object.create(
        null,
        {
            x: {value: 'x', enumerable: false},
            y: {value: 'y', enumerable: true}
        }
    )
);
//'{"y": "y"}'

replacer参数

该参数可以为一个函数或一个数组。

若为函数，接收两个参数key和value，转换属性对应的值。
- 如返回一个Number，该数字作为相应属性的值加入JSON字符串。
- 如返回一个String，该字符串作为对应属性的值加入JSON字符串。
- 如返回一个Boolean，true或false作为相应属性的值加入JSON字符串。
- 如返回任何对象（非函数），则递归地对它们序列化，即对它们的键值对也调用replacer方法，将结果作为属性的值输出。
- 如返回undefined，该键值对不会输出。
返回undefined可以选择性不输出某类数据。
若为数组，只输出数组中包含的属性（数组中若有原对象中不存在的属性则为undefined，不输出该属性）。

space参数

用来控制结果字符串中的间距。
若为数字，每一级比上一级多缩进该数字值的空格（最多为10）；
若为字符串，每一级比上一级多缩进该字符串（或前10个字符）。

如果一个被序列化的对象中有 toJSON 方法，这个方法就会覆盖该对象默认的序列化行为——先调用 toJSON 方法获得返回值，再对该返回值序列化得到结果。

var obj = {
    foo: 'foo',
    toJSON: function (){
        return 'bar';
    }
};
JSON.stringify(obj);    //'"bar"'
JSON.stringify({x: obj});   //'{"x": "bar"}'

JSON.parse(text[, reviver])
用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。reviver函数用以在返回前对所得到的兑现执行变换。

text参数

要被解析成JavaScript值或对象的字符串。

JSON.parse('{}');   //{}
JSON.parse('true');     //true

reviver参数

一个可选函数，规定了原始值再返回前如何被解析构造。调用过程中当前属性的对象作为this，当前属性名和属性值作为参数。若返回undefined则不解析该属性。

会深度优先遍历属性值。
注意最外层的特殊性！

JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v){
    console.log(k);
    return v;   //直接返回原值，相当于没有转换
})
//1
//2
//4
//6
//5
//3
//''
//这里的空字符串是解析到最外层时的k值！对应的v值为转换后的解析值!
//{1: 1, 2: 2, 3: {4: 4, 5: {6: 6}}}

可以添加 if(k === "") return v; 使到了顶层直接返回。

从服务器获取 JSON 数据

利用 ajax 获取服务器上的 JSON 数据：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();
</script>
<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>