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 相关文章推荐
javascript string字符串优化问题
Jul 31 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
微信小程序开发探究
Dec 27 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
Zerg基本策略
2020/03/14 星际争霸
PHP简洁函数小结
2011/08/12 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
Python中有趣在__call__函数
2015/06/21 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
微笑服务标语
2014/06/24 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
学生病假条怎么写
2015/08/17 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python