JS中的24種遍歷方法從基礎(chǔ)到進(jìn)階全解析
前言
遍歷是 JavaScript 中最常見的操作之一，無論是處理數(shù)組、對象還是其他數(shù)據(jù)結(jié)構(gòu)，都離不開遍歷邏輯。本文將系統(tǒng)梳理 JavaScript 中常用的 24 種遍歷方法，從基礎(chǔ)的 for 循環(huán)到現(xiàn)代的迭代器模式，幫你全面掌握遍歷技巧。
一、數(shù)組遍歷基礎(chǔ)方法
1. 普通 for 循環(huán)
最基礎(chǔ)的數(shù)組遍歷方式，通過索引訪問元素，支持 break/continue 控制流程。
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 1, 2, 3
}2. for...in 循環(huán)
最初為遍歷對象設(shè)計(jì)，也可遍歷數(shù)組，但會遍歷數(shù)組的非數(shù)字索引（如自定義屬性），不推薦用于數(shù)組。
const arr = [1, 2, 3];
arr.custom = 'hello';
for (let i in arr) {
console.log(i, arr[i]); // 0:1, 1:2, 2:3, custom:hello
}3. for...of 循環(huán)
ES6 新增，專門用于遍歷可迭代對象（數(shù)組、字符串、Map 等），直接獲取元素值，支持 break/continue。
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item); // 1, 2, 3
}4. forEach()
數(shù)組原型方法，接收回調(diào)函數(shù)遍歷元素，不支持 break/continue，無返回值（返回 undefined）。
const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
console.log(item); // 1, 2, 3
});二、數(shù)組遍歷進(jìn)階方法（帶返回值）
5. map()
遍歷數(shù)組并返回新數(shù)組，新數(shù)組元素由回調(diào)函數(shù)的返回值組成（原數(shù)組不變）。
const arr = [1, 2, 3]; const newArr = arr.map(item => item * 2); console.log(newArr); // [2, 4, 6]
6. filter()
篩選符合條件的元素，返回由符合條件元素組成的新數(shù)組。
const arr = [1, 2, 3, 4]; const evenArr = arr.filter(item => item % 2 === 0); console.log(evenArr); // [2, 4]
7. find()
返回第一個(gè)符合條件的元素，若找不到則返回 undefined。
const arr = [1, 2, 3, 4]; const firstEven = arr.find(item => item % 2 === 0); console.log(firstEven); // 2
8. findIndex()
返回第一個(gè)符合條件的元素的索引，若找不到則返回 -1。
const arr = [1, 2, 3, 4]; const firstEvenIndex = arr.findIndex(item => item % 2 === 0); console.log(firstEvenIndex); // 1
9. every()
檢測數(shù)組所有元素是否都符合條件，全符合返回 true，否則返回 false（短路邏輯：遇 false 即停）。
const arr = [2, 4, 6]; const allEven = arr.every(item => item % 2 === 0); console.log(allEven); // true
10. some()
檢測數(shù)組是否有至少一個(gè)元素符合條件，有則返回 true，否則返回 false（短路邏輯：遇 true 即停）。
const arr = [1, 3, 4]; const hasEven = arr.some(item => item % 2 === 0); console.log(hasEven); // true
11. reduce()
從左到右遍歷數(shù)組，通過累加器將元素 “縮減” 為單個(gè)值（可實(shí)現(xiàn)求和、求積、分組等復(fù)雜邏輯）。
const arr = [1, 2, 3]; const sum = arr.reduce((acc, item) => acc + item, 0); console.log(sum); // 6
12. reduceRight()
與 reduce() 類似，但從右到左遍歷數(shù)組。
const arr = [1, 2, 3]; const sum = arr.reduceRight((acc, item) => acc + item, 0); console.log(sum); // 6（結(jié)果相同，但遍歷順序相反）
13. flatMap()
先執(zhí)行 map()，再對結(jié)果執(zhí)行 flat(1)（扁平化一層數(shù)組），適合處理嵌套數(shù)組。
const arr = [[1], [2], [3]]; const flatArr = arr.flatMap(item => item); console.log(flatArr); // [1, 2, 3]
三、數(shù)組遍歷的特殊場景方法
14. keys()
返回?cái)?shù)組索引的迭代器，配合 for...of 使用。
const arr = [1, 2, 3];
for (const key of arr.keys()) {
console.log(key); // 0, 1, 2
}15. values()
返回?cái)?shù)組元素的迭代器，配合 for...of 使用。
const arr = [1, 2, 3];
for (const value of arr.values()) {
console.log(value); // 1, 2, 3
}16. entries()
返回?cái)?shù)組 [索引，元素] 鍵值對的迭代器，配合 for...of 使用。
const arr = [1, 2, 3];
for (const [index, value] of arr.entries()) {
console.log(index, value); // 0:1, 1:2, 2:3
}17. Array.from()
將類數(shù)組對象或可迭代對象轉(zhuǎn)為數(shù)組，第二個(gè)參數(shù)可作為遍歷處理函數(shù)（類似 map）。
const str = 'hello'; const arr = Array.from(str, char => char.toUpperCase()); console.log(arr); // ['H', 'E', 'L', 'L', 'O']
四、對象遍歷方法
18. Object.keys()
返回對象自身可枚舉屬性的鍵名數(shù)組，再配合數(shù)組遍歷方法使用。
const obj = { a: 1, b: 2 };
Object.keys(obj).forEach(key => {
console.log(key, obj[key]); // a:1, b:2
});19. Object.values()
返回對象自身可枚舉屬性的鍵值數(shù)組。
const obj = { a: 1, b: 2 };
console.log(Object.values(obj)); // [1, 2]20. Object.entries()
返回對象自身可枚舉屬性的 [鍵，值] 數(shù)組，適合配合 for...of 或 Map 使用。
const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
console.log(key, value); // a:1, b:2
}21. Object.getOwnPropertyNames()
返回對象自身所有屬性（包括不可枚舉屬性，但不包括 Symbol 屬性）的鍵名數(shù)組。
const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b']22. Reflect.ownKeys()
返回對象自身所有屬性（包括不可枚舉屬性和 Symbol 屬性）的鍵名數(shù)組，最全面的對象鍵遍歷方法。
const sym = Symbol('c');
const obj = { a: 1, [sym]: 3 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Reflect.ownKeys(obj)); // ['a', 'b', Symbol(c)]五、其他數(shù)據(jù)結(jié)構(gòu)遍歷
23. Map 遍歷
Map 是鍵值對集合，提供 forEach、keys()、values()、entries() 方法，默認(rèn)迭代器為 entries()
const map = new Map([['a', 1], ['b', 2]]);
map.forEach((value, key) => console.log(key, value)); // a:1, b:2
for (const [key, value] of map) { /* 等價(jià)于 map.entries() */ }24. Set 遍歷
Set 是值的集合，無鍵名，遍歷方法類似 Map，但鍵和值相同。
const set = new Set([1, 2, 3]);
set.forEach(value => console.log(value)); // 1, 2, 3
for (const value of set) { console.log(value); }總結(jié)：如何選擇遍歷方法？
① 基礎(chǔ)數(shù)組遍歷：優(yōu)先 for...of（靈活）或 forEach（簡潔）
② 需返回新數(shù)組：map()（轉(zhuǎn)換）或 filter()（篩選）
③ 需條件查找：find()（找元素）或 findIndex()（找索引）
④ 需聚合結(jié)果：reduce()（求和、分組等復(fù)雜邏輯）
⑤ 對象遍歷：優(yōu)先 Object.entries()（鍵值對）或 Reflect.ownKeys()（全屬性）
⑥ 可迭代對象（Map/Set）：直接用 for...of 或內(nèi)置 forEach???????
到此這篇關(guān)于JS中24種遍歷方法從基礎(chǔ)到進(jìn)階的文章就介紹到這了,更多相關(guān)JS遍歷方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Webpack自動刷新瀏覽器是一項(xiàng)非常實(shí)用的功能，它可以讓開發(fā)者在編輯代碼時(shí)，自動更新瀏覽器，從而節(jié)省大量的時(shí)間。那么它是如何實(shí)現(xiàn)的呢？2023-02-02
這篇文章主要介紹了JS常用表單驗(yàn)證方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS計(jì)算網(wǎng)頁停留時(shí)間的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
BootStrap daterangepicker 雙日歷控件
這篇文章主要介紹了BootStrap daterangepicker 雙日歷控件,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了js移動端事件基礎(chǔ)及常用事件庫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js保留兩位小數(shù)使用toFixed實(shí)現(xiàn)
直接使用Math.round(x*100)存在一個(gè)問題，有時(shí)會有很小的誤差，顯示很多位的小數(shù)位，如0.9996*100，就會變成99.96000000000001，我想要的在下面，感興趣的朋友可以參考下哈2013-07-07
微信小程序+云開發(fā)實(shí)現(xiàn)歡迎登錄注冊
這篇文章主要介紹了微信小程序+云開發(fā)實(shí)現(xiàn)歡迎登錄注冊，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)商品櫥窗特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目部署后如何提示用戶版本更新的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的工作或者學(xué)習(xí)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-03-03
JS頁面動態(tài)繪圖工具SVG，Canvas，VML介簡介
這篇文章主要介紹了JS頁面動態(tài)繪圖工具SVG，Canvas，VML介簡介,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10