用 new Function 提高运行效率

最新推荐文章于 2024-01-16 15:00:00 发布

weixin_33845881

最新推荐文章于 2024-01-16 15:00:00 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

文章标签： json 后端前端 ViewUI

原文链接：https://segmentfault.com/a/1190000017420950

本文介绍了一种将大型数组高效转换为JSON格式的方法，通过避免使用forEach和直接构造对象，性能提升了7倍。适用于前端开发中大数据量的快速处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了减小列表数据的尺寸，后端把json处理成数组返回（类似于csv）。格式如下：

[
    ['basqty','brandfullname','fullname','gid'],
    [470,'金富士','【今日爆款】#金富士土斯动物饼干香蕉牛奶味50g',43945919],
    [470,'金富士','【今日爆款】#金富士土斯动物饼干香蕉牛奶味50g',43945919],
    ...
]

前端获取到数据后解析，格式如下：

[
    {
        "basqty":470,
        "brandfullname":"金富士",
        "fullname":"【今日爆款】#金富士土斯动物饼干香蕉牛奶味50g",
        "gid":"【今日爆款】#金富士土斯动物饼干香蕉牛奶味50g"
    },
    {
        "basqty":470,
        "brandfullname":"金富士",
        "fullname":"【今日爆款】#金富士土斯动物饼干香蕉牛奶味50g",
        "gid":"【今日爆款】#金富士土斯动物饼干香蕉牛奶味50g"
    },
    ...
]

优化前正常的解析代码：

function array2json(array) {
    var keys = array.shift();
    return array.length ? array.map(function (ary) {
        var row= {};
        keys.forEach(function (key, i) {
            row[key] = ary[i]
        })
        return row
    }) : []
}

运行一个 24000 行，每行 94 个字段的数组，大概需要 400 毫秒
图片描述

优化思路：省去中间 forEach 遍历赋值

function array2json(array) {
    var keys = array.shift();
    return array.length ? array.map(function (ary) {
        //如果能够省去中间 forEach 遍历赋值效率会高很多
        return {
            "basqty":ary[0],
            "brandfullname":ary[1],
            ...
        }
    }) : []
}

用 new Function 来构造中间的 return 对象

function listArrayTolistJson(array) {
    var keys = array.shift();
    return array.length ? array.map(new Function("ary", "return {" + keys.map(function (key, i) { return "'" + key + "':ary[" + i + "]" }).join(',') + "}")) : []
}

运行截图，大概快了 7 倍
图片描述