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 UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
js函数和this用法实例分析
Mar 13 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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
Syphon 秘笈
2021/03/03 冲泡冲煮
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
IE无法设置短域名下Cookie
2010/09/23 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python与mysql数据库交互的实现
2020/01/06 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
优良学风班申请材料
2014/02/13 职场文书
大学生标准自荐书
2014/06/15 职场文书
小学体育组工作总结
2015/08/13 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
php png失真的原因及解决办法
2021/10/24 PHP