跳至主要内容

[JS] JavaScript 疊代與迴圈（iterator and loop）

keywords: loop, iterate, iterator​

常用迴圈​

while​

function main() {
  let i = 0;
  while (i < 10) {
    i++;
    console.log(i);
    if (i === 5) {
      // break;   // while 之後的 console.log 會執行到
      return; // while 之後的 console.log 不會執行到
    }
  }

  console.log('hello');
}

main();

for...in​

適合: object​
let obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
  console.log('key-value:', prop, obj[prop]);
}

/**
 * 如果要列舉物件的 key-value 可以直接使用 Object.keys()
 **/
Object.keys(obj); // ['a', 'b', 'c']

for...in @ MDN

for...of​

適合: array​
let arr = [10, 20, 30];
for (let value of arr) {
  console.log(value); // 10, 20, 30
}

for … of 和 for … in 的差別​

for...in 和 for...of 都是用來疊代內容，這兩者最主要的差別在於它們所疊代的內容。for...in 疊代的是物件中可被列舉的屬性（enumerable properties）。for...of 則是根據該可疊代的物件（iterable object）所定義的疊代行為來進行迭代。

for…of @ MDN

Code Style​

盡可能不要使用疊代器​

為了避免可能的副作用，盡可能不要使用疊代器：

  • 疊代陣列： map() / every() / filter() / find() / findIndex() / reduce() / some() / ...
  • 產生陣列來疊代物件： Object.keys() / Object.values() / Object.entries()

11.1 Don’t use iterators. @ airbnb

示範程式碼​

Demonstration of JavaScript Loop @ PJCHENder JSFiddle