普通文組 2.5

「JavaScript陣列遍歷」相關筆記

總結

本篇文章是關於 JavaScript 遍歷陣列（部分方法也可直接遍歷物件）方法的筆記。 keywords: array, iterate, iteration

  • 不會回傳新陣列的方式：for搭配length()、while搭配length()、for...in、for...of、every()、some()、forEach()、join、reduce()
  • 會回傳一個新陣列的方式：filter()、flat()、flatMap()、map()

不會回傳新陣列

for搭配length()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • Array.prototype.length會回傳一個陣列內有多少個物件（並回傳物件的類別是 number）
  • 陣列物件會從零開始數（0 based index），三個物件的陣列會讓Array.prototype.length回傳3，而陣列內物件的 index 依序為 0、1、2
  • 搭配for迴圈，從第一個物件（index 0）開始，直到 index 等於Array.prototype.length前停止
  • 無法用這種方式來遍歷 object，因為對 object 使用Array.prototype.length會回傳undefined（參考以下示範）

參考： MDN: Array.prototype.length

題外話：如何得知 object 的長度

let size = Object.keys(myObj).length;

Object.keys()會回傳一個陣列，陣列裡面包含一個物件的所有key，對回傳的陣列取其length即可知道物件的長度；參考：

while搭配length()

  • 可遍歷陣列
  • 不可直接遍歷物件

將Array.prototype.length設定為while迴圈的條件

題外話：把 normal function 轉換成 arrow function

// 把function的部分獨立出來
function(item) {
  console.lot(item)
}

// 用一個變數來存放arrow function
let function = (item) => {
  console.log(item)
}

// {}裡面只有一行console.log(item)，拿掉{}
let function = (item) => console.log(item)

參考：

for...in

  • 可遍歷陣列
  • 可遍歷物件
  • 只會遍歷 enumerable、non-Symbol properties
  • 參考MDN 的說明：
    • A for...in loop only iterates over enumerable, non-Symbol properties.
    • Objects created from built–in constructors like Array()(ref.) and Object()(ref.) have inherited non–enumerable properties from Object.prototype and String.prototype, such as String’s indexOf() method or Object’s toString() method.
  • 遍歷的是 enumerable properties (key-value pair 中的key)，而非 value；使用for...in遍歷陣列或字串時需注意是否抓取到正確的物件，參考以下示範：

for...of

  • 可遍歷陣列
  • 不可直接遍歷物件

  • 可遍歷任何「可遍歷的物件」（iterable objects）

    • JavaScript built-in iterable objects: Array, array-like objects (arguments, NodeList), TypedArray, Map, Set, String
    • 而 Object 不是 iterable objects，對 Object 使用for...of會回傳Error: not iterable
    • iterable objects 可參考MDN 的說明

  • 無法遍歷到使用「non-numeric」作為索引的值

  • 無法直接遍歷「包含了 non-numeric 索引」的陣列

  • 但如果先建立一個沒有「non-numeric 索引」的陣列，再 assign「包含了 non-numeric 索引」的值進去陣列裡面，這樣是可以遍歷的

every()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • every()會對陣列中的每一個物件執行放在括號中的 function（callback function）
  • 如果所有的物件傳入 callback function 後都回傳 truthy value，則every()會回傳 true，否則every()回傳 false
  • 一旦 callback function 回傳 falsy value，every()就會停止（參考上方示範碼第 21 行輸出的結果）
  • 參考 MDN 的說明：對空的陣列執行every()，不管 callback function 的條件是什麼，every()都會回傳 true
  • every()不會對被刪除的、空的值執行 callback function

some()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • 對陣列中的每一個物件執行 callback function，只要有一個物件讓 callback function 回傳 truthy value，some()就會回傳 true

forEach()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • forEach()會對陣列中的每一個物件執行放在括號中的 function（callback function）
  • forEach()不會對被刪除的、空的值執行 callback function（MDN: It is not invoked for index properties that have been deleted or are uninitialized.），可參考以下範例：

join()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • 回傳「將陣列依照括號內條件」組合起來的字串（類型：string）

reduce()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • 回傳「陣列經過reduce()後」的單一個值，不影響原始陣列的內容
  • reduce()的 callback 最少需要兩個參數accumulator與currentValue
    • accumulator：負責記住 callback function 回傳的值
    • currentValue：每一回遍歷的陣列元素（MDN: The current element being processed in the array.）
  • reduceRight()則是從陣列的右側向左遍歷

2021/5/6 更新 應用：可篩選出一個陣列中長度最長的單字

筆記：

  • letterArray 中的每一個單字會依序成為currentWord，而當currentWord.length大於longestWord.length的時候，longestWord的值就會被更新為currentWord
  • 遍歷結束後，回傳longestWord（該陣列中最長的單字）

參考：Find the Longest Word With the reduce() Method

會回傳新陣列

filter()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • 回傳一個新的陣列，新的陣列中包含「傳入 callback function 後，判定為 true」的所有物件
  • 概念與forEach()類似：filter()不會對被刪除的、空的值執行 callback function（參考 MDN 的說明）

flat()

  • 可遍歷陣列
  • 不可直接遍歷物件

  • 根據括號內的參數來將陣列扁平化，回傳一個新的陣列

  • 預設參數為 1

  • 其他應用（參考 MDN）：

    • 參數傳入Infinity的話，陣列中任何深度的巢狀陣列全部都會被扁平化
    const arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    • 可以拿來去除陣列中的空位
    const arr = [1, 2, , 4, 5];
arr.flat();
// [1, 2, 4, 5]

flatMap()

功能上：即是map()加上flat(1)，但濃縮為一個 method

map()

  • 可遍歷陣列
  • 不可直接遍歷物件
  • map()會對陣列中的每一個物件執行放在括號中的 function（callback function），並回傳一個新陣列
  • 概念與forEach()類似：map()不會對被刪除的、空的值執行 callback function（參考 MDN 的說明）

參考文件