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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
详解小程序缓存插件(mrc)
Aug 17 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
微信小程序实现图片上传
May 23 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
Vue如何循环提取对象数组中的值
Nov 18 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
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用python实现BLAST
2018/02/12 Python
python获取txt文件词向量过程详解
2019/07/05 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
物业电工岗位职责
2013/11/20 职场文书
集体婚礼策划方案
2014/02/22 职场文书
自荐信的格式
2014/03/10 职场文书
节约能源标语
2014/06/17 职场文书
绘画专业自荐信
2014/07/04 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
优秀班组申报材料
2014/12/25 职场文书