如何遍历JavaScript带编号变量？含LocalStorage存储疑问

一、直接遍历现有编号变量的方法 #

你当前代码里的test1到test5属于全局变量，在浏览器环境中全局变量会挂载到window对象上。可以通过字符串拼接+对象属性访问的方式遍历它们：

let count = 5;

var test1 = "test1"
var test2 = "test2"
var test3 = "test3"
var test4 = "test4"
var test5 = "test5"

for (let i = 1; i <= count; i++) {
    console.log(window[`test${i}`]); // 依次输出test1到test5
}

这里循环从1开始，用模板字符串test${i}拼接出目标变量名，再通过window[变量名]的形式获取对应的值。

二、更推荐的写法：用数组/对象统一管理 #

直接定义一堆编号变量不利于代码维护，推荐用数组或对象来集中管理这类关联数据：

数组方式 #

let tests = ["test1", "test2", "test3", "test4", "test5"];
// 直接遍历元素
for (let test of tests) {
    console.log(test);
}
// 按索引遍历
for (let i = 0; i < tests.length; i++) {
    console.log(tests[i]);
}

对象方式 #

let tests = {
    test1: "test1",
    test2: "test2",
    test3: "test3",
    test4: "test4",
    test5: "test5"
};
// 遍历所有值
for (let value of Object.values(tests)) {
    console.log(value);
}
// 遍历键值对
for (let [key, value] of Object.entries(tests)) {
    console.log(key, value);
}

三、纠正你对localStorage的误解 #

你提到“使用Object或Array存储到LocalStorage后，调用removeItem(keyName)会删除所有内容”，这是错误的：

• localStorage是以键值对形式存储数据的，removeItem(keyName)只会删除指定keyName对应的那一项，不会影响其他存储内容。
• 如果想为每个事件存储独立数据并单独删除，完全可以给每个事件分配唯一的key，比如：

  // 存储事件数据
  localStorage.setItem("event_1", "事件1内容");
  localStorage.setItem("event_2", "事件2内容");
  
  // 单独删除事件2
  localStorage.removeItem("event_2");
  

• 若要存储复杂对象或数组，只需先转成JSON字符串，取出时再解析即可：

  // 存储数组
  let eventList = ["事件1", "事件2", "事件3"];
  localStorage.setItem("event_list", JSON.stringify(eventList));
  
  // 取出并解析数组
  let storedEvents = JSON.parse(localStorage.getItem("event_list"));
  
  // 删除指定事件后重新存储
  storedEvents.splice(1, 1); // 删除索引为1的事件
  localStorage.setItem("event_list", JSON.stringify(storedEvents));
  

这种方式比定义一堆编号变量灵活得多，也更符合前端开发的最佳实践。

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