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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
js querySelector() 使用方法
Dec 21 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
Vue常用API、高级API的相关总结
Feb 02 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
原生JS轮播图插件
2017/02/09 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python模拟实现斗地主发牌
2020/01/07 Python
python 项目目录结构设置
2020/02/14 Python
Python 如何查找特定类型文件
2020/08/17 Python
十八大报告观后感
2014/01/28 职场文书
关于运动会的稿件
2014/02/02 职场文书
住房租房协议书
2014/08/20 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫