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对象转换为Jquery对象实现代码
Dec 29 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
js实现小星星游戏
Mar 23 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
javascript实现数字时钟效果
Feb 06 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP学习之PHP变量
2006/10/09 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
Javascript倒计时代码
2010/08/12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
windows系统下Python环境搭建教程
2017/03/28 Python
Python实现的堆排序算法示例
2018/04/29 Python
Python 占位符的使用方法详解
2019/07/10 Python
pip安装python库的方法总结
2019/08/02 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
上班离岗检讨书
2014/01/27 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
授权委托书怎么写
2014/04/03 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript