javascript - 支持es5函数和es6箭头的JSON.parse(JSON.stringify()) ?

Question

问题

需求: 对象转成字符串，保存到数据库,返回前端后再转回对象?
想要2个方法:
一个是类似JSON.stringify转成字符串，不能丢失函数，支持function和箭头函数
另一个是类似JSON.parse转成对象，要还原对象中原来的函数

数据

      rule: [        {          type: "input",          field: "goods_name",          title: "商品名称",          on: {            change: function (val) {              console.log("aa", val);            },            input: (val) => {              console.log("bb", val);            },          },        },        {          type: "datePicker",          field: "created_at",          title: "创建时间",          on: {            change: function (val) {              console.log("cc", val);            },            input: (val) => {              console.log("dd", val);            },          },        },      ],

方法

    function toJson(){    }    function toString(){          }

Answer 1

借助eval函数的话，JSON自带的方法就能处理你这个需求

const obj = [  {    type: "input",    field: "goods_name",    title: "商品名称",    on: {      change: function (val) {        console.log("aa", val);      },      input: (val) => {        console.log("bb", val);      },    },  },  {    type: "datePicker",    field: "created_at",    title: "创建时间",    on: {      change: function (val) {        console.log("cc", val);      },      input: (val) => {        console.log("dd", val);      },    },  },]const jsonStr = JSON.stringify(obj, (k, v) => {  return v instanceof Function ? v.toString() : v})console.log(jsonStr)const result = JSON.parse(jsonStr, (k, v) => {  if (v?.includes?.('function')) {    const { fn } = eval(`"use strict";({fn:${v}})`)    return fn  }  if (v?.includes?.('=>')) {    return eval(v)  }  return v})console.log(result)

Answer 2

你可以学一下 form-create的方案,

• 官网地址:https://www.form-create.com/v3/guide/
• github: https://github.com/xaboy/form-create/blob/2d20aa64f8d953db75ebadabb2099e683e42b98d/packages/utils/lib/json.js#L67

具体使用是这种效果

import deepExtend from './deepextend';import {err} from './console';import is, {hasProperty} from './type';const PREFIX = '[[FORM-CREATE-PREFIX-';const SUFFIX = '-FORM-CREATE-SUFFIX]]';const $T = '$FN:';const $TX = '$FNX:';const FUNCTION = 'function';export function toJson(obj, space) {    return JSON.stringify(deepExtend([], obj, true), function (key, val) {        if (val && val._isVue === true)            return undefined;        if (typeof val !== FUNCTION) {            return val;        }        if (val.__json) {            return val.__json;        }        if (val.__origin)            val = val.__origin;        if (val.__emit)            return undefined;        return PREFIX + val + SUFFIX;    }, space);}function makeFn(fn) {    return (new Function('return ' + fn))();}export function parseFn(fn, mode) {    if (fn && is.String(fn) && fn.length > 4) {        let v = fn.trim();        let flag = false;        try {            if (v.indexOf(SUFFIX) > 0 && v.indexOf(PREFIX) === 0) {                v = v.replace(SUFFIX, '').replace(PREFIX, '');                flag = true;            } else if (v.indexOf($T) === 0) {                v = v.replace($T, '');                flag = true;            } else if (v.indexOf($TX) === 0) {                v = makeFn('function($inject){' + v.replace($TX, '') + '}');                v.__json = fn;                v.__inject = true;                return v;            } else if (!mode && v.indexOf(FUNCTION) === 0 && v !== FUNCTION) {                flag = true;            }            if (!flag) return fn;            const val = makeFn((v.indexOf(FUNCTION) === -1 && v.indexOf('(') !== 0) ? (FUNCTION + ' ' + v) : v);            val.__json = fn;            return val;        } catch (e) {            err(`解析失败:${v}\n\nerr: ${e}`);            return undefined;        }    }    return fn;}export function parseJson(json, mode) {    return JSON.parse(json, function (k, v) {        if (is.Undef(v) || !v.indexOf) return v;        return parseFn(v, mode);    });}