JSON对象的两个方法细解

朴灿烈づ我的快乐病毒、 2022-07-14 02:15 100阅读 0赞

# **JSON**对象 #

### 1、stringify() ###

原型：

JSON.stringify(obj, callback, spaceNumber);

说明：

1.1 将**对象**、**数组**转换为JSON字符串；
    
    1.2 也可以转换boolean类型（true变为字符串“true”）、
        number类型（1变为字符串“1”）、
        string类型（字符串“1”变为字符串“”1“”，注意，这个多了一对引号，外面的一对引号表示是字符串，里面的一对引号是修饰1的）、
        null类型（null变为字符串“null”）、
    
    1.3 不能转换undefined（返回undefined）
        函数（返回同上）；
    
    2.1 第一个参数obj表示被序列化的对象，具体参照1.1~1.3
    
    2.2 第二个参数表示回调函数，即用于处理第一个对象的函数。
        他是递归的执行的，有两个参数；
        第一个参数key是key，第二个参数val是值val；
        this指向的是当前被递归的对象。
        正常情况下，初始的key是空字符串，val是stringify的参数1；
        然后遍历stringify的参数1的各个属性，该怎么转就怎么转，如果遇见val是对象，再遍历val的各个属性
    
    2.3 第三个参数表示空白符，默认是0，即字符串在一行。
        当大于0的时候（假如为n），每个key、val组合单独一行，并缩进n个空白符。
        同级的缩进保持一致，如果某个属性是对象，则该属性的key、val组合相对于该对象的缩进程度，再缩进n个空白符
    
    3.  总结：
        简单来说，由于对象是树形的，因此从根往叶逐个递归遍历序列化目标。
    
        一般来说，不需要有第二、三个参数。
        当有第二个参数时，需要有返回值，返回值是val（即使用这个的原因是val可能被处理）
        同时，如果返回的val是个对象，那么该val则将被递归遍历处理（即使原val不是对象，但因为对象会被递归，因此val会被递归遍历）
    
        当有第三个参数时，一般是为了格式化显示。

更多参见demo

### 2、parse() ###

原型：

JSON.parse(obj, callback);

说明：

1. 用于处理被序列化后的对象，
    2. 第一个参数是被反序列化的对象，第二个参数是在反序列化对象结束后，再遍历结果，然后对值进行处理的回调函数；
    3. 一般情况下，只需要第一个参数即可
    4. 注意，第二个函数在执行前，已经反序列化结束了，然后遍历反序列化结束后返回的对象
    5. this是当前遍历的对象，key是当前遍历的属性，val的当前遍历的属性的值，返回值是经过处理后当前所遍历的属性的值；
    6. 直接返回val则没变化；
    7. 返回undefined，则该属性和值不会被继续递归（假如值是一个对象的话），也不会添加到最后JSON.parse()返回的值之中。

### 3、toString() ###

JSON.toString()返回值是字符串”\[object JSON\]”

DEMO页面可以从我的github上面down下来：  
[https://github.com/qq20004604/some\_demo/blob/master/ES5%E7%9A%84JSON%E5%AF%B9%E8%B1%A1/demo.html][https_github.com_qq20004604_some_demo_blob_master_ES5_E7_9A_84JSON_E5_AF_B9_E8_B1_A1_demo.html]

或者用下面的：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSON对象</title>
    </head>
    <body>
    <div>
        按F12查看console
    </div>
    <script> var test1 = { str: "字符串", num: 123, obj: { obj1: "1", obj2: 2 } }; var result1 = JSON.stringify(test1, function (key, val) { console.log(this); console.log(key); console.log(val); return typeof val === 'string' ? val + "←处理过" : val; }, 4); console.log(result1); console.log("————————分割线————————") var result2 = JSON.parse(result1, function (key, val) { console.log(this); console.log(key); console.log(val); return key === 'obj' ? undefined : val; }) console.log(result2); </script>
    </body>
    </html>

[https_github.com_qq20004604_some_demo_blob_master_ES5_E7_9A_84JSON_E5_AF_B9_E8_B1_A1_demo.html]: https://github.com/qq20004604/some_demo/blob/master/ES5%E7%9A%84JSON%E5%AF%B9%E8%B1%A1/demo.html