我如何简化 ParseInt 从本地存储变量中检索的代码块答案

【问题标题】：How do i simplify a block of code that ParseInt Retrieves from localstorage variables我如何简化 ParseInt 从本地存储变量中检索的代码块
【发布时间】：2020-08-24 22:08:08
【问题描述】：

我正在设计这个游戏，我将 1 或 0 值作为正确或错误答案存储在变量 q1 - q6 的本地存储中。

由于本地存储不将数字存储为整数，因此在我的主页加载之前，我会解析所有变量以获取整数。虽然其中一些还没有被声明为任何东西，所以它们似乎是 NaN 或 null，所以当我尝试计算所有变量的加法时，它给了我 NaN，除非我使用这个乱七八糟的代码。

    if (isNaN(totalpoints)) totalpoints = 0;
    if (localStorage.getItem("points") === null){
    localStorage.setItem("points", "0");
    }
    var q0 = parseInt(localStorage.q0);
    var q1 = parseInt(localStorage.q1);
    var q2 = parseInt(localStorage.q2);
    var q3 = parseInt(localStorage.q3);
    var q4 = parseInt(localStorage.q4);
    var q5 = parseInt(localStorage.q5);
    var q6 = parseInt(localStorage.q6);
    if (isNaN(q0))q0=0;
    if (isNaN(q1))q1=0;
    if (isNaN(q2))q2=0;
    if (isNaN(q3))q3=0;
    if (isNaN(q4))q4=0;
    if (isNaN(q5))q5=0;
    if (isNaN(q6))q6=0;
    var totalpoints = totalpoints + q0 + q1 + q2 + q3 + q4 + q5 + q6;
    localStorage.setItem("points", totalpoints);

我正在尝试一种方法，我可以将这段代码简化为几行，使用可能的变量循环或其他什么？任何人都可以给我任何方向感，让我知道如何解决这个问题或帮助我吗？我只是不确定，因为我似乎必须单独解析本地存储变量？谢谢

【问题讨论】：

标签： javascript variables math nan parseint

【解决方案1】：

与其拥有多个单独的数字索引属性，不如考虑使用单个数组：

const qArr = localStorage.qArr
  ? JSON.parse(localStorage.qArr)
  : new Array(7).fill(0);

然后，不是分配给q 变量，而是分配给qArr 的索引，并保存它，使用JSON.stringify：

qArr[3] = 555;
localStorage.qArr = JSON.stringify(qArr);

要将数组中的所有项相加，可以使用reduce：

totalPoints = qArr.reduce((a, b) => a + b, totalPoints);

因为听起来这一切都在一个独立的脚本中，所以如果可能的话，我会 highly recommend 将所有需要存储的相关项目也合并到一个对象中，以免污染 localStorage有许多单独的属性，它们确实应该放在一个地方，而不是分散开来，例如：

const dataObj = localStorage.pointsData
  ? JSON.parse(pointsData)
  : {
      totalPoints: 0,
      qArr: new Array(7).fill(0)
    };

然后，用dataObj.totalPoints 和dataObj.qArr 做一些事情，当你需要保存它时，做这样的事情：

localStorage.pointsData = JSON.stringify(dataObj);

【讨论】：

【解决方案2】：

我会建议一个对象。

您可以将对象作为answers 存储在localStorage 中并更新值。

所以假设answers 对象是这样的

answers = {
   q0: 10,
   q2: 20
}

那么无论key是否存在都无关紧要，因为您可以遍历对象以获得总和

let total = 0;

for (const key in answers) {
    total += answers[key];
}

当然，您必须像这样将该对象存储在 localStorage 中

localStorage.setItem('answers', JSON.stringify(answers));

在获取时你必须解析它

const answers = JSON.parse(localStorage.getItem('answers'));

【讨论】：

【解决方案3】：

我建议用一个数组替换多个值。所以，你的保存功能可能是这样的：

function savePoint(point) {
  var points = JSON.parse(localStorage.points || "[]");
  points.push(point);
  localStorage.points = JSON.stringify(points);
}

你会这样计算总数：

function calculateTotal() {
  var points = JSON.parse(localStorage.points || "[]");
  return points.reduce(function(total, point) {
    return total + point;
  }, 0);
}

无论如何，我建议考虑一个数据模型来存储点并使用JSON.stringify + JSON.parse 将其存储在 localStorage 中。

【讨论】：

【解决方案4】：

由于您有点 q0 - q7 加上 points，因此有 8 个变量。现在，如果我们仔细检查您的代码，就会发现一些共同点

从本地存储中获取变量
你把它转换成整数
你检查它是否是 NaN。如果是 NaN，则设置为 0。
最后，你使用变量来计算总和

好的。因此，我们将尝试编写一个执行步骤 1-3 的函数

function oneForAll(variableName){
  if (localStorage.getItem(variableName) === null){
    localStorage.setItem(variableName, "0");
  }
  var variable = parseInt(localStorage.getItem(variableName));
  if (isNaN(variable)) {
      variable = 0;
  }
  return variable
}

我基本上使用了你的大部分台词，以便你可以理解它。

现在，对于第 4 步，我们需要使用我们的函数来获取总和。另外，我们需要一个循环。

var listOfVariables = ["points", "q0", "q1", "q2", "q3", "q4", "q5", "q6", "q7" ]

var totalPoints = 0;

// loop over the list of variables
listOfVariables.forEach(variableName => {
  totalPoints += oneForAll(variableName);
});

// finally you set the new calculated total points
localStorage.setItem("points", totalpoints);

希望这有帮助。

【讨论】：