【重温基础】16.JSON对象介绍
本文是 重温基础 系列文章的第十六篇。
今日感受:静。
系列目录:
本章节复习的是JS中的关于JSON对象相关知识。
前置知识:
JSON
是一种按照JavaScript
对象语法的数据格式。
1.概念
概念有三点:
JSON
全称JavaScript
对象表示法(JavaScript Object Notation)。
JSON
是存储和交换文本信息的语法。类似XML
。
JSON
比XML
更小、更快,更易解析。
———— 摘自 W3school JSON教程
JSON
使用 JavaScript
语法来描述数据对象,但是 JSON
仍然独立于语言和平台。JSON
解析器和 JSON
库支持许多不同的编程语言。
2.语法
JSON
在使用过程中可作为一个对象或者字符串存在,当作为对象时,用于获取JSON
中的数据,而作为字符串时常用于网络数据传输。
JSON
语法规则:
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
通常,JSON
数据书写格式是名称/键值
:
"name" : "pingan"
而JSON
的值可以是 :
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(
true
或false
) - 数组(在方括号中)
- 对象(在花括号中)
null
JSON常常有三种类型:
三种类型:简单之,对象和数组。
必须注意:JSON字符串必须是双引号,单引号会语法错误。
2.1 简单值:
简单值可以是字符串:
"hello leo!"
也可以是数字,逻辑值:
1
2.2 对象类型:
内容放在花括号
内,是多个键值对。
JSON对象 与 js 对象的三个区别:
- JSON对象 必须加双引号,而 js 对象属性名可以不加双引号。
- JSON对象 没有变量声明,而 js 对象有。
- JSON对象 没有分号,而 js 对象有。
// js 对象
var obj = {
name : "pingan",
age : "25",
};
// json 对象
{
"name" : "pingan",
"age" : "25",
"box" : [
"a","b","c"
]
}
2.3 数组类型:
内容放在方括号
内。
JSON数组也没有分号和变量,常常可以把JSON数组和对象结合使用,构成更复杂的数据集合。
[
{
"name" : "leo",
"age" : 25,
"box" : ["a","b","c"]
},
{
"name" : "pingan",
"age" : 25,
"box" : ["a","b","c"]
}
]
3. 使用
JSON最常见的用法就是,从服务端获取JSON数据,再将JSON数据转成JavaScrip对象使用。
JSON对象有两个方法:
JSON.stringify()
: 序列化操作,将JavaScript对象
转换成JSON字符串
。JSON.prase()
:反序列化操作,将JSON字符串
解析成JavaScript值
。
3.1 序列化操作
序列化操作常常使用JSON.stringify()
。
简单例子:
let leo = {
name : "leo",
age : 25,
box : ["a","b","c"]
}
let pingan = JSON.stringify(leo);
console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"
注意:
- 默认情况下,
JSON.stringify()
输出的JSON字符串不包含任何空格字符或缩进,因此结果就像上面那样。 - 序列化
JavaScript对象
时,所有函数及原型成员都会被忽略,不体现在结果上。 - 值为
undefined
的任何属性都会被跳过。
因此,最终的值都是有效的JSON数据类型的实例属性。
3.2 反序列化操作
序列化操作常常使用JSON.parse()
。
简单例子:
let copyPingan = JSON.parse(pingan);
copyPingan; // {name: "leo", age: 25, box: Array(3)}
如果传入JSON.parse()
的字符串不是有效的JSON,则会抛出错误。
注意:
虽然pingan
和copyPingan
属性相同,但两者独立,没有任何关系。
4.序列化选项
JSON.stringify()
除了要传入序列化对象作为参数,还可以接收其他两个参数,用来指定序列化JavaScript对象的方式:
- 过滤器:可以是个数组,也可以是个函数。
- 选项:表示是否在
JSON字符串
中保留缩进。
单独或组合使用两者,可以更加全面深入的控制JSON的序列化。
4.1 过滤器
若过滤器的参数是数组,则JSON.stringify()
返回的结果将只包含数组中的属性:
var leo = {
name : "leo",
age : 25,
box : ["a","b","c"]
}
var pingan = JSON.stringify(leo,["name","age"]);
console.log(pingan); // "{"name":"leo","age":25}"
若过滤器的参数是函数,则情况就不一样了,传入的函数需有两个参数(属性名和属性值):
var leo = {
"name" : "leo",
"age" : 25,
"box" : ["a","b","c"]
}
var pingan = JSON.stringify(leo,function(key, value){
switch(key){
case "name":
return "我叫" + value
case "age":
return value + "岁"
default:
return value
}
});
console.log(pingan); // "{"name":"我叫leo","age":"25岁","box":["a","b","c"]}"
注意:使用switch
的时候,必须指定default
否则会返回undefined
。
4.2 选项
JSON.stringify()
第三个参数是个选项,控制结果中的缩进和空白符。
- 若选项只有一个值,则表示每个级别缩进的空格数,最大值为
10
,超过10
则只会是10
。
var leo = {
"name" : "leo",
"age" : 25,
"box" : ["a","b","c"]
}
var pingan = JSON.stringify(leo, null, 4);
console.log(pingan);
/*
"{
"name": "leo",
"age": 25,
"box": [
"a",
"b",
"c"
]
}"
*/
5.解析选项
JSON.parse()
可以接收一个函数作为参数,对每个键值对调用,为了跟JSON.stringify()
的过滤函数
区别,这个函数成为还原函数
。
- 若还原函数返回
undefined
,则表示要从结果中删除对应的键。 - 若还原函数返回其他值,则将该值插入结果中。
还原函数接收两个参数:属性名和属性值。
举例,在日期字符串转换为Date对象中,经常要用到还原函数:
var leo = {
"name" : "leo",
"age" : 25,
"date" : new Date(1993, 9, 9)
}
var pingan = JSON.stringify(leo);
var copy = JSON.parse(pingan,function (key, value){
// return key == "date" ? new Date(value) : value;
if(key == "date"){
return new Date(value);
}else{
return value;
}
})
console.log(copy);
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"
参考文章:
- W3school JSON教程
- 《JavaScrip高级程序设计》
本部分内容到这结束
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
JS小册 | js.pingan8787.com |
【重温基础】16.JSON对象介绍的更多相关文章
- 【重温基础】17.WebAPI介绍
本文是 重温基础 系列文章的第十七篇. 今日感受:挑战. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 [重温基础 ...
- 【重温基础】15.JS对象介绍
从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 [Cute-JavaScript]系列文章中. 关于[Cute-JavaScript ...
- 【重温基础】11.Map和Set对象
本文是 重温基础 系列文章的第十一篇. 今日感受:注意身体,生病花钱又难受. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1.语法和数据类型 [重温基础]2 ...
- js中的json对象详细介绍
JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...
- 关于new Function使用以及将json格式字符串转化为json对象方法介绍
一直对Function()一知半解,今日就Function()的使用做一下总结 一.函数实际是功能完整的对象,用Fucntion()直接创建函数. 语法规则: var 函数名 = new Fun ...
- Java基础97 json插件的使用(java对象和json字符串对象之间的转换)
1.需要用到的包 2.实例 实体类 people package com.shore.entity; /** * @author DSHORE/2019-4-19 * */ public class ...
- 一种简单,轻量,灵活的C#对象转Json对象的方案(续)
本文参考资料 一种简单,轻量,灵活的C#对象转Json对象的方案 [源码]Literacy 快速反射读写对象属性,字段 一段废话 之前我已经介绍了这个方案的名称为JsonBuilder,这套方案最大的 ...
- JSon 对象转字符的一些方法
引用System.Web.Entity.dll public static string ToJSON(this object obj) { JavaScriptSerializer serializ ...
- 自定义 JSON 对象
针对 IE9 以下不支持 JSON 对象的处理方式,网上大部分自定义的方式无形之中都会将中文转码为 Unicode 编码格式的字符换,但是在浏览器中我们有无法察觉到(浏览器自己解析成 UTF8 了), ...
随机推荐
- [spark程序]统计人口平均年龄(HDFS文件)(详细过程)
一.题目描述 (1)请编写Spark应用程序,该程序可以在分布式文件系统HDFS中生成一个数据文件peopleage.txt,数据文件包含若干行(比如1000行,或者100万行等等)记录,每行记录只包 ...
- python:类1——类和对象基础
一.OO = Object Oriented 面向对象 OOP面向对象编程.OOA面向对象分析.OOD面向对象设计 二.属性+方法——>类(数据和函数) class Turtle(): #类名约 ...
- apple平台下的objc的GCD,多线程编程就是优雅自然。
在apple的操作系统平台里,GCD使得多线程编程是那么的优雅自然.在传统的多线程编程中,首先要写线程处理循环:之后还有事件队列,消息队列:还要在线程循环中分离事件解释消息,分派处理:还要考虑线程间是 ...
- Java描述设计模式(24):备忘录模式
本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 常见的视频播放软件都具备这样一个功能:假设在播放视频西游记,如果这时候切换播放视频红楼梦,当再次切回播放西游记时, ...
- 【论文阅读】The Contextual Loss for Image Transformationwith Non-Aligned Data(ECCV2018 oral)
目录: 相关链接 方法亮点 相关工作 方法细节 实验结果 总结与收获 相关链接 论文:https://arxiv.org/abs/1803.02077 代码:https://github.com/ro ...
- JAVA数组翻转
首先可 public class RevcArr { public static void main(String[] args) { // TODO Auto-generated method st ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- Spring Boot整合Elasticsearch启动报错
如果你遇见下面的错误,很可能是你的springboot和es版本关系不对应 ERROR 14600 --- [ main] .d.e.r.s.AbstractElasticsearchReposito ...
- Java中我常用到的十二个最基本的快捷键
自己在Java中经常用到的快捷键先记下来方便日后学习之用: 1. Ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按 ...
- Docker部署Mysql集群
单节点数据库的弊病 大型互联网程序用户群体庞大,所以架构必须要特殊设计 单节点的数据库无法满足性能上的要求 单节点的数据库没有冗余设计,无法满足高可用 单节点MySQL的性能瓶领颈 2016年春节微信 ...