资讯专栏INFORMATION COLUMN

JavaScript JSON——“语法、解析与序列化”的注意要点

琛h。 / 1240人阅读

摘要:对象对象作为一种复杂的数据类型,表示的是一组有序的键值对。解析与序列化对象流行的最主要的原因是因为数据结构可以解析为的对象。为了改变序列化对象的结果,函数返回值就是相应键的值。否则按照默认顺序执行序列化。

语法

JSON可以表示一下三种类型的值:

简单值:使用与js相同的语法可以在json中表示字符串、数值、布尔值和null。但是json不支持js的undefined

对象:对象作为一种复杂的数据类型,表示的是一组有序的键值对。每个键值对的值可以是简单值,也可以是复杂数据类型的值

数组:数组也是一种复杂数据类型,表示一组有有序的的值列表,可以通过数值索引来访问其中的值。数组的值也可以是任意类型,简单值,对象,数组均可。

json不支持变量,函数,对象实例,它就是一种表示结构化数据的格式。

简单值

js字符串与json最大的区别在于json字符串必须使用双引号,单引号会导致语法错误。

对象

js中的对象:

var person = {
    name: "oliver",
    age:29
};

但在JSON中属性需要加上双引号

{
    "name": "oliver",
    "age": 29
}

并且没有声明变量;没有末尾的分号。绝对不能在同一个对象中出现两个同名属性。

数组

js中的数组:

var values = [321,"Oliver",false]

JSON中的数组:

[321,"Oliver",false]

JSON中没有变量和分号。

解析与序列化 JSON对象

json流行的最主要的原因是因为json数据结构可以解析为js的对象。早期的json解析器基本上是使用js的eval()函数。对于较早版本的浏览器,可以使用一个shim:https://github.com/douglacrockford/JSON-js。对于那些不能原生支持JSON解析的浏览器,使用shim是最佳选择。ECMAScript 5对解析JSON的行为进行了规范,定义了全局对象JSON。

JSON对象有两个方法:

stringify()

parse()

在最简单的情况下,这两个方法分别用于把javascript对象序列化为JSON字符串和把JSON字符串解析为原声的javascript值。

如(JSON.stringify()):

var book = {
    title: "javascript",
    authors: ["oliver", "troy"],
    edition: 2,
    year: 2000,
    other: undefined //被忽略
};

var jsontext = JSON.stringify(book);

console.log(jsontext); //{"title":"javascript","authors":["oliver","troy"],"edition":2,"year":2000}

又如(JSON.parse()):

var anotherBook = JSON.parse(jsontext);
console.log(Object.keys(anotherBook).toString()); //title,authors,edition,year
序列化选项

JSON.stringify()除了要序列化的Javascript对象外,还可以接收另外两个参数,这两个参数用于指定以不同方式序列化javascript对象。

第一个参数是一个过滤器,可以是一个数组,也可以是一个函数

第二个参数是一个选项,表示是否在JSON字符串中保留缩进。多带带或组合使用这两个参数,可以全面化的控制JSON序列化。

过滤结果

JSON.stringify()的第二个参数是一个数组。在返回结果中,只会包含这些属性。

var book = {
    title: "javascript",
    authors: ["oliver", "troy"],
    edition: 2,
    year: 2000,
    other: undefined //被忽略
};
var jsontext = JSON.stringify(book,["title","authors"]);
console.log(jsontext); //{"title":"javascript","authors":["oliver","troy"]}

如果第二个参数是函数,传入的函数接收两个参数,属性名属性值(function (key,value))。

根据属性名可以知道应该如何处理序列化的对象中的属性。属性名只能是字符串,而在值并非键值对结构的值时,键名可以是空字符串。为了改变序列化对象的结果,函数返回值就是相应键的值。如果返回undefined作为属性值,则表示跳过这个属性。

如:

var book = {
    title: "javascript",
    authors: ["oliver", "troy"],
    edition: 2,
    year: 2000,
    other: undefined //被忽略
};
var jsontext = JSON.stringify(book,function (key,value) {
    switch (key) {
        case "authors":
            return value.join("-");
            break;
        case "edition":
            return undefined;
            break;
        default:
            return value;
    }
});
console.log(jsontext); //{"title":"javascript","authors":"oliver-troy","year":2000}
字符串缩进

当JSON.stringify()的第三个参数是用于控制结果中的缩进和空白符。如果这个参数是一个数值,表示是每个级别缩进的空格数。

var book = {
    title: "javascript",
    authors: ["oliver", "troy"],
    edition: 2,
    year: 2000,
    other: undefined //被忽略
};
var jsonText = JSON.stringify(book,null,4);
var pre = document.getElementById("pre");
pre.innerHTML = jsonText;
// {
//     "title": "javascript",
//     "authors": [
//         "oliver",
//         "troy"
//     ],
//     "edition": 2,
//     "year": 2000
// }

最大的缩进空格数是10,超过10,则设定为10.

如果缩进字符串是一个字符串而非数值,则在这个字符串将在JSON字符串中被用作缩进字符。缩进字符串最多也只出现10个字符长度。

var book = {
    title: "javascript",
    authors: ["oliver", "troy"],
    edition: 2,
    year: 2000,
    other: undefined //被忽略
};
var jsonText = JSON.stringify(book,null,"----");
var pre = document.getElementById("pre");
pre.innerHTML = jsonText;
// {
// ----"title": "javascript",
// ----"authors": [
// --------"oliver",
// --------"troy"
// ----],
// ----"edition": 2,
// ----"year": 2000
// }
toJSON()方法

toJSON()方法,为任何对象添加,它会在对象被序列化是调用,返回指定的数据,而不是整个对象的序列化数据。

toJSON()方法可以作为函数过滤器的补充,因此理解序列化内部顺序十分重要。假设把一个对象传入JSON.stringify(),序列化该对象的顺序如下:

如果存在toJSON()方法而且能通过它取得有效地值,则调用该方法。否则按照默认顺序执行序列化。

如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第一步的返回值。

对第2步返回的每个值进行相应的序列化

如果提供了第三个参数,执行相应的格式化

如:

var book = {
    title: "javascript",
    authors: ["oliver", "troy"],
    edition: 2,
    year: 2000,
    toJSON: function () {
        return this.title + this.edition; //javascript2
    },
    other: undefined //被忽略
};
var jsonText = JSON.stringify(book);
console.log(jsonText); //javascript2
解析选项

JSON.parse()方法也可以接收另一个参数,该参数是一个函数,将在每个键值对上调用。

这个函数被称为还原函数,它与JSON.stringify()方法中的过滤函数有些相似,都接收键值对,返回一个值。如果还原函数返回undefined,则表示要从结果中删除相应的键,如果返回其他值,则将改值插入到结果中。

var book = {
    title: "javascript",
    authors: ["oliver", "troy"],
    edition: 2,
    year: 2000,
    date: new Date(2001, 1, 1),
    other: undefined //被忽略
};
var jsonText = JSON.stringify(book);
console.log(jsonText); //{"title":"javascript","authors":["oliver","troy"],"edition":2,"year":2000,"date":"2001-01-31T16:00:00.000Z"}
var anotherbook = JSON.parse(jsonText, function(key, value) {
    switch (key) {
        case "date":
            return new Date(value);
            break;
        default:
            return value;
            break;
    }
})

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78745.html

相关文章

  • JavaScript AjaxComet——“其他跨域技术”注意要点

    摘要:由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指定的。下面是以个的例子回调函数的名字就是是通过动态的元素来使用的,使用时可以为属性指定一个跨域。是为与其他传递消息的很相似。 图像Ping技术 根据一个网页可以从任何网页中加载图像而不用担心使用跨域的原理, 我们可以动态的创建图像, 使用他们的onload和onerror事件处理程序...

    Hwg 评论0 收藏0
  • JavaScript HTML5脚本编程——“跨文档消息传递”注意要点

    摘要:跨文档消息传送,有时候也简称为,指的是来自不同域的页面间传递消息。接收到消息时,会触发对象的事件。接受到消息后验证发送窗口的来源是至关重要的。基本的检测模式如下。 跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息。例如,www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.wrox.com域中的页面...

    TerryCai 评论0 收藏0
  • JavaScript 高级技巧——“高级函数”注意要点

    摘要:语法如下注意这里使用的并不是的,是内部函数的。函数柯里化的基本方法是使用一个闭包返回一个函数。当函数被调用时,返回的函数还需要设置一些传入的参数。 安全的类型检测 typeof操作符 检测数据类型的结果可能会不正确; instanceof操作符 操作符在多个全局作用域下存在问题: var value = []; var isArray = value instanceof Array;...

    solocoder 评论0 收藏0
  • 详解JavaScript中localStorage使用要点

    摘要:提供了几个方法存储如果存在时,更新获取如果不存在返回删除一旦删除,对应的数据将会全部删除全部清除某些时候使用逐个删除太麻烦,可以使用执行的后果是会清除所有对象保存的数据遍历存储的数据总量,例获取,例存储格式数据将一个对象转换成格式的数据串返 localStorage提供了几个方法: 1、存储:localStorage.setItem(key,value) 如果key存在时,更新valu...

    taowen 评论0 收藏0
  • JavaScript 4 种数组遍历方法: for VS forEach() VS for/in

    摘要:对于,除非使用箭头函数,它的回调函数的将会变化。使用测试下面的代码,结果如下打印打印要点使用的规则要求所有回调函数必须使用箭头函数。 译者按: JS 骚操作。 原文:For vs forEach() vs for/in vs for/of in JavaScript 译者: Fundebug 本文采用意译,版权归原作者所有 我们有多种方法来遍历 JavaScript 的数组或者...

    joyqi 评论0 收藏0

发表评论

0条评论

琛h。

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<