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 相关文章推荐
基于jQuery的图片剪切插件
Aug 03 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
js实现消息滚动效果
Jan 18 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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入门的学习方法
2007/01/02 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
Python中的ceil()方法使用教程
2015/05/14 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python处理excel绘制雷达图
2019/10/18 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
七一表彰活动方案
2014/01/18 职场文书
社区母亲节活动记录
2014/03/06 职场文书
文明村镇申报材料
2014/05/06 职场文书
国旗下演讲稿
2014/05/08 职场文书
家长建议怎么写
2014/05/15 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js
html中两种获取标签内的值的方法
2022/06/16 jQuery