欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡易版本JSON.stringify的實現及其六大特性詳解

 更新時間：2021年10月12日 09:11:28   作者：Nordon  
最近做項目發(fā)現JSON.stringify()使用場景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對象轉換為JSON字符串,下面這篇文章主要給大家介紹了JSON.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"}

⚠️：此舉也會改變對象的原有順序

特性六

循環(huán)引用的對象，會在序列化時拋出異常

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 需要的參數，繼續(xù)收集參數
        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及特性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • javascript實現禁止復制網頁內容

    javascript實現禁止復制網頁內容

    這篇文章主要介紹了javascript實現禁止復制網頁內容,需要的朋友可以參考下
    2014-12-12
  • JS幻想 讀取二進制文件

    JS幻想 讀取二進制文件

    如果說讓JavaScript讀取站點上一文本文件,那不過是個再簡單不了的事了；但若說要換成一個二進制的文件，并且是完全靜態(tài)的讀取,那似乎有點天方夜譚了。
    2009-04-04
  • js生成隨機數方法和實例

    js生成隨機數方法和實例

    這篇文章主要介紹了js生成隨機數方法和實例,由js生成一切隨機數的基礎都是Math.random(),有興趣的可以了解一下。
    2017-01-01
  • 微信小程序實現圖片翻轉效果的實例代碼

    微信小程序實現圖片翻轉效果的實例代碼

    這篇文章主要介紹了微信小程序實現圖片翻轉效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • BootStrap表單控件之復選框checkbox和單選擇按鈕radio

    BootStrap表單控件之復選框checkbox和單選擇按鈕radio

    這篇文章主要介紹了BootStrap表單控件之復選框checkbox和單選擇按鈕radio的相關資料,需要的朋友可以參考下
    2017-05-05
  • bootstrap警告框使用方法解析

    bootstrap警告框使用方法解析

    這篇文章主要為大家詳細介紹了bootstrap警告框使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-01-01
  • 利用canvas實現的加載動畫效果實例代碼

    利用canvas實現的加載動畫效果實例代碼

    之前看到一個Android的加載效果不錯，一直想自己動手做一個，正好這段時間重溫了一個Canvas，所以就嘗試了一下。下面這篇文章主要給大家介紹了關于利用canvas實現加載效果的相關資料，需要的朋友可以參考下。
    2017-07-07
  • uniapp中使用?uni.navigateBack()?返回上級頁面并傳參的方法

    uniapp中使用?uni.navigateBack()?返回上級頁面并傳參的方法

    最近遇到這樣的需求在A頁面中通過跳轉到B頁面,在B頁面中處理的數據,需要跳轉回A頁面供其使用,本文給大家分享uniapp中使用?uni.navigateBack()?返回上級頁面并傳參的操作方法,感興趣的朋友一起看看吧
    2023-10-10
  • JavaScript刪除數組元素的方法

    JavaScript刪除數組元素的方法

    這篇文章主要介紹了JavaScript刪除數組元素的方法,實例分析了javascript中delete函數的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • JavaScript隱式類型轉換

    JavaScript隱式類型轉換

    JavaScript的數據類型是非常弱的（不然不會叫它做弱類型語言了）！在使用算術運算符時，運算符兩邊的數據類型可以是任意的，比如，一個字符串可以和數字相加
    2016-03-03

最新評論