• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • JSON.parse()

    JSON.parse()方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。

    语法

    JSON.parse(text[, reviver])
    

    参数

    text
    要被解析成 JavaScript 值的字符串,关于JSON的语法格式,请参考:JSON
    reviver可选
    转换器,如果传入该参数(函数),可以用来修改解析生成的原始值,调用时机在 parse 函数返回之前。

    返回值

    Object类型,对应给定 JSON 文本的对象/值。

    异常

    若传入的字符串不符合 JSON 规范,则会抛出SyntaxError异常。

    示例

    使用JSON.parse()

    JSON.parse('{}');              // {}
    JSON.parse('true');            // true
    JSON.parse('"foo"');           // "foo"
    JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
    JSON.parse('null');            // null
    

    使用reviver函数

    如果指定了reviver函数,则解析出的 JavaScript 值(解析值)会经过一次转换后才将被最终返回(返回值)。更具体点讲就是:解析值本身以及它所包含的所有属性,会按照一定的顺序(从最最里层的属性开始,一级级往外,最终到达顶层,也就是解析值本身)分别的去调用reviver函数,在调用过程中,当前属性所属的对象会作为this值,当前属性名和属性值会分别作为第一个和第二个参数传入reviver中。如果reviver返回undefined,则当前属性会从所属对象中删除,如果返回了其他值,则返回的值会成为当前属性新的属性值。

    当遍历到最顶层的值(解析值)时,传入reviver函数的参数会是空字符串""(因为此时已经没有真正的属性)和当前的解析值(有可能已经被修改过了),当前的this值会是{"":修改过的解析值},在编写reviver函数时,要注意到这个特例。(这个函数的遍历顺序依照:从最内层开始,按照层级顺序,依次向外遍历)

    JSON.parse('{"p": 5}', function (k, v) {
        if(k === '') return v;     // 如果到了最顶层,则直接返回属性值,
        return v * 2;              // 否则将属性值变为原来的 2 倍。
    });                            // { p: 10 }
    
    JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
        console.log(k); // 输出当前的属性名,从而得知遍历顺序是从内向外的,
                        // 最后一个属性名会是个空字符串。
        return v;       // 返回原始属性值,相当于没有传递 reviver 参数。
    });
    
    // 1
    // 2
    // 4
    // 6
    // 5
    // 3 
    // ""
    

    JSON.parse()不允许用逗号作为结尾

    // both will throw a SyntaxError
    JSON.parse("[1, 2, 3, 4, ]");
    JSON.parse('{"foo" : 1, }');
    

    Polyfill

    // From https://github.com/douglascrockford/JSON-js/blob/master/json2.js
    if (typeof JSON.parse !== "function") {
        var rx_one = /^[\],:{}\s]*$/;
        var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
        var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
        var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
        var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
        JSON.parse = function(text, reviver) {
    
            // The parse method takes a text and an optional reviver function, and returns
            // a JavaScript value if the text is a valid JSON text.
    
            var j;
    
            function walk(holder, key) {
    
                // The walk method is used to recursively walk the resulting structure so
                // that modifications can be made.
    
                var k;
                var v;
                var value = holder[key];
                if (value && typeof value === "object") {
                    for (k in value) {
                        if (Object.prototype.hasOwnProperty.call(value, k)) {
                            v = walk(value, k);
                            if (v !== undefined) {
                                value[k] = v;
                            } else {
                                delete value[k];
                            }
                        }
                    }
                }
                return reviver.call(holder, key, value);
            }
    
            // Parsing happens in four stages. In the first stage, we replace certain
            // Unicode characters with escape sequences. JavaScript handles many characters
            // incorrectly, either silently deleting them, or treating them as line endings.
    
            text = String(text);
            rx_dangerous.lastIndex = 0;
            if (rx_dangerous.test(text)) {
                text = text.replace(rx_dangerous, function(a) {
                    return (
                        "\\u" +
                        ("0000" + a.charCodeAt(0).toString(16)).slice(-4)
                    );
                });
            }
    
            // In the second stage, we run the text against regular expressions that look
            // for non-JSON patterns. We are especially concerned with "()" and "new"
            // because they can cause invocation, and "=" because it can cause mutation.
            // But just to be safe, we want to reject all unexpected forms.
    
            // We split the second stage into 4 regexp operations in order to work around
            // crippling inefficiencies in IE's and Safari's regexp engines. First we
            // replace the JSON backslash pairs with "@" (a non-JSON character). Second, we
            // replace all simple value tokens with "]" characters. Third, we delete all
            // open brackets that follow a colon or comma or that begin the text. Finally,
            // we look to see that the remaining characters are only whitespace or "]" or
            // "," or ":" or "{" or "}". If that is so, then the text is safe for eval.
    
            if (
                rx_one.test(
                    text
                    .replace(rx_two, "@")
                    .replace(rx_three, "]")
                    .replace(rx_four, "")
                )
            ) {
    
                // In the third stage we use the eval function to compile the text into a
                // JavaScript structure. The "{" operator is subject to a syntactic ambiguity
                // in JavaScript: it can begin a block or an object literal. We wrap the text
                // in parens to eliminate the ambiguity.
    
                j = eval("(" + text + ")");
    
                // In the optional fourth stage, we recursively walk the new structure, passing
                // each name/value pair to a reviver function for possible transformation.
    
                return (typeof reviver === "function") ?
                    walk({
                        "": j
                    }, "") :
                    j;
            }
    
            // If the text is not JSON parseable, then a SyntaxError is thrown.
    
            throw new SyntaxError("JSON.parse");
        };
    }
    

    上篇:JSON

    下篇:JSON.stringify()