编辑这个页面须要登录或更高权限！

JavaScript 数组迭代方法

在数组中的每个元素上一次操作的方法，称为迭代方法。

数组的迭代方法与循环紧密相关。

Array.forEach()

forEach()方法对数组的每个元素执行一次提供的函数（一个回调函数）。

我们可以使用forEach()将数组中的每个元素打印到文档。

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");

fruits.forEach(function(element, index, array) {
    result.innerHTML += index + ": " + element + "<br>";
});
测试看看‹/›

请注意，该函数带有3个参数：

  • 元素值（必填）

  • 元素索引（可选）

  • 数组本身（可选）

由于2个参数（索引，数组）是可选的，因此我们可以跳过它们：

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");

fruits.forEach(function(element) {
    result.innerHTML += element + "<br>";
});
测试看看‹/›

Array.map()

map()方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素。

注意：map() 不会对空数组进行检测。

以下示例从每个值乘以2的元素创建一个新数组：

var nums1 = [1, 5, 20, 14, 55, 16];
var nums2 = nums1.map(twice);

function twice(element, index, array) {
   return (element * 2);
}
测试看看‹/›

请注意，该函数带有3个参数：

  • 元素值（必填）

  • 元素索引（可选）

  • 数组本身（可选）

由于2个参数（索引，数组）是可选的，因此我们可以跳过它们：

var nums1 = [1, 5, 20, 14, 55, 16];
var nums2 = nums1.map(twice);

function twice(element) {
   return (element * 2);
}
测试看看‹/›

Array.filter()

filter()是JavaScript中Array的常用操作，用于把Array的某些元素过滤掉，然后返回剩下的元素。其主要原理是 filter会把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。

下面的示例，使用值等于或大于18的元素创建一个新数组：

var age = [1, 30, 39, 29, 10, 13];
var val = age.filter(isAdult);

function isAdult(element, index, array) {
    return element >= 18;
}
测试看看‹/›

请注意，该函数带有3个参数：

  • 元素值（必填）

  • 元素索引（可选）

  • 数组本身（可选）

由于2个参数（索引，数组）是可选的，因此我们可以跳过它们：

var age = [1, 30, 39, 29, 10, 13];
var val = age.filter(isAdult);

function isAdult(element) {
    return element >= 18;
}
测试看看‹/›

Array.reduce()

reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

这在数字中很常见，例如找到数组中所有数字的总和。

var nums = [10, 20, 30, 40, 50];
var sum = nums.reduce(getTotal);

function getTotal(x, y) {
    return (x + y);
}
测试看看‹/›

请注意，该函数采用4个参数：

  • 初始值/先前返回的值（必填）

  • 元素值（必填）

  • 元素索引（可选）

  • 数组本身（可选）

Array.find()

find()方法返回通过给定检测的数组中的第一个值。

在下面的示例中，我们将找到等于或大于18的第一个元素：

var num = [1, 30, 39, 29, 10, 13];
var val = num.find(myFunc);

function myFunc(element) {
    return element >= 18;
}
测试看看‹/›

请注意，该函数带有3个参数：

  • 元素值（必填）

  • 元素索引（可选）

  • 数组本身（可选）

Array.findIndex()

findIndex()方法返回通过给定检测的数组中的第一个索引值。

在以下示例中，我们将找到等于或大于18的第一个元素的索引值：

var num = [1, 30, 39, 29, 10, 13];
var val = num.findIndex(myFunc);

function myFunc(element) {
    return element >= 18;
}
测试看看‹/›

请注意，该函数带有3个参数：

  • 元素值（必填）

  • 元素索引（可选）

  • 数组本身（可选）

Array.every()

every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供检测）。

下面的示例检查所有数组值是否等于或大于18：

var nums = [1, 30, 39, 29, 10, 13];
var bool = nums.every(function (element) {
    return element >= 18;
});

document.getElementById("result").innerHTML = bool;
测试看看‹/›

请注意，该函数带有3个参数：

  • 元素值（必填）

  • 元素索引（可选）

  • 数组本身（可选）

完整数组参考

有关完整的属性和方法参考，请访问我们的JavaScript Array 数组参考。

参考部分包含所有数组属性和方法的描述和示例。

JavaScript 事件(Events)JavaScript 数组方法

JavaScript菜鸟教程
JavaScript 对象
JavaScript 函数
JS HTML DOM
JS 浏览器BOM
AJAX 菜鸟教程
JavaScript 参考手册