快捷導(dǎo)航

js實(shí)現(xiàn)JSON.stringify的方法實(shí)例代碼

更新時(shí)間：2026年03月06日 08:15:39 作者：zhengzhengwang

在大廠的前端面試過(guò)程中,JSON.Stringify常常被問(wèn)到,那么能夠熟練的運(yùn)用,掌握就必不可少,下面這篇文章主要介紹了js實(shí)現(xiàn)JSON.stringify的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 基礎(chǔ)版本實(shí)現(xiàn)

function myJSONStringify(data) {
    // 處理基本類型
    if (typeof data === 'string') {
        return `"${data}"`;
    }
    
    if (typeof data === 'number' || typeof data === 'boolean') {
        return String(data);
    }
    
    if (data === null) {
        return 'null';
    }
    
    if (data === undefined || typeof data === 'function' || typeof data === 'symbol') {
        return undefined; // 這些類型在對(duì)象中會(huì)被忽略，在數(shù)組中會(huì)轉(zhuǎn)為null
    }
    
    // 處理數(shù)組
    if (Array.isArray(data)) {
        const arrValues = data.map(item => {
            const value = myJSONStringify(item);
            return value === undefined ? 'null' : value;
        });
        return `[${arrValues.join(',')}]`;
    }
    
    // 處理普通對(duì)象
    if (typeof data === 'object') {
        // 處理循環(huán)引用
        if (hasCircularReference(data)) {
            throw new TypeError('Converting circular structure to JSON');
        }
        
        const keys = Object.keys(data);
        const objValues = keys.map(key => {
            const value = myJSONStringify(data[key]);
            // 忽略值為 undefined、函數(shù)、symbol 的屬性
            if (value === undefined) {
                return null;
            }
            return `"${key}":${value}`;
        }).filter(item => item !== null);
        
        return `{${objValues.join(',')}}`;
    }
}

2. 完整的增強(qiáng)版本

class JSONStringify {
    constructor() {
        this.cache = new Set(); // 用于檢測(cè)循環(huán)引用
    }
    
    stringify(data) {
        this.cache.clear();
        return this._stringify(data);
    }
    
    _stringify(data) {
        // 處理基本類型
        if (typeof data === 'string') {
            return this._escapeString(data);
        }
        
        if (typeof data === 'number') {
            // 處理特殊數(shù)值
            if (Number.isNaN(data) || !Number.isFinite(data)) {
                return 'null';
            }
            return String(data);
        }
        
        if (typeof data === 'boolean') {
            return String(data);
        }
        
        if (data === null) {
            return 'null';
        }
        
        if (data === undefined || typeof data === 'function' || typeof data === 'symbol') {
            return undefined;
        }
        
        // 處理 BigInt (JSON.stringify 會(huì)報(bào)錯(cuò))
        if (typeof data === 'bigint') {
            throw new TypeError('Do not know how to serialize a BigInt');
        }
        
        // 檢查循環(huán)引用
        if (this.cache.has(data)) {
            throw new TypeError('Converting circular structure to JSON');
        }
        this.cache.add(data);
        
        // 處理 Date 對(duì)象
        if (data instanceof Date) {
            return `"${data.toISOString()}"`;
        }
        
        // 處理 RegExp 對(duì)象
        if (data instanceof RegExp) {
            return '{}';
        }
        
        // 處理數(shù)組
        if (Array.isArray(data)) {
            const result = this._stringifyArray(data);
            this.cache.delete(data);
            return result;
        }
        
        // 處理普通對(duì)象
        if (typeof data === 'object') {
            const result = this._stringifyObject(data);
            this.cache.delete(data);
            return result;
        }
    }
    
    _stringifyArray(arr) {
        const values = arr.map((item, index) => {
            // 處理數(shù)組中的空位
            if (index in arr) {
                const value = this._stringify(item);
                return value === undefined ? 'null' : value;
            }
            return 'null'; // 數(shù)組空位轉(zhuǎn)為 null
        });
        
        return `[${values.join(',')}]`;
    }
    
    _stringifyObject(obj) {
        const keys = Object.keys(obj);
        const pairs = [];
        
        for (const key of keys) {
            // 處理 Symbol 鍵（JSON.stringify 會(huì)忽略 Symbol 鍵）
            if (typeof key === 'symbol') {
                continue;
            }
            
            const value = this._stringify(obj[key]);
            
            // 忽略值為 undefined、function、symbol 的屬性
            if (value !== undefined) {
                pairs.push(`"${this._escapeString(key)}":${value}`);
            }
        }
        
        // 處理 toJSON 方法
        if (obj.toJSON && typeof obj.toJSON === 'function') {
            const jsonValue = obj.toJSON();
            if (jsonValue !== undefined) {
                return this._stringify(jsonValue);
            }
        }
        
        return `{${pairs.join(',')}}`;
    }
    
    _escapeString(str) {
        // 處理特殊字符
        const escapeMap = {
            '"': '\\"',
            '\\': '\\\\',
            '\b': '\\b',
            '\f': '\\f',
            '\n': '\\n',
            '\r': '\\r',
            '\t': '\\t'
        };
        
        return str.replace(/["\\\b\f\n\r\t]/g, match => escapeMap[match]);
    }
}

// 循環(huán)引用檢測(cè)函數(shù)
function hasCircularReference(obj, seen = new Set()) {
    if (obj === null || typeof obj !== 'object') {
        return false;
    }
    
    if (seen.has(obj)) {
        return true;
    }
    
    seen.add(obj);
    
    if (Array.isArray(obj)) {
        for (const item of obj) {
            if (hasCircularReference(item, seen)) {
                return true;
            }
        }
    } else {
        for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (hasCircularReference(obj[key], seen)) {
                    return true;
                }
            }
        }
    }
    
    seen.delete(obj);
    return false;
}

3. 處理 replacer 參數(shù)

function myJSONStringifyWithReplacer(data, replacer, space) {
    const jsonStringify = new JSONStringify();
    
    // 處理 replacer 參數(shù)
    if (replacer) {
        if (typeof replacer === 'function') {
            return _stringifyWithFunctionReplacer(data, replacer, space);
        } else if (Array.isArray(replacer)) {
            return _stringifyWithArrayReplacer(data, replacer, space);
        }
    }
    
    // 處理 space 參數(shù)
    const result = jsonStringify.stringify(data);
    if (space !== undefined) {
        return _formatWithSpace(result, space);
    }
    
    return result;
}

function _stringifyWithFunctionReplacer(data, replacer, space) {
    const seen = new Set();
    
    function stringify(value, key) {
        // 處理循環(huán)引用
        if (value !== null && typeof value === 'object') {
            if (seen.has(value)) {
                throw new TypeError('Converting circular structure to JSON');
            }
            seen.add(value);
        }
        
        // 應(yīng)用 replacer 函數(shù)
        const replacedValue = replacer.call(data, key, value);
        
        let result;
        if (typeof replacedValue === 'string') {
            result = `"${replacedValue}"`;
        } else if (typeof replacedValue === 'number' || typeof replacedValue === 'boolean') {
            result = String(replacedValue);
        } else if (replacedValue === null) {
            result = 'null';
        } else if (Array.isArray(replacedValue)) {
            result = '[' + replacedValue.map((item, index) => 
                stringify(item, String(index))).join(',') + ']';
        } else if (typeof replacedValue === 'object') {
            const keys = Object.keys(replacedValue);
            const pairs = keys.map(k => {
                const val = stringify(replacedValue[k], k);
                return `"${k}":${val}`;
            });
            result = '{' + pairs.join(',') + '}';
        } else {
            result = undefined;
        }
        
        if (value !== null && typeof value === 'object') {
            seen.delete(value);
        }
        
        return result;
    }
    
    return stringify(data, '');
}

function _stringifyWithArrayReplacer(data, replacer, space) {
    const replacerSet = new Set(replacer);
    
    function filterObject(obj) {
        if (Array.isArray(obj)) {
            return obj.map(item => 
                item !== null && typeof item === 'object' ? filterObject(item) : item
            );
        }
        
        if (obj !== null && typeof obj === 'object') {
            const filtered = {};
            for (const key in obj) {
                if (replacerSet.has(key)) {
                    filtered[key] = obj[key];
                }
            }
            return filtered;
        }
        
        return obj;
    }
    
    const filteredData = filterObject(data);
    const jsonStringify = new JSONStringify();
    const result = jsonStringify.stringify(filteredData);
    
    if (space !== undefined) {
        return _formatWithSpace(result, space);
    }
    
    return result;
}

4. 處理 space 參數(shù)（格式化）

function _formatWithSpace(jsonStr, space) {
    if (space === 0) return jsonStr;
    
    let indentLevel = 0;
    let formatted = '';
    let inString = false;
    
    // 確定縮進(jìn)字符串
    const indentStr = typeof space === 'number' 
        ? ' '.repeat(Math.min(space, 10))
        : space.slice(0, 10);
    
    for (let i = 0; i < jsonStr.length; i++) {
        const char = jsonStr[i];
        
        if (char === '"' && jsonStr[i - 1] !== '\\') {
            inString = !inString;
            formatted += char;
            continue;
        }
        
        if (inString) {
            formatted += char;
            continue;
        }
        
        switch (char) {
            case '{':
            case '[':
                formatted += char + '\n' + indentStr.repeat(++indentLevel);
                break;
                
            case '}':
            case ']':
                formatted += '\n' + indentStr.repeat(--indentLevel) + char;
                break;
                
            case ',':
                formatted += ',\n' + indentStr.repeat(indentLevel);
                break;
                
            case ':':
                formatted += ': ';
                break;
                
            default:
                formatted += char;
        }
    }
    
    return formatted;
}

5. 使用示例

// 測(cè)試數(shù)據(jù)
const testData = {
    name: "張三",
    age: 25,
    isStudent: true,
    hobbies: ["讀書", "游泳", null],
    address: {
        city: "北京",
        district: "朝陽(yáng)區(qū)"
    },
    birthday: new Date('2000-01-01'),
    empty: null,
    undef: undefined,      // 會(huì)被忽略
    func: function() {},   // 會(huì)被忽略
    [Symbol('id')]: 123    // 會(huì)被忽略
};

// 創(chuàng)建循環(huán)引用
testData.self = testData;

// 測(cè)試
try {
    console.log("普通對(duì)象:", myJSONStringify(testData));
} catch (e) {
    console.log("循環(huán)引用錯(cuò)誤:", e.message);
}

// 移除循環(huán)引用后測(cè)試
delete testData.self;

console.log("普通對(duì)象:", myJSONStringify(testData));
console.log("原生 JSON.stringify:", JSON.stringify(testData));

// 測(cè)試 replacer 函數(shù)
const jsonWithReplacer = myJSONStringifyWithReplacer(
    testData,
    (key, value) => {
        if (key === 'password') return undefined;
        if (typeof value === 'string') return value.toUpperCase();
        return value;
    }
);
console.log("帶 replacer:", jsonWithReplacer);

// 測(cè)試格式化輸出
console.log("格式化輸出:", myJSONStringifyWithReplacer(testData, null, 2));

6. 特性對(duì)比

特性	原生 JSON.stringify	我們的實(shí)現(xiàn)
基本類型轉(zhuǎn)換	?	?
數(shù)組處理	?	?
對(duì)象處理	?	?
循環(huán)引用檢測(cè)	?	?
Date 對(duì)象	?	?
RegExp 對(duì)象	{}	{}
toJSON 方法	?	?
replacer 函數(shù)	?	?
replacer 數(shù)組	?	?
space 格式化	?	?
Symbol 鍵	忽略	忽略
undefined 值	忽略/轉(zhuǎn)為 null	忽略/轉(zhuǎn)為 null
BigInt	報(bào)錯(cuò)	報(bào)錯(cuò)

這個(gè)實(shí)現(xiàn)涵蓋了 JSON.stringify 的主要特性，包括：

基本類型轉(zhuǎn)換
對(duì)象和數(shù)組的遞歸處理
循環(huán)引用檢測(cè)
特殊類型處理（Date、RegExp）
replacer 參數(shù)支持
space 格式化支持

總結(jié)

到此這篇關(guān)于js實(shí)現(xiàn)JSON.stringify的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)JSON.stringify內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: