json对象转字符串如何实现


Posted in Javascript onDecember 02, 2012

背景:大部分浏览器已经实现了json对象转字符串的原生api支持,那在较低版本浏览器浏览器——如大家最喜爱的IE6——里如何实现呢?
首先运行以下方法,测试各种情况下,JSON.stringify的输出,这有助于下文代码的实现以及测试。用例不一定完整,欢迎补充

function test_toStringify(){ 

var result = { 

"JSON.stringify(undefined)": JSON.stringify(undefined), 

"JSON.stringify(null)": JSON.stringify(null), 

"JSON.stringify(123)": JSON.stringify(123), 

"JSON.stringify(true)": JSON.stringify(true), 

"JSON.stringify('')": JSON.stringify(''), 

"JSON.stringify('abc')": JSON.stringify('abc'), 

"JSON.stringify(null)": JSON.stringify(null), 

"JSON.stringify([1,2,3])": JSON.stringify([1,2,3]), 

"JSON.stringify([undefined, undefined])": JSON.stringify([undefined, undefined]), 

"JSON.stringify({name:'chyingp', age:24, u:undefined})": JSON.stringify({name:'chyingp', age:24, u:undefined}) 

}; 

var str = ''; 

for(var key in result){ 

if(typeof result[key] === 'string'){ 

str += key + " : '" + result[key] + "'\n"; 

}else{ 

str += key + " : " + result[key] + "\n"; 

} 

} 

console.log(str); 

} 

test_toStringify();

输出结果如下:
JSON.stringify(undefined) : undefined 

JSON.stringify(null) : 'null' 

JSON.stringify(123) : '123' 

JSON.stringify(true) : 'true' 

JSON.stringify('') : '""' 

JSON.stringify('abc') : '"abc"' 

JSON.stringify([1,2,3]) : '[1,2,3]' 

JSON.stringify([undefined, undefined]) : '[null,null]' 

JSON.stringify({name:'chyingp', age:24, u:undefined}) : '{"name":"chyingp","age":24}'

下面是json对象转字符串的代码实现:
function is_number(obj){ return Object.prototype.toString.call(obj)==='[object Number]'; } 

function is_boolean(obj){ return Object.prototype.toString.call(obj)==='[object Boolean]'; } 

function is_string(obj){ return Object.prototype.toString.call(obj)==='[object String]'; } 

function is_null(obj){ return Object.prototype.toString.call(obj)==='[object Null]'; } 

function is_undefined(obj){ return Object.prototype.toString.call(obj)==='[object Undefined]'; } 

function is_object(obj){ return Object.prototype.toString.call(obj)==='[object Object]'; } 

function is_array(obj){ return Object.prototype.toString.call(obj)==='[object Array]'; } 

function is_function(obj){ return Object.prototype.toString.call(obj)==='[object Function]'; } 

function quote(str){ return '"' + str + '"'; } 

var basic_map = { 

'[object Undefined]': true, 

'[object Number]': true, 

'[object Null]': true, 

'[object Boolean]': true 

} 

function basic_type(obj){ return basic_map[ Object.prototype.toString.call(obj) ]; } 

JSON = window.JSON || {}; 

//其实就是JSON.stringify 

JSON.toStr = function(obj){ 

if(is_string(obj) || is_null(obj) || is_number(obj) || is_boolean(obj)) return quote(obj); 

if(is_undefined(obj)) return obj; 

if(is_array(obj)){ 

var left = "[", 

middle = [], 

right = "]", 

value; 

var callee = arguments.callee; 

for(var i=0,len=obj.length; i<len; i++){ 

var value = obj[i]; 

if( typeof value === 'undefined' ){ 

middle.push(null+''); 

}else{ 

if( basic_type(value) ){ 

middle.push( value ) 

}else{ 

middle.push( callee(obj[i]) ) 

} 

} 

} 

return left+ middle.join(",") +right; 

} 

if(is_object(obj)){ 

var left = "{", 

middle = [], 

right = "}", 

value ; 

var callee = arguments.callee; 

for(var key in obj){ 

var value = obj[key]; 

if(typeof obj[key] === 'undefined') continue; 

if( basic_type(value) ){ 

middle.push( quote(key) + ':'+ value ); 

}else{ 

middle.push( quote(key) + ':'+ callee(value) ); 

} 

} 

return left + middle.join(', ') + right; 

} 

}; 

!JSON.stringify && (JSON.stringify = JSON.toStr);

以上代码仅为练手用,如有冗余及效率问题敬请见谅。如有错误则请帮忙指出 :)
Javascript 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
js实现加载更多功能实例
Oct 27 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
javascript 构造函数强制调用经验总结
Dec 02 #Javascript
js精度溢出解决方案
Dec 02 #Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 #Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 #Javascript
javascript控制swfObject应用介绍
Nov 29 #Javascript
javascript 保存文件到本地实现方法
Nov 29 #Javascript
jquery连缀语法如何实现
Nov 29 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
九种原生js动画效果
2015/11/11 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
Vue.js实现备忘录功能
2019/06/26 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
Django中url的反向查询的方法
2018/03/14 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
在python中做正态性检验示例
2019/12/09 Python
会计自我鉴定
2013/11/02 职场文书
生日寿宴答谢词
2014/01/19 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
大连导游词
2015/02/12 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL