10分钟学会js处理json的常用方法


Posted in Javascript onDecember 06, 2020

一、json定义

JSON ( JavaScript Object Notation) ,它是一串字符串 只不过元素会使用特定的符号标注。

  • {} 双括号表示对象
  • [] 中括号表示数组
  • "" 双引号内是属性或值
  • : 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

JSON 语法是 JavaScript 对象表示法语法的子集。
数据在名称/值对中、数据由逗号分隔、花括号保存对象、方括号保存数组

JSON 值可以是:数字(整数或浮点数)、字符串(在双引号中)、逻辑值(true 或 false)、数组(在方括号中)、对象(在花括号中)、null

所以 {"name": "Michael"} 可以理解为是一个包含name为Michael的对象

二、为什么用json

  1. JSON是纯文本格式,是独立于语言和平台的。
  2. 生成和解析相对于XML而言要简单。
  3. 读写的速度更快。

三、JS 内置两个Json方法

1、对象转化为字符串

任何把 JavaScript 变成 Json ,就是把这个对象序列化为Json字符串,然后才可以通过网络传递;

JSON.stringify( {} , [ ] , "")

//参数一 :要序列化的数据(object)
//参数二 :控制对象的键值,只想输出指定的属性,传入一个数组
//参数三 :序列化后,打印输出的格式(一个Tab ,可以更直观查看json)

例子:

10分钟学会js处理json的常用方法

2、字符串转换为对象

如果我们收到一个JSON格式的字符串,只需要把它反序列化成一个JavaScript对象,就可以在JavaScript中直接使用这个对象了

JSON.parse( json.DATA )

//传入json字符串

10分钟学会js处理json的常用方法

四、全局替换字符串

这里我们需要用JS实现replaceAll的功能, 将所有的 ' xa" ' 替换成 ' " ' .
代码如下,这里的gm是固定的,g表示global,m表示multiple,也可以使用正则表达式

10分钟学会js处理json的常用方法

五、遍历json对象和json数组

1、遍历JSON对象

代码如下:

var packJson = {"name":"Liza", "password":"123"} ;
for(var k in packJson ){//遍历packJson 对象的每个key/value对,k为key
alert(k + " " + packJson[k]);
}

10分钟学会js处理json的常用方法

10分钟学会js处理json的常用方法

2、遍历JSON数组

代码如下:

var packJson = [{"name":"Liza", "password":"123"}, {"name":"Mike", "password":"456"}];
for(var i in packJson){//遍历packJson 数组时,i为索引
alert(packJson[i].name + " " + packJson[i].password);
}

10分钟学会js处理json的常用方法

10分钟学会js处理json的常用方法

附录

学习本就是一个不断模仿、练习、再到最后面自己原创的过程。

虽然可能从来不能写出超越网上通类型同主题博文,但为什么还是要写?
于自己而言,博文主要是自己总结。假设自己有观众,毕竟讲是最好的学(见下图)。

于读者而言,笔者能在这个过程get到知识点,那就是双赢了。
当然由于笔者能力有限,或许文中存在描述不正确,欢迎指正、补充!
感谢您的阅读。如果本文对您有用,那么请点赞鼓励。

10分钟学会js处理json的常用方法

到此这篇关于10分钟学会js处理json的常用方法的文章就介绍到这了,更多相关js处理json方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
JavaScript中的几种继承方法示例
Dec 06 #Javascript
js调用网络摄像头的方法
Dec 05 #Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 #Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
js获取图片的base64编码并压缩
Dec 05 #Javascript
You might like
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
smarty内置函数section的用法
2015/01/22 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
js实现表格数据搜索
2020/08/09 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python实现仿射密码的思路详解
2020/04/23 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
青年创业培训欢迎词
2014/01/10 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
煤矿安全生产标语
2014/06/06 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript