跳至主要内容

[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...infor...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