JS陣列遍歷中for,for in,for of,map,forEach各自的使用方法與優缺點
阿新 • • 發佈:2022-01-31
陣列遍歷普通函式
優點:支援流程控制(break、continue、return)
for
const arr = ["A","B","C"] for(let i = 0; i<arr.length; i++){ console.log(arr[i]) }
優點:能夠對索引精確控制
缺點:語法較為繁瑣
for in
conshttp://www.cppcns.comt arr = ["A","C"] arr["3"] = 1 Array.prototype["cc"] = "ck" for(let e in arr){ console.log(arr[e]Cfary) }
缺點:
1.遍歷索引為字串,即e型別為字串
2.會遍歷可列舉的非數Cfary字型別鍵以及原型上的鍵
3.不同瀏覽器對for in 順序實現可能不一致
for of
const arr = ["A","C"] arr["3"] = 1 Array.prototype["cc"] = "ck" for(let i of arr){ console.log(i) }
優點:語法簡潔、有序遍歷
缺點:由於遍歷的是值,對索引無直接控制
函式式-->高階函式
缺點,不能進行流程控制
map
const arr = ["A","C"] arr.map(e => console.log(e))
優點:語法簡潔,返回一箇舊陣列的對映陣列,不影響原陣列
forEach
const arr = ["A","C"] arr.forEach(e =&gwww.cppcns.comt; console.log(e))
優點:語法簡潔,在不需要返回陣列時,效能較好比map好
名稱 | 流程控制 | 函式式 |
---|---|---|
for | T | |
for of | T | |
forEach | T | |
map | T |
JS陣列遍歷函式總結:
在不需要流程控制時,優先使用map,不需要返回值使用forEach,需要索引的控制時,可以回退至for,for of一般結合內建預設迭代器的資料結構(Map、Set)使用,在需要結合生成器 async await 非同步迭代時的選擇
更多關於JS陣列遍歷方法的技巧請檢視下面的相關連結