简易版本JSON.stringify的实现及其六大特性详解

目录
  • 前言
  • JSON.stringify六大特性
    • 特性一
    • 特性二
    • 特性三
    • 特性四
    • 特性五
    • 特性六
  • 手动实现stringify
  • 总结

前言

JSON.stringify是一个使用非常高频的API,但是其却存在一个特性,我们在使用的过程中需要留意这些特性以避免为代码程序埋雷,那么接下来便一起动手实现一个简易版本的jsonStringify函数

JSON.stringify六大特性

特性一

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值

现在有这么一个对象:

const obj = {
    bol: new Boolean(true),
    num: new Number(1),
    str: new String(1)
}

利用typeof检测obj各个属性的数据类型

typeof obj.bol; // object
typeof obj.num; // object
typeof obj.str; // object

将其序列化stringify之后

JSON.stringify(obj); // {"bol":true,"num":1,"str":"1"}

此时再将其解析parse进行各个属性的数据类型

const stringifyObj = JSON.parse(JSON.stringify(obj));
typeof stringifyObj.bol; // boolean
typeof stringifyObj.num; // number
typeof stringifyObj.str; // string

特性二

NaN、Infinity、-Infinity以及null在序列化stringify时都会被当作null

const obj = {
    nan: NaN,
    infinity: Infinity,
    null: null,
};

JSON.stringify(obj); // {"nan":null,"infinity":null,"null":null}

特性三

对象在序列化的时候,若是其存在toJSON函数,这个函数返回的值就是整个对象序列化后的结果

const obj = {
    nan: NaN,
    infinity: Infinity,
    null: null,
    toJSON() {
        return "拥有toJSON函数";
    },
};

JSON.stringify(obj); // "拥有toJSON函数"

可以看到序列化之后的数据仅存在toJSON函数的返回值,其余数据全部忽略

⚠️:Date数据会被正常序列化,因为Date上部署了toJSON函数,可以通过控制台打印Date.prototype.toJSON得知

const obj = {
    date: new Date(),
};

JSON.stringify(obj); // {"date":"2021-10-08T11:43:31.881Z"}

特性四

表现不一的undefined、function和symbol

作为对象键值对时:

作为值:

const obj = {
    undefined: undefined,
    fn() {},
    symbol: Symbol()
};

JSON.stringify(obj); // {}

作为键:

const fn = function () {};
const obj = {
    [undefined]: undefined,
    [fn]: function () {},
    [Symbol()]: Symbol()
};

JSON.stringify(obj); // {}

undefined、function和symbol作为对象的key和value时,会在序列化时将其忽略

⚠️:此时可能会改变对象原有的顺序,因为上述三种数据会在序列化时被忽略

作为数组值时:

const arr = [undefined, function fn() {}, Symbol()];

JSON.stringify(arr); // [null,null,null]

undefined、function和symbol作为数组的value时,会在序列化时将其都转换为null

单独存在时:

JSON.stringify(undefined); // undefined
JSON.stringify(function () {}); // undefined
JSON.stringify(Symbol()); // undefined

undefined、function和symbol单独存在时,会在序列化时都转换为undefined

特性五

序列化过程中,仅会序列化可枚举属性,不可枚举属性将会忽视

const obj = {
    name: "nordon",
    age: 18,
};

// 将age修改为不可枚举属性
Object.defineProperty(obj, "age", {
    enumerable: false,
});

JSON.stringify(obj); // {"name":"nordon"}

⚠️:此举也会改变对象的原有顺序

特性六

循环引用的对象,会在序列化时抛出异常

const obj = {
    name: "nordon",
    age: 18,
};

const p = {
    name: 'wy',
    obj
}

obj.p = p

JSON.stringify(obj);

此时会导致控制台抛出异常:

Uncaught TypeError: Converting circular structure to JSON     --> starting at object with constructor 'Object'     |     property 'p' -> object with constructor 'Object'     --- property 'obj' closes the circle     at JSON.stringify (<anonymous>)

手动实现stringify

明白了JSON.stringify的一些特性,接下来便可以依据这些特性动手实现一个kack版本

在动手实现之前,先利用柯里化封装一些数据类型校验的工具函数:

const currying = (fn, ...outParams) => {
    // 获取 fn 函数需要的参数个数
    const paramsLen = fn.length;

    return (...args) => {
        // 收集全部参数
        let params = [...outParams, ...args];
        // 若参数没有达到 fn 需要的参数,继续收集参数
        if (params.length < paramsLen) {
            return currying(fn, ...params);
        }

        return fn(...params);
    };
};

/**
 * type: 类型 - [object Array]、[object Number]等
 * source: 数据源
 */
const judgeType = (type, source) => {
    return Object.prototype.toString.call(source) === type;
};

const isUndefined = currying(judgeType, "[object Undefined]");
const isSymbol = currying(judgeType, "[object Symbol]");
const isFunction = currying(judgeType, "[object Function]");
const isObject = currying(judgeType, "[object Object]");
const isNull = currying(judgeType, "[object Null]");

下面直接上代码:

function jsonStringify(data) {
    let type = typeof data;

    if (isNull(data)) {
// null 直接返回 字符串'null'
        return "null";
    } else if (data.toJSON && typeof data.toJSON === "function") {
// 配置了 toJSON函数, 直接使用 toJSON 返回的数据且忽略其他数据
        return jsonStringify(data.toJSON());
    } else if (Array.isArray(data)) {
        let result = [];
        //如果是数组,那么数组里面的每一项类型又有可能是多样的
        data.forEach((item, index) => {
            if (isUndefined(item) || isSymbol(item) || isFunction(item)) {
                result[index] = "null";
            } else {
                result[index] = jsonStringify(item);
            }
        });

        result = "[" + result + "]";

        return result.replace(/'/g, '"');
    } else if (isObject(data)) {
        // 处理普通对象
        let result = [];
        Object.keys(data).forEach((item, index) => {
            if (typeof item !== "symbol") {
                //key 如果是 symbol 对象,忽略
                if (
                    data[item] !== undefined &&
                    typeof data[item] !== "function" &&
                    typeof data[item] !== "symbol"
                ) {
                    //键值如果是 undefined、function、symbol 为属性值,忽略
                    result.push(
                        '"' + item + '"' + ":" + jsonStringify(data[item])
                    );
                }
            }
        });

        return ("{" + result + "}").replace(/'/g, '"');
    } else if (type !== "object") {
        let result = data;

        //data 可能是基础数据类型的情况在这里处理
        if (Number.isNaN(data) || data === Infinity) {
            //NaN 和 Infinity 序列化返回 "null"
            result = "null";
        } else if (isUndefined(data) || isSymbol(data) || isFunction(data)) {
            // 由于 function 序列化返回 undefined,因此和 undefined、symbol 一起处理
            return undefined;
        } else if (type === "string") {
            result = '"' + data + '"';
        }

        return String(result);
    }
}

至此简易版本的JSON.stringify完成,虽然能力尚欠缺许多,主要是提供一个思路,核心注释已注释在代码中,可结合代码和上文的特性一起理解

总结

到此这篇关于JSON.stringify实现及其六大特性详解的文章就介绍到这了,更多相关简易版本JSON.stringify及特性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-10-10

JSON.stringify()方法讲解

JSON.stringify()方法是什么呢? 我们在向服务器发送数据时一般是字符串. 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串. 语法 JSON.stringify(value[, replacer[, space]]) 参数说明: value: 必需,一个有效的 JSON 对象. replacer: 可选.用于转换结果的函数或数组. 如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值.使

js JSON.stringify()基础详解

JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以选择性的替换值,或者如果指定了replacer是一个数组,可选择性的仅包含数组指定的属性. 语法 JSON.stringify(value[, replacer [, space]]) 参数 value 将要序列化成 一个JSON 字符串的值. replacer 可选 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函

你可能不知道的JSON.stringify()详解

前言 JSON已经逐渐替代XML被全世界的开发者广泛使用.本文深入讲解JavaScript中使用JSON.stringify的一些细节问题.首先简单回顾一下JSON和JavaScript: 不是所有的合法的JSON都是有效的JavaScript: JSON只是一个文本格式: JSON中的数字是十进制. 1. JSON.stringify let foo = { a: 2, b: function() {} }; JSON.stringify(foo); // "{ "a":

JSON.stringify 语法实例讲解

认识javascript也不短的时间了,可是这个用法说实在的,我还是第一次见过,惭愧啊惭愧啊.于是乎,在网上找了写资料,写了些例子 希望能给园子们一些帮助. 作用:这个函数的作用主要是为了系列化对象的. 可能有些人对系列化这个词过敏,我的理解很简单.就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的.很简单吧. 接着看. 语法: JSON.stringify(value [, repla

JSON.parse()和JSON.stringify()使用介绍

parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果: JSON.parse(str) Object age: "23" name: "huangxiaojian" __proto__: Object 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常. stringify(

打印json对象的内容及JSON.stringify函数应用

在调试的时候,经常需要知道json对象的内容,通过JSON.stringify函数,可以转换json对象为字符串. 复制代码 代码如下: $(document).ready(function() { $.ajax({ type: "post", dataType: "json", url: '/centermanage/modules/admin/index.php?task=getequipmentinfo', data: "&id="

详解JSON.stringify()的5个秘密特性

JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串. 作为一名 JavaScript 开发人员,JSON.stringify() 是用于调试的最常见函数.但是它的作用是什么呢,难道我们不能使用 console.log() 来做同样的事情吗?让我们试一试. //初始化一个 user 对象 const user = { "name" : "Prateek Singh", "age" : 26 }

实例详解JSON取值(key是中文或者数字)方式

JSON取值(key是中文或者数字)方式详解 先准备一个json对象用于演示 var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'}; 1.使用JS中with关键字 with(json) { console.log(name);//输出:zhangsan console.log(年龄);//输出:23 console.log(404);//输出:404,用这种方法读取key是数字的属性,有问题 } 2.最常见的传统的读取key console.

详解json string转换为java bean及实例代码

详解json string转换为java bean及实例代码 pom中添加如下两个库: <dependency> <groupId>org.codehaus.jackson </groupId> <artifactId>jackson-core-asl</artifactId> <version>1.9.2</version> <scope>provided</scope> </depende

实例详解JSON数据格式及json格式数据域字符串相互转换

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成. 基础结构 JSON建构于两种结构: 1. "名称/值"对的集合(A collection of name/value pairs).不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash t

详解JSON Web Token 入门教程

JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法. 一.跨域认证的问题 互联网服务离不开用户认证.一般流程是下面这样. 1.用户向服务器发送用户名和密码. 2.服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色.登录时间等等. 3.服务器向用户返回一个 session_id,写入用户的 Cookie. 4.用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器. 5.服务器收到 session

详解JSON和JSONP劫持以及解决方法

json劫持 json劫持攻击又为"JSON Hijacking",攻击过程有点类似于csrf,只不过csrf只管发送http请求,但是json-hijack的目的是获取敏感数据. 一些web应用会把一些敏感数据以json的形式返回到前端,如果仅仅通过cookie来判断请求是否合法,那么就可以利用类似csrf的手段,向目标服务器发送请求,以获得敏感数据. 比如下面的链接在已登录的情况下会返回json格式的用户信息: http://www.test.com/userinfo 攻击者可以在

详解json串反转义(消除反斜杠)

JSon串在被串行化后保存在文件中,读取字符串时,是不能直接拿来用JSON.parse()解析为JSON  对象的.因为它是一个字符串,不是一个合法的JSON对象格式.例如下面的JSON串保存在文件中,读出来不能直接解析: "{\"resourceId\":\"dfead70e4ec5c11e43514000ced0cdcaf\",\"properties\":{\"process_id\":\"proce

详解json在php中的应用

从5.2版本开始,PHP原生提供json_encode()和json_decode()函数,前者用于编码,后者用于解码. 一.json_encode() 该函数主要用来将数组和对象,转换为json格式.先看一个数组转换的例子: $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_encode($arr); 结果为:{"a":1,"b":2,"c":

详解Android Studio 3.0的新特性与适配

简介 Android Studio升级到3.0后,有不少的改动和新特性,先贴出官方的迁移说明. 本文会持续收集与总结本人在使用Android Studio 3.0进行开发的过程中所遇到的问题. 版本配置 Gradle版本 Android Studio 3.0需要的Gradle版本至少为4.1. 如果是使用gradle wrapper,则工程根目录/gradle/wrapper/gradle-wrapper.properties中的distributionUrl字段为https\://servic

java与JSON数据的转换实例详解

java与JSON数据的转换实例详解 JSON与JAVA数据的转换(JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互.) 代码中有这么一句,是后台的封装数据. JSONObject jo = JSONObject.fromObject(map); 常见的java代码转换成json --请注意,这个方法曾经给我造成过困惑.因为,它在对Object转换的时候是按照domain类中的所有getXXX()方

Java中JSON处理工具类使用详解

本文实例为大家分享了JSON处理工具类的具体代码,供大家参考,具体内容如下 import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.seri