PJCHENder 未整理筆記

[JS] JavaScript 疊代與迴圈(iterate and loop)

2017-10-26

[JS] JavaScript 疊代與迴圈(iterate and loop)

keywords: loop, iterate, iterator

常用迴圈

while

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
1
2
3
4
5
6
7
8
9
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
1
2
3
4
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

掃描二維條碼,分享此文章