[Day08] JavaScript - 回圈_part 2

forEach

来看看forEach在MDN的定义

Array.prototype.forEach()

forEach() 方法会将阵列内的每个元素，皆传入并执行给定的函式一次。

语法

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

参数

• callback:
  这个 callback 函式将会把 Array 中的每一个元素作为参数，带进本 callback 函式里，每个元素各执行一次，接收三个参数：
  • currentValue: 代表当前Array元素值
  • index [optional]: 代表当前Array元素的索引值
  • array [optional]: 呼叫 forEach()方法的那个 Array本身，也就是上面语法中的 arr。
• thisArg [optional]:
  执行 callback 回呼函式的 this（即参考之 Object）值。

与for loop不同之处:

假设我们有以下阵列:

let myArray = [2,4,6,8,10]

• 若使用传统for loop，需取得阵列的长度及index，并透过回圈去把每个索引（index）的元素（item）取出来做运算。

  for (var i=0; i < myArray.length ; i++ ) {
    console.log(`index:${i}, value:${myArray[i]}`);  
  }
  /*output:
   index:0, value:2
   index:1, value:4
   index:2, value:6
   index:3, value:8
   index:4, value:10 */
  

• 使用forEach方法，看起来更简单明了:
  会对阵列内的每个元素去做操作，传入并执行给定的函式。自然的会将每一个元素去传递进去console.log ，而不需要检查边界条件。

  myArray.forEach(function(item, index) {
      console.log(`index:${index}, value:${item}`);
  });
  /*output:
    index:0, value:2
    index:1, value:4
    index:2, value:6
    index:3, value:8
    index:4, value:10*/
  
  

do...while

do...while语句是while语句的另一种变形的版本，差异只在於"它会先执行一次区块中的语句，再进行判断情况"，也就是会"保证至少执行一次其中的语句"，基本语法结构如下:

语法

do
  statement
while (condition);

• statement:
  执行至少一次的语句，在并每次condition 值为true时重新执行。若要执行多行语句，使用block语句（{ ... }）包裹这些语句。
• condition:
  循环中每次计算的表达式。如果是condition为true，就会再次进statement执行。当condition为false时，则跳到後面do...while的语句。

范例
下面的例子中，do...while 循环至少有一次，并且继续循环直到i不小於 5 时结束。

var result = '';
var i = 0;
do {
   i += 1;
   result += i + ' ';
} while (i < 5);

//'1 2 3 4 5 '

资料来源:
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://realdennis.medium.com/array-%E5%8E%9F%E5%9E%8B%E7%9A%84-foreach-%E6%9C%89%E5%A4%9A%E5%A5%BD%E7%94%A8-%E5%AD%B8%E6%9C%83%E9%AB%98%E9%9A%8E%E5%87%BD%E6%95%B8%E4%B9%8B%E5%BE%8C%E9%83%BD%E4%B8%8D%E6%83%B3%E5%AF%AB-javascript-%E4%BB%A5%E5%A4%96%E7%9A%84%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80%E4%BA%86-dc4b594a045a
https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/loop.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while