JavaScript：js数组/对象遍历方法

一、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。

四、欢迎交流指正，关注我，一起学习。

参考链接：

JS 5种遍历对象的方式_超级切图仔的博客-CSDN博客_js遍历对象