关键词

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 元素、可选的 indexarray 参数,函数返回新数组的元素;
  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种迭代方法的完整攻略,希望对您有所帮助。

本文链接:http://task.lmcjl.com/news/11935.html

展开阅读全文