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 instanceof 与typeof使用说明
Jan 11 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
ant design 日期格式化的实现
Oct 27 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
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
wxPython使用系统剪切板的方法
2015/06/16 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python 生成器协程运算实例
2017/09/04 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python实现事件驱动
2018/11/21 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python自动点赞功能的实现思路
2020/02/26 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
技术经理的自我评价范文
2013/12/03 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书