JavaScript 中遍历数组的所有方法
本文最初发表于我的个人博客。
在 JavaScript 中，遍历数组的常用方法是使用for循环。虽然这是一种有效的方法，但还有许多其他方法可以在 JavaScript 中遍历数组。
forEach
forEach允许您遍历数组中的所有元素。例如，像这样的 for 循环：
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
将成为：
arr.forEach((item) => console.log(item));
这样就无需反复使用索引来访问元素，尤其是在数组中的元素是对象时，使用索引访问它们的属性会很麻烦（除非在循环中将其赋值给一个新变量）。
您也可以访问索引：
arr.forEach((item, index) => console.log(item, index));
地图
map遍历数组并返回一个新数组。这在遍历数组并对其进行修改时非常有用。
例如，要在 for 循环中实现这一点：
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + 1;
}
可以通过以下方式在地图上实现：
arr = arr.map((item) => item + 1);
你也可以将其分配给一个新数组：
const newArr = arr.map((item) => item + 1);
您也可以访问索引：
const newArr = arr.map((item, index) => item + index);
减少
reduce允许您遍历数组，并将之前每次迭代的结果累加到当前迭代中。最后，将结果合并为一个最终结果。
例如，假设你想计算数组中所有元素的总和。使用 for 循环，你可以这样做：
let sum = 0;
for (let i = 0; i < arr.length; i++){
sum += arr[i]
}
使用这种reduce方法，你可以这样做：
const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
该accumulator参数是当前迭代之前最后一次迭代的结果，最终返回的值即为该参数的值。默认情况下，其初始值为数组中第一个元素的值，迭代从第二个元素开始。因此，在上面的例子中，第一次迭代的accumulator值为 1，第二个元素currentValue的值为 2。1 + 2 = 3，所以第二次迭代的accumulator值为 3，第二个currentValue元素的值为 3（因为它是数组中位于 2 之后的元素），依此类推。最终，返回值为 10。
您还可以传递参数initialValue来设置初始值，使其与第一个元素不同。如果initialValue提供了该参数，迭代将从第一个元素开始。initialValue如果您不确定数组中是否有元素，传递该参数也很有用，因为reduce如果数组为空且未initialValue提供该参数，则会抛出错误。
使用示例initialValue：
const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
当initialValue设置为 0 时，第一次迭代accumulator将为 0，而currentValue从数组中的第一个元素开始，将为 1。
每一个
every允许您遍历数组并检查数组中所有元素是否都能在提供的回调函数中返回 true。这在您需要遍历数组以确保其符合特定验证流程时非常有用。如果遇到回调函数返回 false 的元素，循环将停止并返回 false。
例如，要测试数组中的所有元素是否都大于 0，可以使用for循环像这样操作：
let allGreater = true;
for (let i = 0; i < arr.length; i++){
if (arr[i] <= 0) {
allGreater = false;
break;
}
}
console.log(allGreater);
要做到这一点，请使用every：
const allGreater = arr.every((item) => item > 0);
console.log(allGreater);
它会测试每个元素是否为真item，> 0如果其中一个元素不是真，它将停止循环并返回 false。
如果你不需要像上面的例子那样将值实际存储在变量中，你可以直接：
console.log(arr.every((item) => item > 0));
你也可以将index作为第二个参数传递item。
一些
与 `.`不同every，some`.` 允许您遍历数组并检查是否至少有一个元素的回调函数返回 true。一旦找到符合条件的元素，循环就会停止并返回 true。如果没有找到符合条件的元素，循环将返回 false。
例如，要使用 for 循环检查数组中是否至少有一个元素大于 0：
let hasGreater = false;
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0) {
hasGreater = true;
break;
}
}
console.log(hasGreater);
要做到这一点，请使用some：
const hasGreater = arr.some((item) => item > 0);
console.log(hasGreater);
如果不需要，也可以省略将其赋值给变量的步骤：
console.log(arr.some((item) => item > 0));
你可以通过将索引作为第二个参数传递给回调函数来访问它。
筛选
filtertrue遍历数组并返回一个新数组，其中只包含回调函数返回的元素。
例如，要获取数组中大于零的元素，可以使用 for 循环按以下方式操作：
const greaterArr = [];
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0){
greaterArr.push(arr[i]);
}
}
console.log(greaterArr);
要做到这一点，请使用fitler：
const greaterArr = arr.filter((item) => item > 0);
console.log(greaterArr);
您还可以通过向回调数组传递第二个参数来访问索引。
寻找
find你可以使用 `is` 循环遍历数组，找到第一个满足特定函数条件的元素。找到元素后，循环停止并返回该元素。如果没有找到满足验证条件的元素，undefined则返回 `null`。这与 `is` 类似，some区别在于 `is`find返回元素，而 ` someis` 只返回一个布尔值。
例如，要使用 for 循环查找数组中大于 0 的元素：
let greaterThan = null;
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0){
greaterThan = arr[i];
break;
}
}
console.log(greaterThan);
要做到这一点，请使用find：
const greaterThan = arr.find((item) => item > 0);
console.log(greaterThan);
您还可以通过向回调数组传递第二个参数来访问索引。
查找索引
这与 `getElementById()` 类似find，区别在于它返回元素的索引。如果未找到元素，则返回 -1。
例如，要使用 for 循环查找数组中大于 0 的元素的索引：
let greaterThan = -1;
for (let i = 0; i < arr.length; i++){
if (arr[i] > 0){
greaterThan = i;
break;
}
}
console.log(greaterThan);
使用findIndex：
const greaterThan = arr.findIndex((item) => item > 0);
console.log(greaterThan);
您还可以通过向回调数组传递第二个参数来访问索引。
浏览器兼容性
需要注意的是，所有这些函数都与现代浏览器兼容，但从IE9开始才兼容IE。因此，如果您需要使代码与旧版浏览器兼容，则可能需要使用Polyfill。
文章来源：https://dev.to/shahednasser/all-the-ways-you-can-loop-arrays-in-javascript-4hlk