Day 05 - jS 微基础之ES6回圈：loop

loop（回圈）意味着在有限的条件下，帮忙重复做多少事的意思。

以下举基本的for回圈为范例：

for

以做表格为例，在做网页设计的时候常需要写静态网页的假资料来进行表格的视觉效果设定，但新增重复的每一列假资料其实非常花费时间而且使网页看起来冗长而复杂。

例如制作这样的表格：

<table>
  <tbody>
  <tr><td>班级1</td><td></td><td>座号1</td><td>姓名1</td></tr>
  <tr><td>班级2</td><td></td><td>座号2</td><td>姓名2</td></tr>
  <tr><td>班级3</td><td></td><td>座号3</td><td>姓名3</td></tr>
  <tr><td>班级4</td><td></td><td>座号4</td><td>姓名4</td></tr>
  </tbody>
</table>

范例图似乎有点短，但假设需要多一点资料的时候是很花费时间而且维护上很麻烦（例如更改内容或新增栏位）。

这时候回圈可以为我们省下许多做重复事情的时间，这里与function（函式）不同的地方在於，function是用来写同样的程序，然後可以重复利用，而loop是在条件设定下“自动”帮忙重复做事情。

在使用loop的时候请务必要注意条件的设定，不然跑出无限回圈会使浏览器当掉。

接着我们来写一个简易的 for loop 看看：

<table id="table"></table>
<script>
  let tableContent = "";
  for(let i = 1; i < 5; i++){
    tableContent += "<tr><td>班级"+i+"</td><td>座号"+i+"</td><td>姓名"+i+"</td></tr>";
    document.getElementById('table').innerHTML = "<tbody>" + tableContent + '</table>';
  };
</script>

上面我们先宣告了变数tableContent等於空字串，接着进入for回圈设下条件：当i等於1而且小於5(也就是数字不会跑出5来)的时候，i会从1这个数字开始自动加1到遇见5时不执行。

然後使用先前定义的空字串tableContent来赋值，最後再把资料输出出来。

以上我们节省了许多需要重复输入的文字以及使1~4的数字自动产生，是不是很方便呢。

for...in

其实 for ... in 不是这样用的，但是如果要执行出我上面的写法，可以这样写：

<table id="table"></table>
<script>
let tableContent = "";
for(let i = 1; i < 5; i++){
  const grades = { 班级: i }
  const grades2 = { 座号: i}
  const grades3 = { 姓名: i }
  for (let item in grades) {
    for (let item2 in grades2) {
      for (let item3 in grades3) {
        tableContent += "<tr><td>"+item+grades[item]+"</td><td>"+item2+grades2[item2]+"</td><td>"+item3+grades3[item3]+"</td></tr>";
        document.getElementById('table').innerHTML = "<tbody>" + tableContent + '</table>';
      }
    }
  }
};
</script>

它原本的用法是拿来取值，不过温习了好久我还是搞不懂，所以先暂时搁着，知道有这个东西可以用。

<script>
  const grades = { Tom: 60, Lion: 68, Lili: 85 }
  for (let item in grades) {
      console.log(item+'分数'+grades[item])
  };
</script>

for...of

在ES6中新增了for of，写法如下：

<script>
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}
</script>

这篇文章介绍了三种for loop的写法，但关於loop其实还有更多写法，请参考相关文章的Loops and iteration，里面有详尽的描述。

相关文章：

Loops and iteration

JavaScript回圈控制方法之 — -for/for…in/forEach