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 相关文章推荐
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
webpack入门必知必会
Jan 16 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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实现快速排序法函数代码
2012/08/27 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
js如何打印object对象
2015/10/16 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
微信小程序支付及退款流程详解
2017/11/30 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
浅谈python内置变量-reversed(seq)
2017/06/21 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python运行DLL文件的方法
2020/01/17 Python
Python configparser模块常用方法解析
2020/05/22 Python
python定义具名元组实例操作
2021/02/28 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
《神奇的克隆》教学反思
2014/04/10 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2014年班干部工作总结
2014/11/25 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
golang slice元素去重操作
2021/04/30 Golang
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript