Chrome扩展开发中如何通过变量动态指定数组名完成存储操作

问题原代码 #

开发Chrome扩展时，需要根据取值范围1-4的变量locationVal匹配预先定义的4个数组使用，初始判定逻辑如下：

if (locationVal === 1) {
arrayToUse = 'firstList';
} else if (locationVal === 2) {
    arrayToUse = 'secondList';
} else if (locationVal === 3) {
    arrayToUse = 'thirdList';
} else if (locationVal === 4) {
    arrayToUse = 'fourthList';
} else {
    console.log("setArray function error");
}
chrome.storage.local.set({arrayToUse});

预先定义的四个数组：

let firstList = [];
let secondList = [];
let thirdList = [];
let fourthList = [];

涉及存储读写的异常代码段：

// 读逻辑
chrome.storage.local.get({arrayToUse: []}, function(items) {
  if (!chrome.runtime.error) {
    arrayToUse = items.arrayToUse;
  }
});

// 写逻辑
chrome.storage.local.set({arrayToUse : arrayToUse}, function() {
if (!chrome.runtime.error)....

异常表现：arrayToUse被当作字符串处理，直接写死具体数组名时程序可正常运行。

问题根源 #

• 初始逻辑中给arrayToUse赋值的是'firstList'这类字符串，不是对应数组的引用，后续操作本质是在处理字符串而非数组本身
• JS对象字面量中直接写{arrayToUse: xxx}时，键名固定为字符串"arrayToUse"，不会读取arrayToUse变量存储的实际值作为键名，因此无法匹配到目标数组对应的存储项

修复方案 #

1. 替换if-else为映射表，直接获取数组引用 #

抛弃存数组名字符串的逻辑，直接通过映射表匹配到目标数组本身，代码更简洁也避免字符串转变量的额外问题：

// 建立值到数组的映射
const arrayMap = {
  1: firstList,
  2: secondList,
  3: thirdList,
  4: fourthList
};
// 直接拿到目标数组的引用，不是字符串
const arrayToUse = arrayMap[locationVal];
if (!arrayToUse) {
  console.log("setArray function error");
}

2. 修正存储写入逻辑 #

推荐使用固定键名存储当前激活的数组，逻辑更易维护，避免动态键名带来的匹配问题：

// 固定存储键为currentArray，值为当前选中的数组内容
chrome.storage.local.set({ currentArray: arrayToUse }, () => {
  if (chrome.runtime.error) return console.error(chrome.runtime.error);
  // 写入成功后的业务逻辑
});

如果确实需要按数组变量名分键存储，使用JS 计算属性语法，将变量值作为对象键：

// 先匹配到当前数组对应的键名字符串
const arrayKeyMap = {1: 'firstList', 2: 'secondList', 3: 'thirdList', 4: 'fourthList'};
const currentStoreKey = arrayKeyMap[locationVal];
// 用[]包裹变量，代表取变量值作为对象键
chrome.storage.local.set({ [currentStoreKey]: arrayToUse }, () => {
  if (chrome.runtime.error) return console.error(chrome.runtime.error);
  // 写入成功后的业务逻辑
});

3. 修正存储读取逻辑 #

对应固定键的写入逻辑，读取时直接取固定键即可：

chrome.storage.local.get({ currentArray: [] }, (items) => {
  if (chrome.runtime.error) return console.error(chrome.runtime.error);
  const currentArrayData = items.currentArray;
  // 后续直接操作currentArrayData
});

如果使用动态键存储，读取时同样用计算属性传入键名，取数时也要用动态键取值：

const currentStoreKey = arrayKeyMap[locationVal];
chrome.storage.local.get({ [currentStoreKey]: [] }, (items) => {
  if (chrome.runtime.error) return console.error(chrome.runtime.error);
  const targetArray = items[currentStoreKey];
  // 后续直接操作targetArray
});

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