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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 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答题类应用接口实例
2015/02/09 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaScript事件 "事件对象"的注意要点
2016/01/14 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
中学教师管理制度
2014/01/14 职场文书
高中体育教学反思
2014/01/29 职场文书
服装采购员岗位职责
2014/03/15 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
学校欢迎标语
2014/06/18 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
python批量创建变量并赋值操作
2021/06/03 Python