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 相关文章推荐
超级退弹代码
Jul 07 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
vue插件实现v-model功能
Sep 10 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
详解Python中的__init__和__new__
2014/03/12 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
夜大自我鉴定
2013/10/31 职场文书
义诊活动通知
2015/04/24 职场文书
反腐倡廉观后感
2015/06/08 职场文书
赢在执行观后感
2015/06/16 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏