1.JSON概述

JavaScript Object Natation,js对象表示法,(像XML一样)是一种数据格式,它与js有相同的语法形式

P.S.一点小历史:JSON之父是道格拉斯,《JavaScript语言精粹》的作者,创造JSON的灵感来自js中的字面量表示法

2.JSON语法

1.表示简单值

例如3, “str”, null, false等等,不支持undefined,而且字符串必须用双引号(JSON里没有单引号表示字符串的用法,这与js不同)

2.表示对象

与js对象字面量类似,但

  • 没有变量声明

  • 没有末尾分号

  • 属性名必须用双引号包裹(很容易错写成单引号或者忘记用引号)

例如:

{
"name" : "ayqy",
"sex" : "M",
"nextSibling" : {
"name" : "xxx",
"sex" : "M",
"nextSibling" : null
}
}

3.表示数组

与数组字面量类似,但

  • 没有变量声明

  • 没有末尾分号

例如:

[3, 6, false, "ayqy", {"name" : "xxx", "age" : 18}]

4.复杂数据结构

数组和对象之间可以通过嵌套来创造更复杂的数据结构,例如:

[
1,
{
"extra" : [
6,
{
"id" : 5,
"attr" : "value"
},
false
],
"index" : 1001
},
2
]

3.序列化(js对象转JSON)

[IE8+]和其它主流浏览器有内置JSON对象,可以调用原生方法来序列化js对象:

JSON.stringify(obj);//按照默认规则序列化,值为undefined和值为函数的属性将被忽略
JSON.stringify(obj, arr/fun(key, value));//支持过滤一部分属性(只保留arr中列出的属性或者用fun来过滤)
JSON.stringify(obj, null, num/strPrefix);//支持格式化,自动换行并每级缩进num个空格或者每级添加一个前缀串

对于[IE7-]如何支持,我们稍后再议

4.解析(JSON转js对象)

JSON.parse(str);//直接解析
JSON.parse(str, fun(key, value));//按fun解析

对于[IE7-]如何支持,我们稍后再议

5.跨浏览器的JSON序列化/解析

对于不支持JSON对象的浏览器可以用一个shim(一个小术语):

下载地址:https://github.com/douglascrockford/JSON-js/(道格拉斯自己捏的)

说白了就是个小型js库(压缩之后4KB而已),提供JSON解析和序列化功能。当然,也可以直接用JQuery

道格拉斯还提供了额外的JSON支持(除基本的stringify和parse外):

json2.js: 如果不存在内置JSON对象的话,会给全局对象添个JSON属性,属性值是一个对象,有stringify和parse方法。parse用的是eval方法解析,还用了几个正则表达式检测,防止执行非JSON代码。在现代浏览器中这个js文件啥也不做,原生支持优先。如果不是要支持[IE8-]的话,就不要用这个,也就是说这个文件并不是必须的。

json.js: 本文件包含json2.js的所有功能,还给Object的原型添了toJSONString方法和parseJSON方法,建议不要用。

json_parse.js: 本文件给了parse函数的另一种实现:用递归下降(P.S.语法分析器。。好吧,道格拉斯大爷战斗力略强)代替了eval函数

json_parse_state.js: 本文件给了parse函数的另一种实现:用状态机(P.S.。。。)代替了eval函数

cycle.js: 本文件有两个函数:JSON.decycle和JSON.retrocycle,用来消除/恢复JSON中的环和图结构,JSONPath用来表示数据关系

P.S.上面的是readme文件的简单翻译

参考资料:

JS学习笔记9_JSON的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

随机推荐

  1. Java中的逆变与协变 很直接不饶弯的讲出来了

    ```java 协变 extends只能new 辈分比自己低的家伙 List<? extends Number> list001 = new ArrayList<Integer> ...

  2. flask部署

    https://blog.csdn.net/zhuod/article/details/77850783

  3. .net获取本地ip地址

    整理代码,.net获取本地ip地址,代码如下: string name = Dns.GetHostName(); IPHostEntry IpEntry = Dns.GetHostEntry(name ...

  4. 9月list

    开学了,我已经是大三的老学姐了,难受! 哇,时间过得好快啊,感觉自己快毕业了,肿么办!!! 9月了,快一年了,其实很多东西都变了,比如你. 9月4日的list:

  5. Java crash问题分析

    Java的应用有时候会因为各种原因Crash,这时候会产生一个类似java_errorpid.log的错误日志.可以拿到了 这个日志,怎样分析Crash的原因呢?下面我们来详细讨论如何分析java_e ...

  6. 更好的转换规则(深入理解c#)

    从任何类型”转换成他本身“被认为好于“转换成一个不同的类型”,这个规则称为“更好的转换”规则.

  7. 69.查看APP沙盒缓存的内容文件

    第一步:链接真机设备,点击Xcode ,按command+shift+2  弹出电脑所运行的APP列表 第二步:选中你需要查看的APP,点击最下面! 类似于设置图标的按钮! 点击第二个Download ...

  8. Explain结果解读与实践

    MySQL的EXPLAIN命令用于SQL语句的查询执行计划(QEP).这条命令的输出结果能够让我们了解MySQL 优化器是如何执行SQL 语句的.这条命令并没有提供任何调整建议,但它能够提供重要的信息 ...

  9. String拼接

    1. String[] members=ArrayDATA_IDS; String usernames = ""; for(String id :members) { userna ...

  10. vue+mui轮播图

    mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...