js JSON.stringify() 的简单了解之函数的转换

最新推荐文章于 2024-05-21 19:09:41 发布

小白Coding日志

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量1.2k

点赞数 1

文章标签： javascript vue Ant Design Vue

本文链接：https://blog.csdn.net/weixin_46203213/article/details/127873059

版权

js JSON.stringify() 的简单了解之函数的转换

在javaScript中 JSON.stringify()的作用就是将javaScript的值转换为JSON字符串。它一共有三个参数:
value（必须） : 需要转换的javascript的值。
replacer（可选): 可以为一个函数或者数组，如果为一个函数那么其每个成员就会执行这个函数，并返回这个函数的返回值而不是原始值。如果函数返回undefined将排除成员。
space(可选)：用于为文本添加缩进，空格，换行等格式。
下面是我实际遇到的问题：
用vue3开发的项目管理系统，UI库用阿里的 Ant Design Vue，项目列表的字段是在太多需要动态展示，所以做了一个动态列的展示，后来又给加上了列排序筛选功能，但是表格配置的每一列筛选函数需要加在Columns中，
像这样：
注意sort函数:

 const tableColumns = ref([{
            title: "项目工号",
            dataIndex: "projectGonghao",
            key: "projectGonghao",
            slots: { customRender: "projectGonghao" },
            width: 120,
            ellipsis: true,
            align: 'center',
            fixed: 'left',
            ischeck: true,
            sorter: (a, b) => {
                return adata.localeCompare(bdata)
            }
        },
        {
            title: "优先级",
            key: "priority",
            width: 150,
            slots: { customRender: "priority" },
            align: 'center',
            fixed: 'left',
            ischeck: true,
            sorter: function(a, b) {
                return a.projectEntity.priority - b.projectEntity.priority
            }
        },
        ]

这个表格的列配置信息存在localStorage当中，每次保存的时候我需要将sorter函数先转为字符串，为什么要这样做？因为默认情况下JSON.stringify会忽略掉函数的；而到了在页面加载时又需要转为正常的函数的这一个过程。那么JSON.stringify() 的第二个参数就派上用场了可以传递一个函数进去：

window.localStorage.setItem('tabColumn:' + currentUser.value.id, JSON.stringify(tabColumnList.value, (key, value) => {
            // 将函数转为字符串存储，由于JSON 不存函数会被忽略处理
            if (typeof value === 'function') {
                return value.toString()
            }
            return value;
        }));

到了需要使用的地方再转一下即可，在这里JSON.parse() 也可以有多个参数。
text(必须): 要转换的javaScript 字符串。
reviver(可选)：一个函数，没个成员都调用次函数并返回。
需要注意一点：eval("(" + value + ")")的使用，这样写才可以转为真正的函数。
eval() 函数会将传入的字符串作为javascript代码来执行。

const tableColumnsList = JSON.parse(window.localStorage.getItem('tabColumn:' + currentUser.value.id), (key, value) => {
            // 由于Json不存储函数 所以可以将函数先转为字符串存储，然后再将字符串转为函数使用
            if (key === 'sorter' || key === 'onFilter') {
                return eval("(" + value + ")")
            }
            return value
        })