首页 > 网络编程 > JavaScript > javascript技巧 > JS遍历方法

JS中的24种遍历方法从基础到进阶全解析

2025-11-26 11:04:23 作者：Можно

遍历是指按照某种顺序逐一访问数据结构（如数组、对象等）中的每个元素的过程,这篇文章主要介绍了JS中24种遍历方法从基础到进阶的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

遍历是 JavaScript 中最常见的操作之一，无论是处理数组、对象还是其他数据结构，都离不开遍历逻辑。本文将系统梳理 JavaScript 中常用的 24 种遍历方法，从基础的 for 循环到现代的迭代器模式，帮你全面掌握遍历技巧。

一、数组遍历基础方法

1. 普通 for 循环

最基础的数组遍历方式，通过索引访问元素，支持 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 循环

最初为遍历对象设计，也可遍历数组，但会遍历数组的非数字索引（如自定义属性），不推荐用于数组。

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 循环

ES6 新增，专门用于遍历可迭代对象（数组、字符串、Map 等），直接获取元素值，支持 break/continue。

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // 1, 2, 3
}

4. forEach()

数组原型方法，接收回调函数遍历元素，不支持 break/continue，无返回值（返回 undefined）。

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  console.log(item); // 1, 2, 3
});

二、数组遍历进阶方法（带返回值）

5. map()

遍历数组并返回新数组，新数组元素由回调函数的返回值组成（原数组不变）。

const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr); // [2, 4, 6]

6. filter()

筛选符合条件的元素，返回由符合条件元素组成的新数组。

const arr = [1, 2, 3, 4];
const evenArr = arr.filter(item => item % 2 === 0);
console.log(evenArr); // [2, 4]

7. find()

返回第一个符合条件的元素，若找不到则返回 undefined。

const arr = [1, 2, 3, 4];
const firstEven = arr.find(item => item % 2 === 0);
console.log(firstEven); // 2

8. findIndex()

返回第一个符合条件的元素的索引，若找不到则返回 -1。

const arr = [1, 2, 3, 4];
const firstEvenIndex = arr.findIndex(item => item % 2 === 0);
console.log(firstEvenIndex); // 1

9. every()

检测数组所有元素是否都符合条件，全符合返回 true，否则返回 false（短路逻辑：遇 false 即停）。

const arr = [2, 4, 6];
const allEven = arr.every(item => item % 2 === 0);
console.log(allEven); // true

10. some()

检测数组是否有至少一个元素符合条件，有则返回 true，否则返回 false（短路逻辑：遇 true 即停）。

const arr = [1, 3, 4];
const hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // true

11. reduce()

从左到右遍历数组，通过累加器将元素 “缩减” 为单个值（可实现求和、求积、分组等复杂逻辑）。

const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 6

12. reduceRight()

与 reduce() 类似，但从右到左遍历数组。

const arr = [1, 2, 3];
const sum = arr.reduceRight((acc, item) => acc + item, 0);
console.log(sum); // 6（结果相同，但遍历顺序相反）

13. flatMap()

先执行 map()，再对结果执行 flat(1)（扁平化一层数组），适合处理嵌套数组。

const arr = [[1], [2], [3]];
const flatArr = arr.flatMap(item => item);
console.log(flatArr); // [1, 2, 3]

三、数组遍历的特殊场景方法

14. keys()

返回数组索引的迭代器，配合 for...of 使用。

const arr = [1, 2, 3];
for (const key of arr.keys()) {
  console.log(key); // 0, 1, 2
}

15. values()

返回数组元素的迭代器，配合 for...of 使用。

const arr = [1, 2, 3];
for (const value of arr.values()) {
  console.log(value); // 1, 2, 3
}

16. entries()

返回数组 [索引，元素] 键值对的迭代器，配合 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()

将类数组对象或可迭代对象转为数组，第二个参数可作为遍历处理函数（类似 map）。

const str = 'hello';
const arr = Array.from(str, char => char.toUpperCase());
console.log(arr); // ['H', 'E', 'L', 'L', 'O']

四、对象遍历方法

18. Object.keys()

返回对象自身可枚举属性的键名数组，再配合数组遍历方法使用。

const obj = { a: 1, b: 2 };
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]); // a:1, b:2
});

19. Object.values()

返回对象自身可枚举属性的键值数组。

const obj = { a: 1, b: 2 };
console.log(Object.values(obj)); // [1, 2]

20. Object.entries()

返回对象自身可枚举属性的 [键，值] 数组，适合配合 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 属性）的键名数组。

const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b']

22. Reflect.ownKeys()

返回对象自身所有属性（包括不可枚举属性和 Symbol 属性）的键名数组，最全面的对象键遍历方法。

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)]

五、其他数据结构遍历

23. Map 遍历

Map 是键值对集合，提供 forEach、keys()、values()、entries() 方法，默认迭代器为 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) { /* 等价于 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); }

总结：如何选择遍历方法？

① 基础数组遍历：优先 for...of（灵活）或 forEach（简洁）

② 需返回新数组：map()（转换）或 filter()（筛选）

③ 需条件查找：find()（找元素）或 findIndex()（找索引）

④ 需聚合结果：reduce()（求和、分组等复杂逻辑）

⑤ 对象遍历：优先 Object.entries()（键值对）或 Reflect.ownKeys()（全属性）

⑥ 可迭代对象（Map/Set）：直接用 for...of 或内置 forEach

到此这篇关于JS中24种遍历方法从基础到进阶的文章就介绍到这了,更多相关JS遍历方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！