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数据缓存用法分析
Feb 20 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
讲解Python中的递归函数
2015/04/27 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
pytorch 修改预训练model实例
2020/01/18 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
python实现代码审查自动回复消息
2021/02/01 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
大型会议接待方案
2014/03/01 职场文书
班训口号大全
2014/06/18 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
换届选举主持词
2015/07/03 职场文书
企业宣传稿范文
2015/07/23 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
2015中秋祝酒词
2015/08/12 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
分享python函数常见关键字
2022/04/26 Python