文章目录

  • 1.JSON的由来
  • 2.JSON基本语法
  • 3. JSON序列化
  • 4.Stringify方法的补充
    • 4.1 replace参数
    • 4.2 space参数
  • 5.parse方法的补充

1.JSON的由来

在目前的开发中,JSON是一种非常重要的数据格式,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据格式。

JSON的全称是JavaScript Object Notation(JavaScript对象符号):

  • JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式,算是JavaScript的一个子集
  • 但是虽然JSON被提出来的时候是主要应用JavaScript中,但是目前已经独立于编程语言可以在各个编程语言中使用
  • 很多编程语言都实现了将JSON转成对应模型的方式

其他的传输格式:

  • XML:在早期的网络传输中主要是使用XML来进行数据交换的,但是这种格式在解析、传输等各方面都弱于JSON,所以目前已经很
    少在被使用了;
  • Protobuf:另外一个在网络传输中目前已经越来越多使用的传输格式是protobuf,但是直到2021年的3.x版本才支持JavaScript,所
    以目前在前端使用的较少;

目前JSON被使用的场景也越来越多:

  • 网络数据的传输JSON数据;
  • 项目的某些配置文件;
  • 非关系型数据库(NoSQL)将json作为存储格式;

2.JSON基本语法

JSON的顶层支持三种类型的值:

  • 简单值:数字(Number)、字符串(String,不支持单引号)、布尔类型(Boolean)、null类型;
  • 对象值:由key、value组成,key是字符串类型,并且必须添加双引号,值可以是简单值、对象值、数组值;
  • 数组值:数组的值可以是简单值、对象值、数组值;
{"name": "coder","age": 18,"friend": {"name": "kobe"}
}

3. JSON序列化

某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串,这样方便对其进行处理:

  • 比如我们希望将一个对象保存到localStorage中;
  • 但是如果我们直接存放一个对象,这个对象会被转化成 [object Object] 格式的字符串,并不是我们想要的结果;

JSON序列化方法

  • stringify方法:将JavaScript类型转成对应的JSON字符串;
  • parse方法:解析JSON字符串,转回对应的JavaScript类型;

那么上面的代码我们可以通过如下的方法来使用:

var obj = {name: "coder",age: 18,friend: {name: "kobe",},
};// 1.将obj对象进行序列化
var objJSONString = JSON.stringify(obj);
console.log(objJSONString); // {"name":"coder","age":18,"friend":{"name":"kobe"}}// 2.将对象储存到localStorage
localStorage.setItem("info", objJSONString);
// 可以通过getItem获取到存储对象的字符串
var item = localStorage.getItem("info");
console.log(item); // {"name":"coder","age":18,"friend":{"name":"kobe"}}// 3.将字符串转回到对象(反序列化)
var newObj = JSON.parse(item);
console.log(newObj); // {name: 'coder', age: 18, friend: {…}}

4.Stringify方法的补充

4.1 replace参数

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串:

  • 如果指定了一个 replacer 函数,则可以选择性地替换值;

  • var obj = {name: "coder",age: 18,friend: {name: "kobe",},
    };// 将字符串name值变为change再转为字符串
    var objJSONString = JSON.stringify(obj, function (key, value) {if (key === "name") {return "change";}return value;
    });
    console.log(objJSONString); // {"name":"change","age":18,"friend":{"name":"change"}}
    
  • 如果指定的 replacer 是数组,则可选择性地仅包含数组指定的属性;

  • var obj = {name: "coder",age: 18,friend: {name: "kobe",},
    };// 只将数组中的属性转为字符串
    var objJSONString = JSON.stringify(obj, ["age"]);
    console.log(objJSONString); // {"age":18}
    

4.2 space参数

space参数表示以多少个空格进行换行, 使JSON字符串方便阅读

var obj = {name: "coder",age: 18,friend: {name: "kobe",},
};// 只将数组中的属性转为字符串
var objJSONString = JSON.stringify(obj, null, 2);
console.log(objJSONString);

如果对象本身包含toJSON方法,那么会直接使用toJSON方法的结果:

var obj = {name: "coder",age: 18,friend: {name: "kobe",},toJSON: function() {return "change"}
};// 只将数组中的属性转为字符串
var objJSONString = JSON.stringify(obj, null, 2);
console.log(objJSONString); // change

5.parse方法的补充

JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。

  • 提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。
var obj = {name: "coder",age: 18,
};var objJSONString = JSON.stringify(obj);// 转回对象时,并转换某些只,例如将age+2
var newObj = JSON.parse(objJSONString, function (key, value) {if (key === "age") {return value + 2;}return value;
});
console.log(newObj); // {name: 'coder', age: 20}

JSON的方法可以帮我们实现对象的深拷贝:

  • 但是目前我们还没有了解什么是对象的拷贝、浅拷贝、深拷贝的概念;
  • 我们会在JavaScript高级中学习;

JSON数据格式的基本使用-JSON序列化相关推荐

  1. JSON数据格式转换(StringBuffer拼接json串)大全及用法

    JSON是基于{"键":"值"} 对的存在,当然我们也可以多层嵌套,对于刚刚学习JSON十分便捷而且很好用,很容理解.话不多说直接上代码: public Str ...

  2. JSON数据格式超全总结

    ** JSON数据格式超全总结** 1.JSON数据格式概念 JSON数据现在是我们开发中用的最多的,百分之九十的数据都是通过JSON方式进行传输,那么JSON是什么呢? JSON其实是一种轻量级的数 ...

  3. android的json解析方式,Android解析JSON方式

    JSON数据格式的定义: JSON的全称是:JavaScript Object Notation,是一种轻量级的数据交换格式.它构建于两种结构: 1."名称/值" 对的集合(a c ...

  4. php json 默认值,php操作JSON格式数据的实现代码

    知识点: 1.JSON数据格式介绍 2.对数据编码成JSON格式 3.对JSON数据进行解码,并操作 JSON数据格式表示方式如下: { "programmers": [ { &q ...

  5. php json数据值,php操作JSON格式数据

    知识点: 1.JSON数据格式介绍 2.对数据编码成JSON格式 3.对JSON数据进行解码,并操作 JSON数据格式表示方式如下: { "programmers": [ { &q ...

  6. 二进制数据格式MessagePack:比JSON更快更轻巧

    2019独角兽企业重金招聘Python工程师标准>>> MessagePack是一种新的基于二进制的对象序列化类库.它可以像JSON那样,在许多种语言之间交换结构对象(比如移动app ...

  7. json数据格式了解

    json数据格式介绍: https://en.wikipedia.org/wiki/JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式 json语法 ...

  8. python json数据格式数组内元素递增赋值_利用Python实现JSON格式数据的编码与解码操作...

    导读 JSON (全称:JavaScript Object Notation )是一种轻量级的数据交换格式,所谓的轻量级,是与 XML 数据结构相比而言的,在描述相同的数据下,JSON 所需的字符比X ...

  9. 一个页面上多个form表单的用json数据格式提交到后台

    在项目开发中遇到多个表单需要提交到后台,而且其中包含一些table数据,所以最后经过查询资料总结出以下方法:(我用的前端框架是layui其他的思想应该是一样的) 在看代码之前先说一下我的思路,因为代码 ...

最新文章

  1. 环境变量,cp,mv,查看文档命令
  2. Educational Codeforces Round 21 E. Selling Souvenirs(背包)
  3. html如何找寻vue文件,如何预览vue文件
  4. 【模板】一维树状数组
  5. 【汇编语言】镜像迁移能力之一通百通——由代码段和CS:IP的原理,掌握一类寄存器的使用
  6. 五阿哥钢铁电商资深运维工程师手把手教你这样玩企业组网
  7. Linux使用LVM逻辑卷 给分区扩容 不重启 热扩容
  8. oracle hang analyze,Oracle hanganalyze工具的使用
  9. python的sift算法_opencv python SIFT(尺度不变特征变换)
  10. js中使用HTML模板字符串
  11. 如何在html中在线编辑word文档,web版word在线编辑
  12. 东北旅行第一天流水账
  13. exe后门程序生成之Quasar
  14. oracle中文转换为unicode,Oracle数据库字符集转换成Unicode产品开发
  15. plc云网关与串口服务器区别,plc智能网关和传统工业路由器有什么区别
  16. Python 追加 Excel 数据
  17. Linux 系统结构详解
  18. 【Linux】用最形象的例子学习进程,从入门到深入
  19. 教你小小JAVA爬虫爬到HDU首页(只为学习)
  20. 第6天2021-08-13

热门文章

  1. roc曲线spss怎么做_SPSS在线_SPSSAU_SPSS_ROC曲线
  2. 桌面图标重复的解决办法
  3. 谷歌浏览器无法安装扩展程序 – chrome无法添加crx插件的解决方法(亲测,绝对可行)
  4. input框灰色提示字,输入时提示字消失
  5. WEB缓存技术之阿堂教程:聊聊memcached分布式缓存技术--好文转载
  6. docker创建一个阿里云镜像仓库
  7. nginx配合前端实现网站分流 ABtest
  8. 京东到家公布”夏日大促成绩:平台销售额同比去年增长135%
  9. React框架发展史
  10. POI处理PPT的表格table,XSLFTable样式设置