JavaScript 迴圈

簡介

因為需要使用重複執行，所以整理一下。

for 迴圈（for Loop）

當 for 裡面的變數 i 和條件判斷是 ture 時執行內容後再回到前面的 for 迴圈，直到判斷是 false 時才會停止。

寫法

for ( var i = 0; i < 10; i++ ) {
　console.log(i)
}

• var i = 0 是設定初始值

• i < 10 條件判斷決定迴圈何時停止，當 ture 時執行，false 時停止

• i++ 當內容執行完後執行 ( 算術運算子 )

• 在寫迴圈的時候，要注意避免產生無限迴圈

使用 forEach 簡化

當條件判斷的值是陣列長度時，原本寫法為

for (var i = 0; i < array.length; i++) {
    console.log(Ary[i]);
}

這就會把陣列 array 的值一個一個取出

要簡化寫法就可以使用 forEach 讓陣列依序執行

array.forEach(function (value) {
    console.log(value);
});

而要注意不能使用 break 中斷迴圈，或 return 跳到迴圈外。

for..in 迴圈

這會把 myArray 當作 物件 依序執行

for (var index in myArray) {
    console.log(myArray[index]);
}

因為不是作為陣列 Array 而是物件 Object 執行，所以有幾點要注意：

• index 不會是 number (0, 1, 2) 而是 string (‘0’, ‘1’, ‘2’)

• 會找到自定義的屬性名稱，像是 myArray.name 屬性，就會得到一個 index 叫做 ‘name’

while 迴圈

當條件是 ture 的時候執行，直到條件是 false 才會停止

常用在顯示搜尋結果或是目錄清單等。

var i = 0;
while( i < 10 ) {
　document.write(i);
　i++;
}

// 0123456789

do…while 迴圈

var i = 0;
do {
　document.write(i);
　i++;
}while( i < 10 );

與 while 迴圈差別在 do…while 會先執行內容再判斷，而 while 是先判斷再執行內容。

ES6 的 for…of

可以搭配 break, continue, return

for (variable of iterable) {
  statement
}

variable 指的是值不是索引，直接看下面的例子會比較清楚

// 使用在陣列時
const iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

// 使用在字串時
const iterable = 'boo';

for (const value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

// 在陣列內的陣列內取值
const iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (const [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3