JSON相关知识汇总


Posted in Javascript onJuly 03, 2015

JSON:JavaScript 对象表示法(JavaScript Object Notation)

JSON 语法规则

数据在名称/值对中

数据由逗号分隔

花括号保存对象

方括号保存数组

JSON有6种类型的值:

对象、数组、字符串、数字、布尔值、null

JSON对象是一个容纳“名/值”对的无序集合

名字:任意字符串

值:任意类型的JSON值,包括数组和对象(对象中可以嵌入对象)
注:JSON字符串必须使用双引号(单引号会报错)

一、对象

javascript中创建字面量:

var object = {
  name:"lily",
  age:22
};

或者:

var object = {
  "name":"lily",
  "age":22
};

JSON:

{
  "name":"lily",
  "age":22
}

二、数组

JSON数组采用的是javascript中数组字面量形式
扩展:

把数组和对象结合起来可以构成更复杂的数据结合
例如:

[
  {
    "name":"lily",
    "age":22,
    "job":"docter"
  },
  {
    "name":"nicy",
    "age":21,
    "job":"teacher"
  },
  {
    "name":"lily",
    "age":22,
    "job":"AE"
  }
]

三、解析与序列化

JSON拥有和javascript类似的语法,可以把JSON数据结构解析为有用的javascript对象

1.JSON对象

收发JSON数据

读取、写入、发送和接收JSON数据对象时,需要转换成字符串,并能从字符串转换为JSON数据对象。(用于javascript相同的方式读写他们)

JSON对象有两个方法:

① stringify(): 把javascript对象序列化为JSON字符串

② parse(): 把JSON字符串解析为原生的javascript值

实例:

var book = {
  title:"professional JavaScript",
  authors:[
    "lily"
  ],
  edition:3,
  year:2011
};
var jsonText = JSON.stringify(book);
alert(jsonText);   //{"title":"professional JavaScript","authors":["lily"],"edition":3,"year":2011}
alert(typeof jsonText);   //string
var bookCopy = JSON.parse(jsonText);
alert(typeof bookCopy);   //object 

这个例子中使用JSON.stringify()把一个javascript对象book序列化为一个JSON字符串,然后保存到jsonText中;将JSON字符串jsonText直接传给JSON.parse()就得到了相应的javascript值

注:序列化javascript对象时,最终值都是有效JSON数据类型的实例属性,任何无效的值都会被跳过

2.序列化选项

JSON.stringify()在序列化javascript对象时,可以接收两个参数

参数一:过滤器,可以是一个数组或函数

参数二:一个选项,表示是否在JSON字符串中保留缩进
1)过滤结果
如果过滤器的参数是数组,那么JSON.stringify()的结果中只包含数组中列出的属性
例如:

var book = {
  "title":"professional JavaScript",
  "authors":[
    "lily"
  ],
  edition:3,
  year:2011
}; 
var jsonText = JSON.stringify(book,["title","edition"]);
alert(jsonText); //{"title":"professional JavaScript","edition":3}
alert(typeof jsonText); // string

2)字符串缩进:
JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符
3)toJSON()方法
给对象定义toJSON()方法,可以返回其自身的JSON数据格式

四、JSON访问值

第一种:简单数组
['item1','item2','item3']
取值:通过数字索引访问嵌入的值(第一项的索引为0)

['item1','item2','item3']
var items = ['item1','item2','item3'];
alert(items[0]);     // item1

第二种:使用{}表示对象和符合数组
{ "key":"value" }
取值:通过键名访问嵌入的值

var oExample = { "name":"lily" };
alert(oExample.name);     // lily
alert(oExample["name"]);     // lily

使用这两种方式,可以用子记录(带命名的或数值的索引键)描述很多数据结构:

例如:

var oNovelist = {
  "firstName":"lily",
  "lastName":"russ",
  "novels":
      [
        {
          "title":"and choas died",
          "year":"1970"
        },
        {
          "title":"the famale man",
          "year":"1976"
        }
      ]
}; 
var msg = oNovelist.firstName+" "+oNovelist.lastName+"'s"+" "+oNovelist.novels[0].title+" "+"was published in"+oNovelist.novels[0].year;
alert(msg);   // lily russ's and choas died was published in1970

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
Javascript webpack动态import
Apr 19 Javascript
javascript表格的渲染组件
Jul 03 #Javascript
解决jquery实现的radio重新选中的问题
Jul 03 #Javascript
移动端JQ插件hammer使用详解
Jul 03 #Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 #Javascript
Javascript实现字数统计
Jul 03 #Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 #Javascript
jQuery中 delegate使用的问题
Jul 03 #Javascript
You might like
php实现斐波那契数列的简单写法
2014/07/19 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
React快速入门教程
2017/01/17 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
Seajs源码详解分析
2019/04/02 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
django 简单实现登录验证给你
2019/11/06 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
教师个人自我鉴定
2014/02/08 职场文书
2014庆六一活动方案
2014/03/02 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript