本文是 重温基础 系列文章的第十六篇。

今日感受:静。

系列目录:

本章节复习的是JS中的关于JSON对象相关知识。

前置知识

JSON是一种按照JavaScript对象语法的数据格式。

1.概念

概念有三点:

JSON全称JavaScript 对象表示法(JavaScript Object Notation)。

JSON存储交换文本信息的语法。类似 XML

JSONXML 更小、更快,更易解析。

———— 摘自 W3school JSON教程

JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

2.语法

JSON在使用过程中可作为一个对象或者字符串存在,当作为对象时,用于获取JSON中的数据,而作为字符串时常用于网络数据传输。

JSON语法规则:

  1. 数据在名称/值对中
  2. 数据由逗号分隔
  3. 花括号保存对象
  4. 方括号保存数组

通常,JSON数据书写格式是名称/键值

"name" : "pingan"

JSON的值可以是 :

  1. 数字(整数或浮点数)
  2. 字符串(在双引号中)
  3. 逻辑值(truefalse
  4. 数组(在方括号中)
  5. 对象(在花括号中)
  6. null

JSON常常有三种类型:

三种类型:简单之,对象和数组。

必须注意:JSON字符串必须是双引号,单引号会语法错误。

2.1 简单值:

简单值可以是字符串:

"hello leo!"

也可以是数字,逻辑值:

1

2.2 对象类型:

内容放在花括号内,是多个键值对。

JSON对象 与 js 对象的三个区别:

  1. JSON对象 必须加双引号,而 js 对象属性名可以不加双引号。
  2. JSON对象 没有变量声明,而 js 对象有。
  3. 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"]}"

注意

  1. 默认情况下,JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进,因此结果就像上面那样。
  2. 序列化JavaScript对象时,所有函数及原型成员都会被忽略,不体现在结果上。
  3. 值为undefined的任何属性都会被跳过。

因此,最终的值都是有效的JSON数据类型的实例属性。

3.2 反序列化操作

序列化操作常常使用JSON.parse()

简单例子:

let copyPingan = JSON.parse(pingan);
copyPingan; // {name: "leo", age: 25, box: Array(3)}

如果传入JSON.parse()的字符串不是有效的JSON,则会抛出错误。

注意

虽然pingancopyPingan属性相同,但两者独立,没有任何关系。

4.序列化选项

JSON.stringify()除了要传入序列化对象作为参数,还可以接收其他两个参数,用来指定序列化JavaScript对象的方式:

  1. 过滤器:可以是个数组,也可以是个函数
  2. 选项:表示是否在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()第三个参数是个选项,控制结果中的缩进和空白符。

  1. 若选项只有一个值,则表示每个级别缩进的空格数,最大值为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"}"

参考文章:

  1. W3school JSON教程
  2. 《JavaScrip高级程序设计》

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
JS小册 js.pingan8787.com

【重温基础】16.JSON对象介绍的更多相关文章

  1. 【重温基础】17.WebAPI介绍

    本文是 重温基础 系列文章的第十七篇. 今日感受:挑战. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 [重温基础 ...

  2. 【重温基础】15.JS对象介绍

    从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 [Cute-JavaScript]系列文章中. 关于[Cute-JavaScript ...

  3. 【重温基础】11.Map和Set对象

    本文是 重温基础 系列文章的第十一篇. 今日感受:注意身体,生病花钱又难受. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1.语法和数据类型 [重温基础]2 ...

  4. js中的json对象详细介绍

    JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...

  5. 关于new Function使用以及将json格式字符串转化为json对象方法介绍

    一直对Function()一知半解,今日就Function()的使用做一下总结 一.函数实际是功能完整的对象,用Fucntion()直接创建函数. 语法规则:    var 函数名 = new Fun ...

  6. Java基础97 json插件的使用(java对象和json字符串对象之间的转换)

    1.需要用到的包 2.实例 实体类 people package com.shore.entity; /** * @author DSHORE/2019-4-19 * */ public class ...

  7. 一种简单,轻量,灵活的C#对象转Json对象的方案(续)

    本文参考资料 一种简单,轻量,灵活的C#对象转Json对象的方案 [源码]Literacy 快速反射读写对象属性,字段 一段废话 之前我已经介绍了这个方案的名称为JsonBuilder,这套方案最大的 ...

  8. JSon 对象转字符的一些方法

    引用System.Web.Entity.dll public static string ToJSON(this object obj) { JavaScriptSerializer serializ ...

  9. 自定义 JSON 对象

    针对 IE9 以下不支持 JSON 对象的处理方式,网上大部分自定义的方式无形之中都会将中文转码为 Unicode 编码格式的字符换,但是在浏览器中我们有无法察觉到(浏览器自己解析成 UTF8 了), ...

随机推荐

  1. nyoj 61-传纸条(一)(双向dp)

    61-传纸条(一) 内存限制:64MB 时间限制:2000ms Special Judge: No accepted:8 submit:37 题目描述: 小渊和小轩是好朋友也是同班同学,他们在一起总有 ...

  2. MAC系统下,Jmeter5.1.1 无法录制问题

    问题一: 点击[start]先出现一个检查证书信息的弹窗,确保删除旧的安装新的,并且需要信任证书 (一般证书只需要信任一下即可,每次启动都会有这个弹窗提醒) 问题二: MAC OS系统使用Jmeter ...

  3. shell命令管道未读完阻塞了子进程,与等待其结束的父进程死"锁"。

    在exec执行一个子进程,我们希望使用管道取得子进程在重定向后的标准输出上的结果,同时等待子进程的结束.那么是等待子进程结束后才取管道数据,还是边取数据边等待子进程结束呢? 这里有一个调试的例子.u0 ...

  4. 【原】android【手机】屏幕适配解决方案,完美适配适配hdpi,xhdpi,xxhdpi的做法。

    1.先说要怎么做,后面在慢慢讲解: 2.现在来讲解为什么要放这三套: 这三套其实按内容来说就两种,为什么这两种可以适配hdpi,xhdpi,xxhdpi呢? 那么两种类型的dimens就可以了,为什么 ...

  5. python线程条件变量Condition(31)

    对于线程与线程之间的交互我们在前面的文章已经介绍了 python 互斥锁Lock / python事件Event , 今天继续介绍一种线程交互方式 – 线程条件变量Condition. 一.线程条件变 ...

  6. Java求吸血鬼数算法(通用)

    /*吸血鬼数字是指位数为偶数的数字,可以由一 * 对数字相乘而得到,而这对数字各包含乘积的一半位数的数字, * 其中从最初的数字中选取的数字可以任意排序. * 以两个0结尾的数字是不允许的. * * ...

  7. 微服务 consul使用

    前言 常见的注册中心有zookeeper .eureka.consul.etcd.从生态发展.便利性.语言无关性等角度来综合考量,选择consul,多数据中心支持,支持k-v能力,可扩展为配置中心.g ...

  8. vue e.path 移动端兼容

    作用 e.path 用来获取点击元素及以上所有父元素的一个数组 问题 当在移动端会有获取不到e.path的问题 不兼容 解决 let path = event.path || (event.compo ...

  9. Redis系列(四):Redis持久化和主从复制原理

    一.持久化 所谓的持久化就是把内存中的数据写到磁盘中去,防止服务宕机后内存数据丢失.Redis4.0之前提供了两种持久化方式:RDB(默认) 和AOF,Redis4.x之后新增了一种混合持久化(本文所 ...

  10. 6. 彤哥说netty系列之Java NIO核心组件之Buffer

    --日拱一卒,不期而至! 你好,我是彤哥,本篇是netty系列的第六篇. 简介 上一章我们一起学习了Java NIO的核心组件Channel,它可以看作是实体与实体之间的连接,而且需要与Buffer交 ...