原生js实现JSON.parse()和JSON.stringify()

- 首先JSON.stringify()是将js对象转换为JSON形式

实现思路:

通过递归调用,来实现对转换对象Object的深层value进行遍历,利用array的join实现最终字符串拼接

function myJsonStringify(obj) {
        let type = typeof obj;
        if (type !== "object" || type === null) {
            if (/string|undefined|function/.test(type)) {
                obj = ‘"‘ + obj + ‘"‘;
            }
            return String(obj);
        } else {
            let json = [],
                arr = (obj && obj.constructor === Array);

            for (let k in obj) {
                let v = obj[k];
                let type = typeof v;

                if (/string|undefined|function/.test(type)) {
                    v = ‘"‘ + v + ‘"‘;
                } else if (type === "object") {
                    v = myJsonStringify(v);
                }

                json.push((arr ? "" : ‘"‘ + k + ‘":‘) + String(v));
            }
            return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")
        }
    }

一个较为完整版的实现:

(function(NS){
var simpleTypes=["number","boolean","undefined","string","function"]
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){
                if(itemType!="undefined"){
                    resArr.push(parseSimpleObject(object[i]));
                }
                else{
                    resArr.push(‘null‘)
                }
            }
            else{
                resArr.push(stringify(object[i]))
            }
        }
        return "["+resArr.join(",")+ "]"
    }
    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){
                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
}
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)<Oxff){
                encodeRes+=res[i]
            }
            else{
                encodeRes+="\\u"+res.charCodeAt(i).toString(16);
            }
        }
        res=encodeRes
    }
    return res;
}
})(window);

JSON.parse()是将JSON对象转换为js对象

实现方式:(2种)

eval()

var json=‘{"a":"1","b":2}‘
 var obj=eval("("+json+")");

直接调用eval,会产生xss漏洞。

利用new Function()

第一种eval的方法,相当于无脑把JSON字符串塞进去,eval和Function都有着动态编译js代码的作用

var func=new Function(arg1,arg2,...,functionBody)
var jsonStr=‘{"age":20,"name":"jack"}‘
var json=(new Function(‘return‘+jsonStr))()

原文地址:https://www.cnblogs.com/yuan233/p/10986714.html

时间: 2024-08-03 08:14:44

原生js实现JSON.parse()和JSON.stringify()的相关文章

浅谈JSON.parse()、JSON.stringify()和eval()的作用

相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: “JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率).” 今天在这里笔者想简单谈谈jquery里面的JSON.parse()和JSON.stringify()函数,顺便

JSON.parse()、JSON.stringify()和eval()的作用

相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: “JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率).” 今天在这里笔者想简单谈谈jquery里面的JSON.parse()和JSON.stringify()函数,顺便

JSON.parse() 和 JSON.stringify()的简单介绍

参考地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 最近一段时间在测试前端页面的时候, 需要对后台数据进行处理, 后台返回的数据基本都是json格式, 这里就要用到

JSON.parse()和JSON.stringify()方法学习

JSON.parse()和JSON.stringify()方法学习 JSON对象中有两个非常好用的方法 JSON.parse接受json字符串转化为JS对象 JSON.stringify接收一个JS对象转化为json字符串 JSON对象与普通对象的区别是JSON对象键值对都必须用双引号 例如: const my={ name:"dylan", age:"18" } let myObj=JSON.stringify(my) console.log(myObj)//&q

JSON.parse()和JSON.stringify() 用法

parse 从字符串解析出json对象: var data = '{"a":1,"b":2}'; JSON.parse(data); 返回Object a:1 b:2 _proto_:Object stringify从json对象解析出字符串: var data = {a:1,b:2} JSON.stringify(data) 返回: '{"a":"1","b":"2"}' JSON.p

JSON.parse和JSON.stringify 参数详解

JSON.parse和JSON.stringify这两个浏览器自带(IE6/7除外)的方法平常我们经常用到,但是一般都只是用到了他们的第一个参数,比如字符串转对象:JSON.parse('{}')   对象转字符串:JSON.stringify({}) 今天特意看了下这两个方法的定义,第二个可选参数也是非常有用. 1. JSON.parse(text[, reviver]) text :     要被解析成JSON对象的字符串 reviver : 如果是一个函数,则规定了原始值如何被解析改造,在

有关javascript中的JSON.parse和JSON.stringify的使用一二

有没有想过,当我们的大后台只是扮演一个数据库的角色,json在前后台的数据交换中扮演极其重要的角色时,作为依托node的前端开发,其实相当多的时间都是在处理数据,准确地说就是在处理逻辑和数据(这周实习最大的收获). 而对于依托json格式传输的数据,处理数据时,用到JSON.strinify和JSON.parse的概率是百分之百.使用这两个方法so easy,但是你真的知道其中一些相关的细节以及其中牵涉到的javascript的知识么? JSON.parse用于从一个字符串中解析出json对象.

J-Query开发锦集(0):JSON.parse()和JSON.stringify()区别

项目中我们经常会使用JSON字符串转换,而且很频繁.所以总结如下,很简单的代码. 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JSON.parse()和JSON.stringify()区别</title> 6 <script type="text/javascrip

JSON.parse与JSON.stringify

JSON:JavaScript Object Notation(JavaScript对象表示法):甚至我们就可以大致认为JSON就是Javascript的对象,只不过范围小上一些. JSON的MIME类型是"application/json" JSON.parse(text[,reviver]) []中的表示可选内容,reviver是一个函数,对象中每个成员都调用这个函数 JSON.parse()将JSON格式的字符串解析成JavaScript对象 1 var a='{"na

JSON.parse()与JSON.stringify()高级用法

JSON.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法,它们还有一些参数可以让我们在实际应用中更加方便,现在介绍一下它们的高级用法 JSON.parse() JSON.parse(jsonString, (key, value) => {}) 可以接受两个参数,第一个就是我们已经熟悉的json字符串,第二个是一个回调函数,我们可以对返回的每一个value做处理,然后返回对应的value const testJSON = { name: 'test', val