JavaScript 各種for loop

介紹JavaScript中的各種for(包含ES6)

索引

for(let i=0;i<arr.length;i++)

for in

for of

Array 的各種for loop方法: .forEach, .map, .filter, .find, .reduce, .every, .some

for(let i=0;i<arr.length;i++)

最基本且最常用的for loop，可以在符合條件時break/return，減少loop的次數來優化性能

const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
  const el = arr[i];
  console.log(el); // 1 2 3
}
for (let i = 0; i < arr.length; i++) {
  const el = arr[i];
  console.log(el); // 1, 2
  if(el > 1) break;
}

for in

用於object(包含array)，loop取得object的key

const arr = [4, 5, 6]
for(const key in arr) {
  console.log(key) // 0, 1, 2 等同於index
  console.log(arr[key]) // 4, 5, 6
}
const obj = { a: 'A', b: 'B', }
for(const key in obj) {
  console.log(key) // a, b
  console.log(arr[key]) // 'A', 'B'
}

for of

用於可迭代的object(Array, String, Map, Set…等)

關於什麼是可迭代object可參考: MDN

const arr = [4, 5, 6]
for(const el of arr) { 
  console.log(el); // 4, 5, 6
}

搭配async處理使用，適合用於需要依序呼叫API…等的異步處理

// 模擬API的request
const mockFetchRequest = (waitSec=1000) => () => new Promise(res => {
  setTimeout(() => {
    res('Wait Sec: ' + (waitSec / 1000) + ', resoleved!');
  }, waitSec);
});
// 模擬 request 佇列
const fetchQueue = [
  mockFetchRequest(), mockFetchRequest(1500), mockFetchRequest(10000)
];
// 建立一個request的可迭代物件給for of
async function* asyncFetchGenerator() {
  let i = 0;
  while(i < fetchQueue.length) {
    yield fetchQueue[i]();
    i++;
  }
}
// 使用閉包async function執行
(async function() {
  for await (const response of asyncFetchGenerator()) {
    console.log(response);
  }
}());

Array 的各種for loop方法

通用參數

Array.方法(callback, thisArg?)
callback: (currentVal, index?, array?) => void
// currentVal: 遍歷時目前的值
// index: 遍歷時array的index
// array: 此array
// thisArg: 如果有給予值，此值會被作為callback中的this

.forEach()

return undefined，遍歷array中的「所有」元素，此方法無法用reture/break提前結束loop，需小心使用。

const arr = [10, 20]
arr.forEach((cur) => {
  console.log(cur) // 10, 20
})

.map()

return Array，根據callback生成一個新的Array

const arr = [1, 2, 4]
const newArr = arr.map(n => n * 2)
// [2, 4, 8]

.filter()

return Array，根據callback過濾array的元素，並生成一個新的Array

const arr = [1, false, "4"]
const filtered = arr.filter(el => typeof el === 'number')
// [1]

.find()

return undefined 或 array的其中一個元素，只會return 「第一個」符合callback條件的值

const arr = [10, 100, 20]
const found = arr.find(el => al > 10)
// 100

.reduce()

將array中的值「累計」成一個最後的值
reducer的參數

Array.reduce(callback, initValue?)
callback: (accumulator, current, index?, array?) => any
// accumulator: 上每一次遍歷之後return 的累計值，如果沒累計值則是initValue
// current: 遍歷時目前的值
// index: 遍歷時array的index
// array: 此array
// initValue: 累計值的初始值，當array.length <= 1 ，或array其中包含object，此initValue則一定要加，否則會出現錯誤(因為無法累計)

範例

// 一般範例
const arr = [...Array(10)].map((el, i) => i+1) // 1~10
const sum = arr.reduce((acc, cur) => acc + cur) // 55
// 找出是2的倍數 object範例
arr.reduce((acc, cur) => {
  if(cur % 2 === 0) { 
    acc.res = [...acc.res, cur];
    acc.count++; 
  }
  return acc;
}, { res: [], count: 0, })

.every()

return boolean，檢查array中的「每一個值」是否有通過callback

注意：如果array是空的，則永遠return true

const isBiggerThan10 = (current) => current > 10
const arr1 = [10, 5, 20]
const arr2 = [20, 11, 16]
arr1.every(isBiggerThan10) // false
arr2.every(isBiggerThan10) // true

.some()

return boolean，檢查array中的「某一個值」是否有通過callback，只要一個值通過即可

const haveOdd = current => current % 2 === 1
const arr1 = [1, 2, 4, 6]
const arr2 = [10, 20]
arr1.some(haveOdd) // true
arr2.some(haveOdd) // false

參考/引用

for…in: MDN

for…of: MDN

Array: MDN