一、js遍历方法
| 序号 | 方法 | 描述 |
| 1 | for | 使用最基本的for循环可以遍历数组 |
| 2 | for of | for...of语句用来遍历可迭代对象（包括数组、Set、Map、字符串等），它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值，而不是索引。 |
| 3 | for in | for...in语句用来遍历对象的可枚举属性，包括自身的属性和继承的属性。 |
| 4 | forEach() | forEach()方法接收一个回调函数作为参数，用于遍历数组中的每一个元素，可修改原数组。 |
| 5 | map() | map()方法也接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回一个新的数组。 |
| 6 | filter() | filter()方法也接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回满足条件的元素，组成一个新的数组。 |
| 7 | find() | find()方法接收一个回调函数作为参数，该回调函数会遍历数组中的每一个元素，并返回一个布尔值。当找到第一个满足条件的元素时，find()方法会立即返回该元素，不再继续遍历数组。如果数组中没有满足条件的元素，则返回 undefined。
|
| 8 | findIndex() | findIndex()方法也接收一个回调函数作为参数，该回调函数会遍历数组中的每一个元素，并返回一个布尔值。当找到第一个满足条件的元素时，findIndex()方法会立即返回该元素的索引值，不再继续遍历数组。 |
| 9 | some() | some()方法接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回一个布尔值，表示是否有至少一个元素满足条件。 |
| 10 | any() | any() 方法用于检查数组中是否包含任何满足指定条件的元素。如果有，则返回 true；否则返回 false。 |
| 11 | every() | every()方法接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回一个布尔值，表示是否所有元素都满足条件。 |
| 12 | reduce() | reduce()方法也接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回一个累加值。 |
二、数组遍历方法详解
2.1、for 循环
使用最基本的 for 循环可以遍历数组。
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
2.2、for of
for...of语句用来遍历可迭代对象（包括数组、Set、Map、字符串等），它可以替代传统的 for 循环和 forEach 方法。for...of循环每次迭代都将返回一个值，而不是索引。
const arr = [1, 2, 3, 4, 5];
for (const num of arr) {
console.log(num);
}
输出结果为：
1
2
3
4
5
for...of 循环还可以遍历字符串，并且能够正确处理 Unicode 字符。
const str = 'hello😀world';
for (const char of str) {
console.log(char);
}
输出结果为：
h
e
l
l
o
😀
w
o
r
l
d
需要注意的是:
for...of 循环不能遍历普通对象，因为它们不是可迭代对象。
对于普通对象，可以使用 for...in 循环来遍历对象的属性。
2.3、for in
for...in语句用来遍历对象的可枚举属性，包括自身的属性和继承的属性。语法如下：
for (variable in object) {
// code to be executed
}
其中，variable 表示属性名，object 表示要遍历的对象。在每次循环中，variable 都会被设置为一个属性名，然后可以通过该属性名来访问对象的属性值。
const person = {
name: 'Alice',
age: 30,
email: 'alice@example.com'
};
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}
输出结果为：
name: Alice
age: 30
email: alice@example.com
需要注意的是，for...in循环遍历的是对象的可枚举属性，不包括不可枚举属性和符号属性。如果要遍历对象的所有属性，可以使用 Object.getOwnPropertyNames()、Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 方法来获取对象的所有属性名。同时，为了避免遍历到继承的属性，可以使用 Object.hasOwnProperty() 方法判断属性是否是对象自身的属性。
2.4、forEach()
forEach()方法接收一个回调函数作为参数，用于遍历数组中的每一个元素。
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
console.log(item);
});
2.5、map()
map() 方法也接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回一个新的数组。
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map(function(item) {
return item * 2;
});
console.log(arr2);
2.6、filter()
filter()方法也接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回满足条件的元素，组成一个新的数组。
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.filter(function(item) {
return item > 2;
});
console.log(arr2);
2.7、find()
find()方法接收一个回调函数作为参数，该回调函数会遍历数组中的每一个元素，并返回一个布尔值。当找到第一个满足条件的元素时，find() 方法会立即返回该元素，不再继续遍历数组。如果数组中没有满足条件的元素，则返回 undefined。
find()方法的语法如下：
参数说明：
item：当前遍历到的元素。index：当前遍历到的元素的下标。array：要遍历的数组。
下面是一个简单的示例，使用 find() 方法查找数组中第一个大于 3 的元素：
const arr = [1, 2, 3, 4, 5];
const result = arr.find(function(item) {
return item > 3;
});
console.log(result); // 输出：4
如果数组中没有满足条件的元素，则返回 undefined：
const arr = [1, 2, 3];
const result = arr.find(function(item) {
return item > 3;
});
console.log(result); // 输出：undefined
2.8、findIndex()
JavaScript 中的 findIndex() 方法和 find() 方法类似，不同的是它返回的是第一个满足条件的索引值，而不是对应的元素值。
findIndex() 方法也接收一个回调函数作为参数，该回调函数会遍历数组中的每一个元素，并返回一个布尔值。当找到第一个满足条件的元素时，findIndex() 方法会立即返回该元素的索引值，不再继续遍历数组。
findIndex() 方法的语法如下：
array.findIndex(function(item, index, array) {
// 满足条件的逻辑代码
});
参数说明：
item：当前遍历到的元素。index：当前遍历到的元素的下标。array：要遍历的数组。
下面是一个示例，使用 findIndex() 方法查找数组中第一个大于 3 的元素的索引值：
const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex(function(item) {
return item > 3;
});
console.log(result); // 输出：3
如果数组中没有满足条件的元素，则返回 -1：
const arr = [1, 2, 3];
const result = arr.findIndex(function(item) {
return item > 3;
});
console.log(result); // 输出：-1
2.9、some()
JavaScript 中的some() 方法是用于判断数组中是否至少有一个元素满足指定的条件，如果是则返回true，否则返回false。
some() 方法接受一个回调函数作为参数，该函数接受三个参数：
当前处理的数组元素。
当前处理的数组元素的索引。
当前的数组对象。
回调函数必须返回一个布尔值。如果数组中至少有一个元素满足该函数的条件，则some() 返回 true，否则返回 false。
下面是 some() 方法的语法：
array.some(function(currentValue, index, arr), thisValue)
其中，thisValue 参数可选，用于设置回调函数中 this 关键字的值。
以下是使用 some() 方法的一个例子，判断数组 arr 中是否包含值为 5 的元素：
let arr = [1, 3, 5, 7, 9];
let hasFive = arr.some(function(num) {
return num === 5;
});
console.log(hasFive); // true
2.10、any()
Array.prototype.any() 方法用于检查数组中是否包含任何满足指定条件的元素。如果有，则返回 true；否则返回 false。
const arr = [1, 2, 3, 4, 5];
const result = arr.any((num) => num > 3);
console.log(result); // true
在上面的代码中，any() 方法用于检查数组 arr 中是否包含任何一个数大于 3 的元素，由于数组中有 4 和 5 两个数大于 3，因此方法返回 true。
需要注意的是，该方法只能用于数组类型。如果想要在其他类型中使用类似的功能，可以使用 some() 方法。
2.11、every()
every() 方法接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回一个布尔值，表示是否所有元素都满足条件。
const arr = [1, 2, 3, 4, 5];
const allEven = arr.every(function(item) {
return item % 2 === 0;
});
console.log(allEven);
2.12、reduce()
reduce() 方法也接收一个回调函数作为参数，用于遍历数组中的每一个元素，并返回一个累加值。
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce(function(prev, curr) {
return prev + curr;
});
console.log(sum);
三、过程记录
3.1、foreach 和 map 都是用于遍历数组或集合的函数，但它们的用途不同
foreach 方法的目的是对数组或集合进行迭代，并执行操作。foreach 方法执行代码块，但不会生成一个新的数组或集合。因此，它对于不需要生成新数据结构的操作很有用，比如打印数组中的元素或更改集合中的元素。
map 方法返回一个新的数组或集合，其中每个元素都是经过函数处理的原始元素。map 方法不会更改原始数组或集合，而是基于它们创建新的数据结构。因此，map 方法很适合需要生成新集合或数组的操作。
例如，假设有一个存储数字的数字数组。要将所有数字加倍并打印结果，可以使用 foreach 方法，如下所示：
let arr = [1, 2, 3, 4, 5];
arr.forEach((num) => {
console.log(num * 2);
});
要生成一个新的数组，其中包含原始数组的每个元素的两倍，请使用 map 方法，如下所示：
let arr = [1, 2, 3, 4, 5];
let doubledArr = arr.map((num) => {
return num * 2;
});
console.log(doubledArr); // Output: [2, 4, 6, 8, 10]
因此，使用 foreach 和 map 取决于您的需求。如果您需要执行操作并不需要生成新的数组或集合，请使用 foreach。如果您需要生成一个新的数组或集合，请使用 map。
四、欢迎交流指正，关注我，一起学习。
参考链接：文章来源：https://www.toymoban.com/news/detail-706921.html
JS 5种遍历对象的方式_超级切图仔的博客-CSDN博客_js遍历对象文章来源地址https://www.toymoban.com/news/detail-706921.html
到了这里，关于JavaScript：js数组/对象遍历方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
