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 While 循环基础教程
Apr 05 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
优化javascript的执行速度
2010/01/23 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python httplib模块使用实例
2015/04/11 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Django实现基于类的分页功能
2019/10/31 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
物业管理求职自荐信
2013/09/25 职场文书
大学生演讲稿
2014/04/25 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
公证书
2019/04/17 职场文书