我如何簡化 ParseInt 從本地存儲變量中檢索的代碼塊

Question

我有這個游戲，我正在設計其中我將 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);

我試圖想出一種方法，我可以將這段代碼簡化為幾行，可能使用變量的循環或其他東西？ 任何人都可以給我任何方向感，讓我知道如何解決這個問題或幫助我嗎？ 我只是不確定，因為我似乎必須單獨解析本地存儲變量？ 謝謝

Answer 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);

因為聽起來這一切都在一個獨立的腳本中，所以我強烈建議將所有需要存儲的相關項目也合並到一個 object 中，如果可能的話，以免污染 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);

Answer 2

我建議使用 object。

您可以將 object 作為answers存儲在localStorage中並更新值。

所以假設answers object 是這樣的

answers = {
   q0: 10,
   q2: 20
}

那么密鑰是否存在並不重要，因為您可以循環通過 object 獲得總和

let total = 0;

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

當然，您必須像這樣將 object 存儲在 localStorage 中

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

在得到你必須解析它的同時

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

Answer 3

我建議用一個數組替換多個值。 因此，您的儲蓄 function 可能是這樣的：

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);
}

無論如何，我建議考慮使用數據 model 來存儲積分並使用JSON.stringify + JSON.parse將其存儲在 localStorage 中。

Answer 4

由於您有點q0 - q7加上points ，因此有 8 個變量。 現在，如果我們仔細 go 通過您的代碼，常見的事情

1. 您從本地存儲中獲取變量

2. 您將其轉換為 integer

3. 你檢查它是否是NaN。 如果是 NaN，則設置為 0。

4. 最后，您使用變量來計算總和

   好的。 所以我們將嘗試編寫一個 function 來執行步驟 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 步，我們需要使用我們的 function 來獲得總和。 另外，我們需要一個循環。

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);

希望這會有所幫助。