将对象转换为JSON字符串，即手写JSON.stringify

原创

剁椒鱼鳞

修改于 2023-06-27 18:57:44

2520

修改于 2023-06-27 18:57:44

文章被收录于专栏：前端小学生前端小学生

分析：

Date将转为string
undefined、Symbol会直接过滤掉，但如果是数组项是undefined、Symbol、Function，那么则返回null
正则RegExp会返回空对象{}
NaN、Function、null会返回null，但是呢，function会被过滤掉
Infinity会转为null
如果是数组的话，返回的是数组的序列化
string返回原始值
number、boolean则返回string
Map/Set/WeakMap/WeakSet会返回空对象{}
接受三个参数，第一个是要序列化的变量，第二个是function/array，第三个是间距

上代码：

function stringify(obj, fnOrArr) {
    if (typeof obj === 'function') {
        return undefined;
    }
    if (typeof obj === 'symbol') {
        return undefined;
    }
    if (obj === undefined) {
        return undefined;
    }
    if (typeof obj === 'number' && isNaN(obj)) {
        return 'null';
    }
    if (obj === Infinity) {
        return 'null';
    }
    if (obj === null) {
        return 'null';
    }
    if (Object.prototype.toString.call(obj) === '[object Date]') {
        return `'${ obj.toJSON() }'`;
    }
    if (Object.prototype.toString.call(obj) === '[object RegExp]') {
        return '{}';
    }
    if (typeof obj !== 'object') {
        return typeof obj === 'string' ? `'${ obj }'` : obj;
    }
    if (Array.isArray(obj)) {
        const arr = obj.map((list) => {
            if (list === undefined || typeof list === 'symbol' || typeof list === 'function') {
                return 'null';
            } else {
                return `${ stringify(list) }`
            }
        });
        return `'[${ arr.join(',')}]'`;
    }
    const keys = Object.keys(obj);
    const objArr = keys.map((list) => {
        // 数组内的 undefined、Symbol、Function 转为null
        if (stringify(obj[list]) !== undefined && obj[list] !== undefined) {
            return `"${ list }": ${ stringify(obj[list]) }`;
        }
    })
    // 过滤undefined
    return `{ ${ objArr.filter(list => list !== undefined).join(',') }}`;
}

示例：

const map = new Map();
map.set('name', 'Jerry');
const set = new Set();
set.add('age', 32);
const weakMap = new WeakMap();
const a = {};
weakMap.set(a, 'Female');
const weakSet = new WeakSet();
const b = {};
weakSet.add(b, 'Beijing');

const obj = {
    regexp: new RegExp(),
    today: new Date(),
    fn: function (name) {
        console.log('name:', name);
    },
    name: null,
    age: undefined,
    infinity: Infinity,
    nan: NaN,
    sex: Symbol('Male'),
    staff: [ "Jerry",123, () => {}, Symbol("Sina"), undefined, null, NaN, ],
    map: map,
    set: map,
    weakMap: weakMap,
    weakSet: weakSet,
}

使用JSON.stringify得到的是：

'{"regexp":{},"today":"2023-06-27T02:51:41.607Z","name":null,"infinity":null,"nan":null,"staff":["Jerry",123,null,null,null,null,null],"map":{},"set":{},"weakMap":{},"weakSet":{}}'

使用stringify得到的是：

'{ "regexp": {},"today": '2023-06-27T02:51:41.607Z',"name": null,"infinity": null,"nan": null,"staff": '['Jerry',123,null,null,null,null,null]',"map": { },"set": { },"weakMap": { },"weakSet": { }}'

这个stringify不是很完善的一个方法，和原生JSON.stringify还是有一定的差距，JSON.stringify是可以接受三个参数的，我这边暂不支持，后续再加吧。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript