[[348668]]

在數(shù)組中的每個(gè)元素上一次操作的方法，稱(chēng)為迭代方法。數(shù)組的迭代方法與循環(huán)緊密相關(guān)。

一、方法

1. Array.forEach()

forEach()方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)(一個(gè)回調(diào)函數(shù))?？梢允褂肹forEach()將數(shù)組中的每個(gè)元素打印到文檔。

例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個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

例 2 ：

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

注意：

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

例1：從每個(gè)值乘以2的元素創(chuàng)建一個(gè)新數(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個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

例2：

由于2個(gè)參數(shù)(索引，數(shù)組)是可選的：

var nums1 = [1, 5, 20, 14, 55, 16]; var nums2 = nums1.map(twice); function twice(element) { return (element * 2); }

 

注：

該函數(shù)帶有3個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

3. 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; 
} 

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

例：

var age = [1, 30, 39, 29, 10, 13]; 
    var val = age.filter(isAdult); 
 
    function isAdult(element) { 
        return element >= 18; 
} 

 

注：

該函數(shù)帶有3個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

4. 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); 
    } 

 

注：

該函數(shù)帶有3個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

5. 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; 
    } 

 

注：

該函數(shù)帶有3個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

6. 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; 
    } 

 

注：

該函數(shù)帶有3個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

7. 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; 

 

注：

該函數(shù)帶有3個(gè)參數(shù)：元素值(必填)，元素索引(可選)，數(shù)組本身(可選)。

二、總結(jié)

本文基于JavaScript基礎(chǔ)，介紹了 數(shù)組7種迭代方法。每一種都采用案例加運(yùn)行效果圖展示的方式，讓讀者能夠更容易理解。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

 

代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。

本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。