JavaScript数组的5种迭代方法

下面为您详细讲解JavaScript数组的5种迭代方法的完整攻略。

概述

JavaScript数组提供了5种迭代方法，它们分别是：

1. forEach(): 迭代数组中的每一项，可以进行一些操作但无法改变原数组;
2. map(): 对数组中的每一项进行操作并返回新的数组;
3. filter(): 根据指定条件过滤出符合条件的元素组成新的数组;
4. some(): 判断符合条件的元素是否存在，只要找到第一个符合条件的元素就立即返回 true;
5. every(): 判断数组中的所有元素是否符合条件，只有当数组中的所有元素都符合条件时才返回 true。

forEach()

语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数：

1. function(currentValue, index, arr): 必须。回调函数，数组中的每个元素都会执行一次该函数。分别传入当前元素的值、索引、数组对象作为参数;
2. thisValue: 可选。用作函数中 this 的对象。

示例：

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

结果：打印出每个元素的值、索引和整个数组。
输出：

1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

map()

语法：

const new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

参数：

1. callback: 必须。生成新数组元素的函数，传入 currentValue 元素、可选的 index 和 array 参数，函数返回新数组的元素;
2. thisArg: 可选。使用 callback 函数内 this 值。

示例：

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

filter()

语法：

const newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数：

1. callback: 必须。测试是否符合条件的函数，接收当前元素、可选的索引和数组。返回 true 表示该元素被保留，返回 false 表示该元素被过滤;
2. thisArg: 可选。在执行回调函数时，用于指定 this 的值。

示例：

const arr = [2, 4, 5, 7, 10];
const newArr = arr.filter(item => item % 2 == 0);
console.log(newArr); // 输出 [2, 4, 10]

some()

语法：

const test = arr.some(callback(element[, index[, array]])[, thisArg])

参数：

1. callback: 必须。测试数组中的每个元素是否符合条件函数，接收当前元素、可选的索引和数组。返回 true 表示找到符合条件的元素，停止迭代;
2. thisArg: 可选。在执行回调函数时，用于指定 this 的值。

示例：

const arr = [1, 2, 3, 4, 5];
const test = arr.some(item => item > 3);
console.log(test); // 输出 true

every()

语法：

const test = arr.every(callback(element[, index[, array]])[, thisArg])

参数：

1. callback: 必须。测试数组中的每个元素是否符合条件函数，接收当前元素、可选的索引和数组。返回 true 表示继续迭代，返回 false 表示停止迭代;
2. thisArg: 可选。在执行回调函数时，用于指定 this 的值。

示例：

const arr = [2, 4, 8];
const test = arr.every(item => item % 2 == 0);
console.log(test); // 输出 true

以上就是JavaScript数组中的5种迭代方法的完整攻略，希望对您有所帮助。