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 - HTML的request类
Jan 09 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
js自制图片放大镜功能
Jan 24 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
使用async await 封装 axios的方法
Jul 09 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
JavaScript鼠标悬停事件用法解析
May 15 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
Python wordcloud库安装方法总结
2020/12/31 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
2014年小学植树节活动方案
2014/03/02 职场文书
单位单身证明样本
2014/10/11 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
php png失真的原因及解决办法
2021/11/17 PHP