JS实现JSON.stringify的实例代码讲解

JS实现JSON.stringify的实例代码讲解

JSON.stringify()方法可以将JavaScript对象转化为JSON字符串，常用于前后端传输数据、本地存储等场景。但是，部分低版本浏览器不支持该方法，那么我们怎么实现一个类似的方法呢？

接下来，我们将结合示例，讲解如何用JavaScript实现一个简单的JSON.stringify()方法。

实现步骤

1.创建一个函数，命名为"stringify"

function stringify(obj){
   //code here...
}

2.判断数据类型

JSON.stringify()方法需要支持多种数据类型，比如number、string、boolean、null、undefined、array、object等。那么我们的实现方法也应该支持这些数据类型。接下来，我们将判断数据类型实现为一个函数，命名为"judgeType"：

function judgeType(data){
    var type = typeof data;
    if(type !== "object"){
        return String(data);
    }else{
        var data_type = Object.prototype.toString.call(data).replace(/^\[object (.*)\]$/,"$1").toLowerCase();
        return data_type;
    }
}

该函数的主要作用是判断数据类型，并返回类型对应的字符串。如果是简单类型（number、string、boolean、null、undefined），直接将其转化为字符串并返回；如果是复杂类型（array、object），则返回其类型的字符串。

3.处理简单类型

先来处理简单类型：number、string、boolean、null和undefined。对于这些类型的数据，我们可以通过模板字符串直接生成JSON字符串：

function dealSimple(data){
    return String(data);
}

4.处理数组

接下来，我们来处理数组类型的数据。对于数组类型，我们需要遍历数组中的每一个元素，并将其依次转化为JSON字符串，最终将所有元素的JSON字符串拼接到一起，生成完整的JSON字符串：

function dealArray(data){
    var result = "";
    for(var i=0,len=data.length; i<len; i++){
        result += (i===0 ? "" : ",") + stringify(data[i]);
    }
    result = "[" + result + "]";
    return result;
}

在这个函数中，我们先定义了一个空字符串result，然后遍历数组中的每一个元素，将其调用stringify()方法递归地转化为JSON字符串，最后将所有元素的JSON字符串拼接成一个字符串，并在字符串两边加上中括号，形成完整的JSON字符串。

5.处理对象

最后我们来处理对象类型的数据。对于对象类型，我们需要遍历对象中的每一个属性，将属性名和属性值依次转化为JSON字符串，最终将所有属性的JSON字符串拼接到一起，生成完整的JSON字符串：

function dealObject(data){
    var result = "";
    var flag = false;
    for(var key in data){
        if(data.hasOwnProperty(key)){
            var value = data[key];
            var value_str = stringify(value);
            if(value_str !== "undefined"){
                result += (flag ? "," : "") + '"' + key + '":' + value_str;
                flag = true;
            }
        }
    }
    result = "{" + result + "}";
    return result;
}

在这个函数中，我们遍历了对象中的每一个属性，对于存在的属性，将其属性名和属性值调用stringify()方法递归地转化为JSON字符串，并拼接到result字符串中，最终将所有属性的JSON字符串拼接成一个字符串，并在字符串两边加上大括号，形成完整的JSON字符串。

6.完整代码

function stringify(obj){
    function judgeType(data){
        var type = typeof data;
        if(type !== "object"){
            return String(data);
        }else{
            var data_type = Object.prototype.toString.call(data).replace(/^\[object (.*)\]$/,"$1").toLowerCase();
            return data_type;
        }
    }
    function dealSimple(data){
        return String(data);
    }
    function dealArray(data){
        var result = "";
        for(var i=0,len=data.length; i<len; i++){
            result += (i===0 ? "" : ",") + stringify(data[i]);
        }
        result = "[" + result + "]";
        return result;
    }
    function dealObject(data){
        var result = "";
        var flag = false;
        for(var key in data){
            if(data.hasOwnProperty(key)){
                var value = data[key];
                var value_str = stringify(value);
                if(value_str !== "undefined"){
                    result += (flag ? "," : "") + '"' + key + '":' + value_str;
                    flag = true;
                }
            }
        }
        result = "{" + result + "}";
        return result;
    }
    var type = judgeType(obj);
    var result = "";

    switch(type){
        case "number":
        case "boolean":
        case "null":
        case "undefined":
            result += dealSimple(obj);
            break;
        case "string":
            result += '"' + obj + '"';
            break;
        case "array":
            result += dealArray(obj);
            break;
        case "object":
            result += dealObject(obj);
            break;
        default:
            break;
    }

    return result;
}

示例1：简单类型转化

var data = 666;
var result = stringify(data);
console.log(result);   //"666"

示例2：对象转化

var data = {
    name: "David",
    age: 22,
    gender: "male",
    score: {
        math: 99,
        chinese: 98,
        english: 97
    }
};
var result = stringify(data);
console.log(result);   //{"name":"David","age":"22","gender":"male","score":{"math":"99","chinese":"98","english":"97"}}

经过以上操作后，我们成功模拟了JSON.stringify()方法的实现过程，达到了将JavaScript对象转化为JSON字符串的目的。