JS实现JSON.stringify的实例代码讲解


Posted in Javascript onFebruary 07, 2017

 JSON.stringify是浏览器高版本带的一个将JS的Objtect对象转换为JSON字符串的一个方法,不过再IE6下面,并不存在JSON这一对象,因此,用到此方法时,需要写一套兼容性的代码。 JSON.stringify的一些规则以及注意点:当对象为数字,null,boolean的时候,直接转换为相应的字符串就可以了。 但是string,function,undefined,object,array等,需要特殊处理。

1.undefined,该类型使用JSON.stringify处理的时候,如果对象就是undefined,将会输出"undefined",如果对象是数组的元素,那么将会变成null,比如:[undefined],stringify之后变成了"[null]";如果该对象是object的元素,那么该属性将当作不存在,不输出,比如{a:1,b:undefined},stringify之后是"{\"a\":1},B属性直接抛弃。

2.字符串在拼接的时候需要把内部的双引号处理掉

代码如下

/** 
 * JSON stringify的实现 
 * @author norkts<norkts@gmail.com> 
 * @version 1.0 2015-11-24 15:11 实现了基本功能 
 * @version 1.1 2015-11-24 15:19 norkts 增加了JSON.stringify的兼用代码实现 
 * @version 1.2 2015-11-24 15:49 norkts 修改数组indexOf在IE下不兼容的写法,修改了undefined值的特殊处理 
 */ 
(function(NS){ 
 
 //简单类型 
 var simpleTypes = ["number", "boolean", "undefined", "string", "function"]; 
  
 //JSON.stringify的主函数 
 function stringify(object){ 
  var type = typeof object; 
   
  //如果是简单类型,则直接返回简单类型的结果 
  if(indexOf(simpleTypes, type) > -1){ 
   return parseSimpleObject(object); 
  } 
 
  //数组对象的 
  if(object instanceof Array){ 
   var len = object.length; 
   var resArr = []; 
   for(var i = 0; i < len; i++){ 
    var itemType = typeof object[i]; 
    if(indexOf(simpleTypes, itemType) > -1){ 
 
     //undefined特殊处理,数组中变成null 
     if(itemType != "undefined"){ 
      resArr.push(parseSimpleObject(object[i])); 
     }else{ 
      resArr.push("null"); 
     } 
      
    }else{ 
     //递归处理JS数组中的复杂元素 
     resArr.push(stringify(object[i])); 
    } 
   } 
    
   return "[" + resArr.join(",") + "]"; 
  } 
   
  //普通object对象 
  if(object instanceof Object){ 
   if(object == null){ 
    return "null"; 
   } 
    
   var resArr = []; 
    
   for(var name in object){ 
    var itemType = typeof object[name]; 
    if(indexOf(simpleTypes, itemType) > -1){ 
     //undefined特殊处理,object中不编码 
     if(itemType != "undefined"){ 
      resArr.push("\"" + name + "\":" + parseSimpleObject(object[name]));  
     } 
    }else{ 
     resArr.push("\"" + name + "\":" + stringify(object[name])); 
    } 
   } 
    
   return "{" + resArr.join(",") + "}"; 
  } 
 } 
  
 function parseSimpleObject(object){ 
  var type = typeof object; 
  if(type == "string" || type == "function"){ 
   return "\"" + object.toString().replace("\"", "\\\"") + "\""; 
  } 
   
  if(type == "number" || type == "boolean"){ 
   return object.toString(); 
  } 
   
  if(type == "undefined"){ 
   return "undefined"; 
  } 
   
  return "\"" + object.toString().replace("\"", "\\\"") + "\""; 
 } 
  
 function indexOf(arr, val){ 
  for(var i = 0; i < arr.length; i++){ 
   if(arr[i] === val){ 
    return i; 
   } 
  } 
   
  return -1; 
 } 
  
 /** 
  * 将stringify做二次封装 
  * @param object 要处理的对象 
  * 
  */ 
 NS.stringify = function(object, isEncodeZh){ 
  var res = stringify(object); 
  if(isEncodeZh){ 
   var encodeRes = ""; 
   for(var i = 0; i < res.length; i++){ 
    if(res.charCodeAt(i) < 0xff){ 
     encodeRes += res[i]; 
    }else{ 
     encodeRes += "\\u" + res.charCodeAt(i).toString(16); 
    } 
   } 
   res = encodeRes; 
  } 
   
  return res; 
 }; 
})(window);

以上所述是小编给大家介绍的JS实现JSON.stringify的实例代码讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
Bootstrap精简教程
Nov 27 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
iScroll.js 使用方法参考
May 16 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 #Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 #Javascript
纯js三维数组实现三级联动效果
Feb 07 #Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 #Javascript
bootstrap vue.js实现tab效果
Feb 07 #Javascript
Node连接mysql数据库方法介绍
Feb 07 #Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 #Javascript
You might like
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python变量和字符串详解
2017/04/29 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
python数据归一化及三种方法详解
2019/08/06 Python
logging level级别介绍
2020/02/21 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
如何在python中判断变量的类型
2020/07/29 Python
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
低碳环保倡议书
2014/04/14 职场文书
校庆口号
2014/06/20 职场文书
新学期红领巾广播稿
2014/10/04 职场文书