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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
javascript继承机制实例详解
Nov 20 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
Bootstrap表单布局
Jul 19 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
在vue中使用防抖函数组件操作
Jul 26 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设置页面超时时间解决方法
2015/09/22 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现关闭第三方窗口的方法
2019/06/28 Python
python多进程间通信代码实例
2019/09/30 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
少年闰土教学反思
2014/02/22 职场文书
设计专业自荐信
2014/06/19 职场文书
校园安全广播稿范文
2014/09/25 职场文书
自我检讨书怎么写
2015/05/07 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
归途列车观后感
2015/06/17 职场文书
话题作文之自信作文
2019/11/15 职场文书