如何精简基于chrome.storage.local的数组存储jQuery代码并保留数据命名？

我编写的以下代码可正常运行，但有没有办法对其进行精简/压缩？代码如下：

chrome.storage.local.get({wsitemnumberget: [], wstitleget: [], wspecialpriceget: [], wspecialprevpriceget: [], wspecialdeldateget: []}, function (result) { 
    var wsitemnumberget = result.wsitemnumberget; 
    var wstitleget = result.wstitleget; 
    var wspecialpriceget = result.wspecialpriceget; 
    var wspecialprevpriceget = result.wspecialprevpriceget; 
    var wspecialdeldateget = result.wspecialdeldateget; 
    var witenumfetch = $('#wsitemnumber').text(); 
    var wspecialtitlefetch = $('#title').val(); 
    var wspecialprice = $('.mwsb-wsp').text(); 
    var wspecialprevprice = $('.mwsb-prevprice').text(); 
    var wspecialdeldate = $('.mwsb-deldate').text(); 
    wsitemnumberget.push({WSItemNumber: witenumfetch}); 
    wstitleget.push({WSTitle: wspecialtitlefetch}); 
    wspecialpriceget.push({WSPrice: wspecialprice}); 
    wspecialprevpriceget.push({WSPrevPrice: wspecialprevprice}); 
    wspecialdeldateget.push({WSDELDate: wspecialdeldate}); 
    chrome.storage.local.set({ 
        wsitemnumberget: wsitemnumberget, 
        wstitleget: wstitleget, 
        wspecialpriceget: wspecialpriceget, 
        wspecialprevpriceget: wspecialprevpriceget, 
        wspecialdeldateget: wspecialdeldateget 
    });
}

当前这段代码通过push方法将各部分数据存入对应名称的数组中，请问是否可以在保留数据命名的前提下，使用jQuery对代码进行精简优化？

当然可以！咱们完全能在保留原有数据命名结构的基础上，通过合并重复逻辑、简化变量声明来大幅精简代码，同时可读性也不会下降。这里有两种优化方案供你选择：

方案一：兼顾精简与可读性（推荐） #

这个版本把分散的DOM查询、数组更新和存储操作整合起来，逻辑清晰且代码量减少不少：

chrome.storage.local.get({
    wsitemnumberget: [],
    wstitleget: [],
    wspecialpriceget: [],
    wspecialprevpriceget: [],
    wspecialdeldateget: []
}, function(result) {
    // 用一个对象映射存储键、DOM查询和数据结构的对应关系
    const dataMappings = {
        wsitemnumberget: { WSItemNumber: $('#wsitemnumber').text() },
        wstitleget: { WSTitle: $('#title').val() },
        wspecialpriceget: { WSPrice: $('.mwsb-wsp').text() },
        wspecialprevpriceget: { WSPrevPrice: $('.mwsb-prevprice').text() },
        wspecialdeldateget: { WSDELDate: $('.mwsb-deldate').text() }
    };

    // 遍历映射，一次性构建要更新的存储数据
    const updatedStorage = {};
    Object.entries(dataMappings).forEach(([storageKey, newItem]) => {
        // 用扩展运算符生成新数组，避免直接修改原数组
        updatedStorage[storageKey] = [...result[storageKey], newItem];
    });

    chrome.storage.local.set(updatedStorage);
});

优化思路： #

• 减少冗余变量：把原本单独声明的DOM值变量和数组变量全部去掉，用dataMappings集中管理查询逻辑和数据结构。
• 批量处理数组更新：通过Object.entries遍历映射关系，一次性完成所有数组的更新和存储数据的构建，避免重复的push和变量赋值。
• 保持原有命名：所有存储键和数据对象的属性名完全和你原来的一致，没有做任何修改。

方案二：极致精简版 #

如果追求最小化代码量，可以把逻辑进一步压缩，适合对代码长度有要求的场景（可读性略有下降）：

chrome.storage.local.get({
    wsitemnumberget: [], wstitleget: [], wspecialpriceget: [],
    wspecialprevpriceget: [], wspecialdeldateget: []
}, r => chrome.storage.local.set(Object.fromEntries(
    Object.entries({
        wsitemnumberget: { WSItemNumber: $('#wsitemnumber').text() },
        wstitleget: { WSTitle: $('#title').val() },
        wspecialpriceget: { WSPrice: $('.mwsb-wsp').text() },
        wspecialprevpriceget: { WSPrevPrice: $('.mwsb-prevprice').text() },
        wspecialdeldateget: { WSDELDate: $('.mwsb-deldate').text() }
    }).map(([k, v]) => [k, [...r[k], v]])
)));

这个版本把所有逻辑嵌套在一起，用r代替result作为参数缩写，同时用Object.fromEntries直接构建存储对象，代码量减少了一半以上。

内容的提问来源于stack exchange，提问作者aussiedan