JSON.stringify 语法实例讲解


Posted in Javascript onMarch 14, 2012

认识javascript也不短的时间了,可是这个用法说实在的,我还是第一次见过,惭愧啊惭愧啊。于是乎,在网上找了写资料,写了些例子 希望能给园子们一些帮助。

作用:这个函数的作用主要是为了系列化对象的。

可能有些人对系列化这个词过敏,我的理解很简单。就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的)。就这么简单。打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的。很简单吧。
接着看。

语法:
JSON.stringify(value [, replacer] [, space])
value:是必须要的字段。就是你输入的对象,比如数组啊,类啊等等。
replacer:这个是可选的。它又分为2种方式,一种是方法,第二种是数组。
情况一:我们先说数据,通过我们后面的实验可以知道,它是和第一个有关系的。一般来说,我们系列化后的结果是通过键值对来进行表示的。
比如说:
name:"lan",age:25
这种形式。
所以,如果这种形式的话,如果第二个的值在第一个存在,那么的话就以第二个的值做key,第一个值为value进行表示,如果不存在,sorry,忽略。【是不是有点抽象,我也这么觉得,不过你等一下看实验 就OK了。。呼呼。】
情况二:如果是方法,那很简单,就是说把系列化后的每一个对象(记住 是每一个)传进方法里面进行处理。
space:很好理解,用什么来做分隔符的。
1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来
2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10.
3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。
4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。

开始用实例说明;

1.只有一个参数的情况下:

var obj={
 webName:"三水点靠木",
 url:"3water.com",
 age:"2"
}
var str=JSON.stringify(obj)
console.log(str);

上面的代码实现了转换功能,这里采用的是JSON.stringify(),这是ECMAScript5新增的方法。

存在一定的浏览器兼容性问题,具体如下:
(1).IE8和IE8以上浏览器支持此方法。
(2).谷歌浏览器支持此方法。
(3).火狐浏览器支持此方法。
(4).opera浏览器支持此方法。
(5).Safria浏览器支持此方法。

var student = new Object(); 
student.name = "Lanny"; 
student.age = "25"; 
student.location = "China"; 
var json = JSON.stringify(student); 
alert(student);

结果如下:
JSON.stringify 语法实例讲解

有些人可能会怀疑JSON.stringify的作用,OK。那假如,我们不要这个函数。代码下面的样子:

var student = new Object(); 
student.name = "Lanny"; 
student.age = "25"; 
student.location = "China"; 

// var json = JSON.stringify(student); 
alert(student);

 恭喜你 得到的结果是:

JSON.stringify 语法实例讲解

没骗你吧,继续。
2.第二个参数存在,并且第二个参数还是function的时候

var students = new Array() ; 
students[0] = "Lanny"; 
students[1] = "dong"; 
students[2] = "I love you"; 
var json = JSON.stringify(students,switchUpper); 
function switchUpper(key, value) { 
return value.toString().toUpperCase(); 
} 
alert(json); 




//var json = JSON.stringify(students, function (key,value) { 





//return value.toString().toUpperCase(); 




 //});

上面的方法也可以换成下面的,2个都是一样,只是写法有那么一点点的不一样而已。
 得到结果如下:
JSON.stringify 语法实例讲解

3.第二个参数存在,并且第二个参数不是function,而是数组的时候。
3.1 【误区】如果第一个参数是数组,第二个参数也是数组的话,只显示第一个参数的值。
比如:

var students = new Array() ; 
students[0] = "Lanny"; 
students[1] = "dong"; 
students[2] = "I love you"; 
var stu = new Array(); 
stu[0] = "1"; 
stu[1] = "2"; 
var json = JSON.stringify(students,stu); 
alert(json);

sorry 得到的结果就是:
JSON.stringify 语法实例讲解
第二个被忽略了,只是第一个被系列化了。

3.2 如果第一个是对象(这里说的对象就像在C#里面可以进行new的),第二个是数组的。

那么如果第二个的value在第一个存在,那么的话就以第二个的值做key,第一个值为value进行表示

var student = new Object(); 
student.qq = "5485891512"; 
student.name = "Lanny"; 
student.age = 25; 

var stu = new Array(); 
stu[0] = "qq"; 
stu[1] = "age"; 
stu[2] = "Hi";//这个student对象里不存在。 

var json = JSON.stringify(student,stu); 
alert(json);

得到的结果如下:
JSON.stringify 语法实例讲解
因为stu[2] = "Hi";这个Hi 在第一个找不到,所以就不进行显示了。

4.第三个参数

4.1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来

比如:

var student = new Object(); 
student.qq = "5485891512"; 
student.name = "Lanny"; 
student.age = 25; 

var stu = new Array(); 
stu[0] = "qq"; 
stu[1] = "age"; 
stu[2] = "Hi"; 

var json = JSON.stringify(student,stu); 
alert(json);

 输出的就是:
JSON.stringify 语法实例讲解
4.2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10.

var student = new Object(); 
student.qq = "5485891512"; 
student.name = "Lanny"; 
student.age = 25; 

var stu = new Array(); 
stu[0] = "qq"; 
stu[1] = "age"; 
stu[2] = "Hi"; 

var json = JSON.stringify(student,stu,100);//注意这里的100 
alert(json);

那么得到的是:
JSON.stringify 语法实例讲解
空开来了10个字符。

4.3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。

也是一样。

4.4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。

如果是var json = JSON.stringify(student,stu,“HaiKou”);//

JSON.stringify 语法实例讲解

就这样吧 。good night。

Javascript 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
微信小程序组件传值图示过程详解
Jul 31 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 #Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 #Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 #Javascript
10款非常有用的 Ajax 插件分享
Mar 14 #Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 #Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 #Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 #Javascript
You might like
PHP print类函数使用总结
2010/06/25 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python使用mysql数据库示例代码
2017/05/21 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python3个性签名设计实现代码
2018/06/19 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
2015年秋季新学期寄语
2015/03/25 职场文书
在校生证明
2015/06/17 职场文书
安全教育主题班会教案
2015/08/12 职场文书
担保书范文
2019/07/09 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
MySQL 字符集 character
2022/05/04 MySQL