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 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
JavaScript实现复选框全选功能
Apr 11 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
PHP漏洞全解(详细介绍)
2012/11/13 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PDO::rollBack讲解
2019/01/29 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
深入解析ES6中的promise
2018/11/08 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
详解python之配置日志的几种方式
2017/05/22 Python
django实现前后台交互实例
2017/08/07 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
详解python with 上下文管理器
2020/09/02 Python
标准毕业生自荐信范文
2013/11/04 职场文书
法人代表授权委托书
2014/04/08 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis