js數組的遍歷可以用哪幾種方法? js遍歷數組 _js遍歷數組

【js數組的遍歷可以用哪幾種方法? js遍歷數組】

文章插圖

文章插圖
常見使用的遍歷函數
使用for-of循環(ES2015+) – 異步友好
使用forEach/some – 異步不友好(見例子)
使用for – 異步友好
幾點注意
不使用map，除非你用不到循環的返回值，請注意map和forEach是有區別的，map主要用來生成一個新的數組。
異步謹慎使用forEach，如果回調做異步工作，需要forEach等待（但是forEach不會等待，而是直接到底）。
數組遍歷例子for-of (ES2015+)
用法簡單直接，使用let把單個變量的范圍進行限制，不會影響到循環外，而且性能優于forEach，建議遍歷數組使用該函數。
const a = ["a", "b", "c"];for (let val of a) {console.log(val);}//依次打印結果 "a", "b", "c"

同時也對異步處理十分友好。

//延時function delay(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});}//異步函數打印數組內容async function show(arr) {for (let item of arr) {await delay(400); //等待 forEach 則會無視 awaitconsole.log(item);}}show(["頭", "條", "新", "浪", "潮"]);//依次延時打印結果 "頭""條""新""浪""潮"

forEach (ES5)
處理同步代碼（不需要等待），則可以使用forEach用于在循環期間完成的異步進程。
const a = ["a", "b", "c"];a.forEach((val) => {console.log(val);});//依次打印結果 "a", "b", "c"異步處理例子，注意與for-of的差異，將會并發運行，等同于多個子函數同步運行。

//延時function delay(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});}//異步函數打印數組內容async function show(arr) {arr.forEach(async (item) => {await delay(400);console.log(item);});}show(["頭", "條", "新", "浪", "潮"]);//延時完成后，直接打印 "頭""條""新""浪""潮"

for

const a = ["a", "b", "c"];for (let i = 0; i < a.length; ++i) {console.log(a[i]);}//依次打印結果 "a", "b", "c"http://性能優化版const a = ["a", "b", "c"];for (let i = 0, length = a.length; i < length; ++i) {console.log(a[i]);}

異步處理例子

//延時function delay(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});}//異步函數打印數組內容async function show(arr) {for (let i = 0, length = arr.length; i < length; ++i) {await delay(400);console.log(arr[i]);}}show(["頭", "條", "新", "浪", "潮"]);//依次延時打印結果 "頭""條""新""浪""潮"