前端开发小伙伴们，今天介绍除了for循环外的其他几种遍历方法，收藏好了。

除了传统的 for 循环外，ES6 及后续版本引入了一些新的方法，使得遍历更加简洁和高效。以下是 7 种 JavaScript 新增的遍历方法：

1. for...of 循环

• 特点：用于遍历可迭代对象（如数组、字符串、Map、Set 等）的值。
• 示例代码：

const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
console.log(value); // 输出：1 2 3 4 5
}

2. Array.prototype.forEach()

• 特点：数组的 forEach 方法可以对数组中的每个元素执行一次提供的函数。
• 示例代码：

const arr = [1, 2, 3, 4, 5];
arr.forEach((value, index) => {
console.log(`Index: ${index}, Value: ${value}`); // 输出每个元素的索引和值
});

3. for...in 循环

• 特点：用于遍历对象的可枚举属性。
• 示例代码：

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(`Key: ${key}, Value: ${obj[key]}`); // 输出对象的键和值
}
}

4. Array.prototype.map()

• 特点：创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。
• 示例代码：

const arr = [1, 2, 3, 4, 5];
const squaredArr = arr.map(value => value * value);
console.log(squaredArr); // 输出：[1, 4, 9, 16, 25]

5. Array.prototype.filter()

• 特点：创建一个新数组，包含通过所提供函数实现的测试的所有元素。
• 示例代码：

const arr = [1, 2, 3, 4, 5];
const evenArr = arr.filter(value => value % 2 === 0);
console.log(evenArr); // 输出：[2, 4]

6. Array.prototype.reduce()

• 特点：对数组中的所有元素执行一个由你提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。
• 示例代码：

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出：15

7. Object.entries() 和 Object.keys() / Object.values()

• 特点：Object.entries() 返回一个给定对象自身可枚举属性的键值对数组。Object.keys() 返回一个由给定对象的自身可枚举属性组成的数组。Object.values() 返回一个给定对象自身可枚举属性的值的数组。
• 示例代码：

const obj = { a: 1, b: 2, c: 3 };

// 使用 Object.entries()
for (const [key, value] of Object.entries(obj)) {
console.log(`Key: ${key}, Value: ${value}`); // 输出对象的键和值
}

// 使用 Object.keys()
for (const key of Object.keys(obj)) {
console.log(`Key: ${key}, Value: ${obj[key]}`); // 输出对象的键和值
}

// 使用 Object.values()
for (const value of Object.values(obj)) {
console.log(`Value: ${value}`); // 输出对象的值
}

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦

小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。