JSON使用技巧

Posted on | In |

  1. JSON序列化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var xiaoming = {
        name: '小明',
        age: 14,
        gender: true,
        height: 1.65,
        grade: null,
        'middle-school': '\"W3C\" Middle School',
        skills: ['JavaScript', 'Java', 'Python', 'Lisp']
    };
    JSON.stringify(xiaoming);
    //'{"name":"明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'

  2. 对序列化后的字符串进行优化，缩进处理

    1
    JSON.stringify(xiaoming, null, ' ');

    输出结果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    "{
        "name": "小明",
        "age": 14,
        "gender": true,
        "height": 1.65,
        "grade": null,
        "middle-school": "\"W3C\" Middle School",
        "skills": [ "JavaScript", "Java", "Python", "Lisp" ]
    }"

    第二个参数用于控制筛选对象的键值

  3. 输出指定键值，可输入数组

    1
    JSON.stringify(xiaoming, ['name', 'age'], ' ');

    输出结果

    1
    2
    3
    4
    "{
        "name": "小明",
        "age": 14
    }"

  4. 还可以输入函数，进行处理

    1
    2
    3
    4
    5
    6
    7
    function convert(key, value) {
        if (typeof value === 'string') {
        	return value.toUpperCase();
        }
        return value;
    }
    JSON.stringify(xiaoming, convert, ' ');

    输出结果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    "{
        "name": "小明",
        "age": 14,
        "gender": true,
        "height": 1.65,
        "grade": null,
        "middle-school": "\"W3C\" MIDDLE SCHOOL",
        "skills": [
            "JAVASCRIPT",
            "JAVA",
            "PYTHON",
            "LISP"
    	]
    }"

  5. 还可以给xiaoming添加一个toJSON，直接序列化数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var xiaoming = {
        name: '小明',
        age: 14,
        gender: true,
        height: 1.65,
        grade: null,
        'middle-school': '\"W3C\" Middle School',
        skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
        toJSON: function () {
            return {
                'NAME': this.name,
                'AGE': this.age * 2
            };
    	}
    };
    JSON.stringify(xiaoming); // '{"NAME":"小明","AGE":28}'

  6. JSON反序列化，使用JSON.parse()把内容变成一个JavaScript对象

    1
    2
    3
    4
    5
    6
    JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
    JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
    JSON.parse('true'); // true
    JSON.parse('123.45'); // 123.45
    JSON.parse('"aa"');//"aa"
    JSON.parse('aa');//SyntaxError

  7. 还可以接受函数，对键值进行处理

    1
    2
    3
    4
    5
    6
    JSON.parse('{"name":"小明","age":14}', function (key, value) {
        if (key === 'name') {
        	return value + '同学';
        }
        return value;
    }); // Object {name: '小明同学', age: 14}