JavaScript 數(shù)組迭代方法

在數(shù)組中的每個(gè)元素上一次操作的方法，稱為迭代方法。

數(shù)組的迭代方法與循環(huán)緊密相關(guān)。

Array.forEach()

forEach()方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)（一個(gè)回調(diào)函數(shù)）。

我們可以使用forEach()將數(shù)組中的每個(gè)元素打印到文檔。

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

fruits.forEach(function(element, index, array) {
    result.innerHTML += index + ": " + element + "<br>";
});

請(qǐng)注意，該函數(shù)帶有3個(gè)參數(shù)：

• 元素值（必填）

• 元素索引（可選）

• 數(shù)組本身（可選）

由于2個(gè)參數(shù)（索引，數(shù)組）是可選的，因此我們可以跳過(guò)它們：

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

fruits.forEach(function(element) {
    result.innerHTML += element + "<br>";
});

Array.map()

map()方法返回一個(gè)新數(shù)組，不會(huì)改變?cè)紨?shù)組。同時(shí)新數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值，并按照原始數(shù)組元素順序依次處理元素。

注意：map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

以下示例從每個(gè)值乘以2的元素創(chuàng)建一個(gè)新數(shù)組：

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

function twice(element, index, array) {
   return (element * 2);
}

請(qǐng)注意，該函數(shù)帶有3個(gè)參數(shù)：

• 元素值（必填）

• 元素索引（可選）

• 數(shù)組本身（可選）

由于2個(gè)參數(shù)（索引，數(shù)組）是可選的，因此我們可以跳過(guò)它們：

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的某些元素過(guò)濾掉，然后返回剩下的元素。其主要原理是 filter會(huì)把傳入的函數(shù)依次作用于每個(gè)元素，然后根據(jù)返回值是 true 還是false決定保留還是丟棄該元素。

下面的示例，使用值等于或大于18的元素創(chuàng)建一個(gè)新數(shù)組：

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

function isAdult(element, index, array) {
    return element >= 18;
}

請(qǐng)注意，該函數(shù)帶有3個(gè)參數(shù)：

• 元素值（必填）

• 元素索引（可選）

• 數(shù)組本身（可選）

由于2個(gè)參數(shù)（索引，數(shù)組）是可選的，因此我們可以跳過(guò)它們：

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

function isAdult(element) {
    return element >= 18;
}

Array.reduce()

reduce()方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減，最終計(jì)算為一個(gè)值。

這在數(shù)字中很常見(jiàn)，例如找到數(shù)組中所有數(shù)字的總和。

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

function getTotal(x, y) {
    return (x + y);
}

請(qǐng)注意，該函數(shù)采用4個(gè)參數(shù)：

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

• 元素值（必填）

• 元素索引（可選）

• 數(shù)組本身（可選）

Array.find()

find()方法返回通過(guò)給定檢測(cè)的數(shù)組中的第一個(gè)值。

在下面的示例中，我們將找到等于或大于18的第一個(gè)元素：

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

function myFunc(element) {
    return element >= 18;
}

請(qǐng)注意，該函數(shù)帶有3個(gè)參數(shù)：

• 元素值（必填）

• 元素索引（可選）

• 數(shù)組本身（可選）

Array.findIndex()

findIndex()方法返回通過(guò)給定檢測(cè)的數(shù)組中的第一個(gè)索引值。

在以下示例中，我們將找到等于或大于18的第一個(gè)元素的索引值：

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

function myFunc(element) {
    return element >= 18;
}

請(qǐng)注意，該函數(shù)帶有3個(gè)參數(shù)：

• 元素值（必填）

• 元素索引（可選）

• 數(shù)組本身（可選）

Array.every()

every()方法用于檢測(cè)數(shù)組所有元素是否都符合指定條件（通過(guò)函數(shù)提供檢測(cè)）。

下面的示例檢查所有數(shù)組值是否等于或大于18：

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

document.getElementById("result").innerHTML = bool;

請(qǐng)注意，該函數(shù)帶有3個(gè)參數(shù)：

• 元素值（必填）

• 元素索引（可選）

• 數(shù)組本身（可選）

完整數(shù)組參考

有關(guān)完整的屬性和方法參考，請(qǐng)?jiān)L問(wèn)我們的JavaScript Array 數(shù)組參考。

參考部分包含所有數(shù)組屬性和方法的描述和示例。