「JavaScript陣列遍歷」相關筆記
2021-03-27 09:37 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...inloop only iterates over enumerable, non-Symbol properties. - Objects created from built–in constructors like
Array()(ref.) andObject()(ref.) have inherited non–enumerable properties fromObject.prototypeandString.prototype, such as String’sindexOf()method or Object’stoString()method.
- A
- 遍歷的是 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與currentValueaccumulator：負責記住 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 的說明）