Vanilla JS优化localStorage中score_A开头数值求和代码咨询

背景 #

• 我并非开发人员
• 希望使用Vanilla JS（不使用JQuery）

我目前使用以下代码已实现预期效果，但希望能优化代码提升效率：

现有代码 #

var score_A1 = localStorage.getItem("score_A1");
var score_A2 = localStorage.getItem("score_A2");
var score_A3 = localStorage.getItem("score_A3");
var score_A4 = localStorage.getItem("score_A4");
var score_A5 = localStorage.getItem("score_A5");
a =+ score_A1;
b =+ score_A2;
c =+ score_A3;
d =+ score_A4;
e =+ score_A5;
var scoreTotal_A = a + b + c + d + e;

我随后通过innerHTML调用${scoreTotal_A}来展示总和。

问题 #

1. 是否有更优、更高效的代码写法？
2. 能否编写代码自动获取所有以score_A开头的localStorage项并求和？

优化方案与解答 #

问题1：优化固定项的写法 #

有更简洁高效的写法。可以把需要获取的键名放进数组，通过循环遍历统一处理，避免重复编写大量相似代码，还能自动处理localStorage中不存在对应项的情况（防止总和变成NaN）：

// 定义需要求和的键名数组
const scoreKeys = ['score_A1', 'score_A2', 'score_A3', 'score_A4', 'score_A5'];
let scoreTotal_A = 0;

// 遍历数组累加分数
scoreKeys.forEach(key => {
  // 获取值并转为数字，若项不存在则默认取0
  const score = Number(localStorage.getItem(key)) || 0;
  scoreTotal_A += score;
});

问题2：自动匹配所有score_A开头的项求和 #

可以通过遍历localStorage的所有键，筛选出以score_A开头的项再求和，以后新增类似命名的项（比如score_A6）时，无需修改代码就能自动纳入计算：

let scoreTotal_A = 0;

// 遍历localStorage的所有键
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  // 判断键是否以score_A开头
  if (key.startsWith('score_A')) {
    // 转为数字并累加，不存在则取0
    const score = Number(localStorage.getItem(key)) || 0;
    scoreTotal_A += score;
  }
}

这两种写法都比原代码更简洁易维护，同时处理了边界情况，确保计算结果的准确性。

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