一篇文章帶你了解JavaScript 數(shù)組迭代方法
在數(shù)組中的每個元素上一次操作的方法，稱為迭代方法。數(shù)組的迭代方法與循環(huán)緊密相關(guān)。
一、方法
1. Array.forEach()
forEach()方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)（一個回調(diào)函數(shù)）?？梢允褂肹forEach()將數(shù)組中的每個元素打印到文檔。
例1：
var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");
fruits.forEach(function(element, index, array) {
result.innerHTML += index + ": " + element + "<br>";
});
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
例 2 ：
由于2個參數(shù)（索引，數(shù)組）是可選的。
var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");
fruits.forEach(function(element) {
result.innerHTML += element + "<br>";
});
2. Array.map()
map()方法返回一個新數(shù)組，不會改變原始數(shù)組。同時新數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值，并按照原始數(shù)組元素順序依次處理元素。
注意：
map() 不會對空數(shù)組進行檢測。
例1：從每個值乘以2的元素創(chuàng)建一個新數(shù)組。
<script>
function myFunc() {
var nums1 = [1, 5, 20, 14, 55, 16];
var nums2 = nums1.map(twice);
document.getElementById("result").innerHTML = nums2;
}
function twice(element, index, array) {
return (element * 2);
}
</script>
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
例2：
由于2個參數(shù)（索引，數(shù)組）是可選的：
var nums1 = [1, 5, 20, 14, 55, 16];
var nums2 = nums1.map(twice);
function twice(element) {
return (element * 2);
}
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
3. Array.filter()
filter()是JavaScript中Array的常用操作，用于把Array的某些元素過濾掉，然后返回剩下的元素。其主要原理是 filter會把傳入的函數(shù)依次作用于每個元素，然后根據(jù)返回值是 true 還是false決定保留還是丟棄該元素。
例：使用值等于或大于18的元素創(chuàng)建一個新數(shù)組。
var age = [1, 30, 39, 29, 10, 13];
var val = age.filter(isAdult);
function isAdult(element, index, array) {
return element >= 18;
}由于2個參數(shù)（索引，數(shù)組）是可選的，因此例：可以跳過它們：
例：
var age = [1, 30, 39, 29, 10, 13];
var val = age.filter(isAdult);
function isAdult(element) {
return element >= 18;
}
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
4. Array.reduce()
reduce()方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。
這在數(shù)字中很常見，例如找到數(shù)組中所有數(shù)字的總和。
例：
var nums = [10, 20, 30, 40, 50];
var sum = nums.reduce(getTotal);
function getTotal(x, y) {
return (x + y);
}
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
5. Array.find()
find()方法返回通過給定檢測的數(shù)組中的第一個值。
將找到等于或大于18的第一個元素：
例：
var num = [1, 30, 39, 29, 10, 13];
var val = num.find(myFunc);
function myFunc(element) {
return element >= 18;
}
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
6. Array.findIndex()
findIndex()方法返回通過給定檢測的數(shù)組中的第一個索引值。
例：將找到等于或大于18的第一個元素的索引值。
var num = [1, 30, 39, 29, 10, 13];
var val = num.findIndex(myFunc);
function myFunc(element) {
return element >= 18;
}
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
7. Array.every()
every()方法用于檢測數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供檢測）。
例：檢查所有數(shù)組值是否等于或大于18。
var nums = [1, 30, 39, 29, 10, 13];
var bool = nums.every(function (element) {
return element >= 18;
});
document.getElementById("result").innerHTML = bool;
注：
該函數(shù)帶有3個參數(shù)：元素值（必填），元素索引（可選），數(shù)組本身（可選）。
二、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了 數(shù)組7種迭代方法。每一種都采用案例加運行效果圖展示的方式，讓讀者能夠更容易理解。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學(xué)習(xí)有幫助。
