使用 For 循环简化 IF...Else 语句 [Javascript]答案

【问题标题】：Simplify IF...Else Statement with For Loop [Javascript]使用 For 循环简化 IF...Else 语句 [Javascript]
【发布时间】：2016-07-22 04:27:43
【问题描述】：

上下文：我正在创建一个目录来通知用户他们已经完成/访问的页面。

下面的 if...else 语句正在工作（单独），但我想使用 FOR 循环中的“i”计数器生成其他 30 章的检查。

脚本将首先加载包含表示已访问/未访问的值 1 或 0 的本地存储，并将该数据传输到变量 chap1check。根据结果，目录应向用户显示已访问或未访问的页面。

我不确定我需要做什么，但理论上，我需要将所有“chap1...”替换为“i”的值。

<script type="text/javascript">

var i;
for (i = 1; i <=31; i++){
   var chap1Check = localStorage.getItem("chap1Status");

   if(chap1Check == "1"){
      document.getElementById('chap1Completion').innerHTML = "Completed";
   }else{
      document.getElementById('chap1Completion').innerHTML = "Incomplete";
   }
}
</script>

【问题讨论】：

chap1Check 也应该增加？ chap2Check 等？

标签： javascript if-statement for-loop

【解决方案1】：

只需将数字前面的字符串部分与数字 (i) 连接，然后将数字后面的字符串部分连接起来。

for (var i = 1; i <= 31; i ++){
    var chapCheck = localStorage.getItem("chap" + i + "Status");
    document.getElementById('chap' + i + 'Completion').textContent = chapCheck == "1" ? "Completed" : "Incomplete";
}

【讨论】：

请不要发布仅代码的答案。（编辑：我看到你刚刚编辑了这个）
innerHTML 应替换为 textContent。

【解决方案2】：

以下代码将起作用。但是，将数组存储在本地存储中并通过索引数组来访问它会更简洁。另外，看看在 for 循环中使用 map 函子。

还请注意，您应该在 for 循环中内联 i 的声明，如下所示。否则，您可能会与将来在 for 循环中使用 i 发生冲突。

for (var i = 1; i <=31; i++){
   var chapterChecker = localStorage.getItem("chap"+i+"Status");

   if(chap1Check == "1"){
      document.getElementById('chap'+i+'Completion').innerHTML = "Completed";
   }else{
      document.getElementById('chap'+i+'Completion').innerHTML = "Incomplete";
   }
}

【讨论】：

【解决方案3】：

使用 es6 模板字符串的解决方案可能是这样的

for (var i = 1; i <=31; i++){
   let content = '';
   if(localStorage.getItem(`chap${i}Status`) == "1"){
      content = "Completed";
   }else{
      content = "Incomplete";
   }
   document.getElementById(`chap${i}Completion`).innerHTML = content;
}

【讨论】：