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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
OpenLayers3实现地图显示功能
Sep 25 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
一个查看session内容的函数
2006/10/09 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
封装html的select标签的js操作实例
2013/07/02 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
AngularJS内置指令
2015/02/04 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python装饰器实例大详解
2017/10/25 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python实现猜数字小游戏
2020/03/24 Python
用Python实现数据的透视表的方法
2018/11/16 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
毕业生就业自荐书
2013/12/15 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
优秀教师个人总结
2015/02/11 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
javascript函数式编程基础
2021/09/15 Javascript
python全面解析接口返回数据
2022/02/12 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle