JavaScript对象和JSON

JSON(JavaScript Object Notation),指JavaScript的对象示意法,它自身是个字符串,是一种数据交换花样,并不是对象。平常所提的JSON对象现实是JSON字符串剖析成对象的效果,或是浏览器window对象下的JSON对象。

而且JSON不止用于JavaScript中,其普遍用于数据交换。

JSON和JavaScript对象

一个JSON文件,或一段JSON字符串,平常是如许的:

[{
    "name": "用户权限治理",
    "code": "99990002",
    "icon": "modicon-1",
    "items": [{
        "name": "模块权限",
        "code": "999900020009",
        "url": "",
        "isBlank": false,
        "items": [{
            "name": "导游模板",
            "code": "9999000200090003",
            "url": "pages/accLayoutTest.html",
            "isBlank": false,
            "items": []
        }, {
            "name": "模块治理我们的",
            "code": "9999000200090001",
            "url": "pages/contentPageTest.html",
            "isBlank": false,
            "items": []
        }]
    }]
}, ... ]

而如许类似的JavaScript对象则是如许的:

var menuData = [{
    name: "用户权限治理",
    code: "99990002",
    icon: "modicon-1",
    items: [{
        name: "模块权限",
        code: "999900020009",
        url: "",
        isBlank: false,
        items: [{
            name: "导游模板",
            code: "9999000200090003",
            url: "pages/accLayoutTest.html",
            isBlank: false,
            items: []
        }, {
            name: "模块治理我们的",
            code: "9999000200090001",
            url: "pages/contentPageTest.html",
            isBlank: false,
            items: []
        }]
    }]
}, ...]

二者异常的类似,所差别的是就是JavaScript对象中属性名,也就是对象的key值是能够没有引号的,其值为字符串时,运用''""包裹都可。 因而我们很多人将第一段代码块里所写的JSON称为JSON对象,现实上,它并不是一个对象,只是一个纯真的字符串罢了,然则它相符JSON的语法划定规矩,能够很轻易地转化为JavaScript对象,或许轻易地用于数据交换。

以下我们来相识一下JSON

JSON语法

  • JSON语法划定规矩

    JSON 语法是 JavaScript 对象示意语法的子集,其基本原则以下:

    • 数据在键值对中

    • 数据由逗号分开

    • 花括号保留对象

    • 方括号保留数组

  • JSON的值

    • 数字(整数或浮点数)

    • 字符串(在双引号中)

    • 逻辑值(truefalse

    • 数组(在方括号中[]

    • 对象(在花括号中{}

    • null

JSON作为一种数据交换花样,为了保证其能被准确轻易的剖析,其花样有严厉的要求,必需遵照以下划定规矩:

  1. 复合范例的值只能是数组对象,不能是函数、正则表达式对象、日期对象。

  2. 简朴范例的值只要四种:字符串、数值(必需以十进制示意)、布尔值和null(不能运用NaN, Infinity, -Infinityundefined)。

  3. 字符串必需运用双引号示意,不能运用单引号。

  4. 对象的键名必需放在双引号内里。

  5. 数组或对象末了一个成员的背面,不能有逗号。

  6. 数值前不能加0。

以下是正当的JSON花样示例:

["one", "two", "three"]

{
    "one": 1,
    "two": 2,
    "three": 3
}

{
    "names": [
        "张三",
        "李四"
    ]
}

[
    { "name": "张三" },
    { "name": "李四" }
]

下面这些就是不正当的:

{
    name: "张三",
    'age': 32
} // 属性名必需运用双引号

[32, 64, 128, 0xFFF] // 不能运用十六进制值

{
    "name": "张三",
    "age": undefined
} // 不能运用undefined

{
    "name": "张三",
    "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
    "getName": function() {
        return this.name;
    }
} // 不能运用函数和日期对象

{
    "name": "李四",
    "age": 018
} // 数值前不能有0

以上代码中为了指出毛病地点,运用了JavaScript的解释法,现实JSON中是不能有解释的。

不正当的JSON会在剖析成JavaScript对象时,涌现毛病。

JSON和JavaScript对象的转化

window.JSON

JSON作为一种数据交换花样,被写入了ECMAScript 5,在IE8及以后的浏览器都供应了一个JSON对象,用于对JSON举行剖析和序列化。

JSON.parse()

此要领吸收一个JSON字符串,返回剖析后的JavaScript对象,平常为ObjectArray

// JSON数据
var humansData = '[{"name":"zs","age":28},{"name":"ls","age":26}]';
// 剖析为JavaScript对象
var humans = JSON.parse(humansData);

// 以后就可以够接见其元素或属性了
humans[1].name; // ls
humans[1].age; // 26

假如传入不正当的JSON,则会在JSON.parse时报错。

为何我们在ajax要求中,纵然要求的数据为JSON,我们不必剖析就可以直接运用呢?

// test.text内容
/*
[{
    "name":"zs",
    "age":28
},{
    "name":"ls",
    "age":26
}]
*/

$.ajax({
    url: './test/test.text',
    dataType: 'JSON'
}).done(function(data){
    console.dir(data); // Array[2]
    console.log(data[0].name); // zs
    // 这里没有转化为js对象就可以接见其属性?!    
});

这里现实是由于指定了dataType为JSON,从而举行了自动转化,所以能直接在胜利回调中运用其属性。假如去掉dataType的指定,就不能直接接见其属性了,由于未转化时,其自身是一个字符串。第一行输出为test.text的内容,第二行输出undefined

JSON.stringify()

此要领可吸收一个JavaScript值将转化为JSON字符串,此字符串可被JSON.parse复原。

var humans = [{
    "name": "zs",
    "age": 28,
    "birth": new Date()
}, {
    "name": "ls",
    "age": 26,
    "birth": new Date()
}];

// 转化为JSON字符串
JSON.stringify(humans);
// "[{"name":"zs","age":28,"birth":"2016-10-25T07:24:11.701Z"},{"name":"ls","age":26,"birth":"2016-10-25T07:24:11.701Z"}]"

前面我们讲到了JSON中并不是支撑一切的JavaScript范例,因而此要领对一些JSON不可接收的值有所处置惩罚:原始对象中,假如有一个成员的值是undefined、函数或XML对象,这个成员会被省略。假如数组的成员是undefined、函数或XML对象,则这些值被转成null。

我们还发明,JSON中是不支撑Date对象的,而上述转化为字符串的效果中准确包括了birth的值,其为一个日期花样的字符串。这是由于在Date对象上有一个名为toJSON的要领,JSON.stringify在序列化时,现实是挪用了这个要领来输出效果的。

假如一个被序列化的对象具有 toJSON 要领,那末该 toJSON 要领就会掩盖该对象默许的序列化行动:不是谁人对象被序列化,而是挪用 toJSON 要领后的返回值会被序列化,比方:

var obj = {
    foo: 'foo',
    toJSON: function() {
        return 'bar';
    }
};

JSON.stringify(obj); // '"bar"' 
JSON.stringify({x: obj}); // '{"x":"bar"}'

相识即可,详见: MDN:JSON.stringify(){.doc-link}

我们能够常常看到的是JSON.stringify( obj , null , 4),如许是什么意义呢?

关于上例,替换末了一句,效果以下所示:

JSON.stringify(humans, null, 4);
// "[
//     {
//         "name": "zs",
//         "age": 28,
//         "birth": "2016-10-25T07:24:11.701Z"
//     },
//     {
//         "name": "ls",
//         "age": 26,
//         "birth": "2016-10-25T07:24:11.701Z"
//     }
// ]"

实在没什么变化,不过是加上了空格缩进,使得可读性更高了。

其他两个参数的申明以下:

  • 第二个参数可指定序列化时的操纵。

    • 假如该参数是一个函数,则在序列化过程当中,被序列化的值的每一个属性都邑经由该函数的转换和处置惩罚;

    • 假如该参数是一个数组,则只要包括在这个数组中的属性名才会被序列化到终究的 JSON 字符串中;

    • 假如该参数为null或许未供应,则对象一切的属性都邑被序列化;

  • 第三个参数用于指定缩进用的空缺字符串,用于美化输出(pretty-print);

    • 假如参数是个数字,它代表有若干的空格;上限为10。该值若小于1,则意味着没有空格;

    • 假如该参数为字符串(字符串的前十个字母),该字符串将被作为空格;

    • 假如该参数没有供应(或许为null)将没有空格。

替换要领

window.JSON对象下虽然供应了完全的JSON字符串和JavaScript对象的转换要领。然则在IE8(兼容形式)以及更低版本的IE下没有供应这个对象,因而我们须要一些替换计划。

  • jQuery中供应了parseJSON如许一个要领来替换JSON.parse,它吸收一个规范花样的JSON字符串,返回一个剖析后的JavaScript对象。

  • 运用http://www.json.org/供应了一个json.js,如许ie8(兼容形式),ie7和ie6就可以够支撑JSON对象以及其stringify()parse()要领; 能够在https://github.com/douglascrockford/JSON-js上获取到这个js,平常现在用json2.js。

  • 还能够运用 eval('(' + jsonstr + ')') ; 来将json字符串转换成json对象,注重须要在json字符外包裹一对小括号。但最好不要运用这类体式格局,由于这类体式格局不安全,eval会将JSON字符串作为JavaScript语句来实行,JSON中的风险代码将被实行。

参考链接

JSON

JSON对象

基础没有“JSON对象”这回事!

JavaScript规范库-JSON对象

js对象与JSON字符串互转

我的博客 – JavaScript 原型链

    原文作者:依韵_宵音
    原文地址: https://segmentfault.com/a/1190000008825739
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞