JavaScript 常見 高階函數的使用

其實就是函數來的 ，下面講常見的幾種高階函數： 三個：

filter / map / reduce

1.Array filter() 方法

如果有數組： let arr = [60,50,105,99,153,125,29]; 如果要把小于100 的過濾出來，那麼：

其實這個方法有過濾器的意思，是以就是過濾，他的參數是一個函數，函數的參數就是這個周遊值，其次這個函數一定得傳回一個 Boolean 型，為true時 吧這個值傳回裝進一個新數組，為false則不加入新數組，到最後結束就 把 整個新數組當傳回值傳回：

<script>
    let arr = [60,50,105,99,153,125,29];
    //先擷取到大于100 的數
    arr = arr.filter(function (item){
        return item < 100;
    });
    
//列印
    for (const number of arr) {
        console.log(number);
    }
  </script>      

注意： filter() 不會對空數組進行檢測。

注意： filter() 不會改變原始數組。

2. Array map() 方法  

其實 map 也一樣 不會更新數組 他傳回的是一個新數組，其次，他對每個元素進行周遊，他傳回的不是布爾型，傳回什麼都可以，你傳回什麼 我就往裡面裝什麼：

<script>
    let arr = [60,50,105,99,153,125,29];
    //直接周遊 然後每個元素*2 然後更新數組即可
    arr = arr.map(function (item){
        return item *= 2;
    });

//列印
    for (const number of arr) {
        console.log(number);
    }
  </script>      

因為他有這個特性，是以他可以直接放入方法：

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}      

可以看出 Math.sqrt是個球平方根的函數，是的 他是一個函數！ 仔細想想即可。

3.reduce() 方法

其實這個有點繞 但是很簡單：

比如我要吧數組裡面的全部值求出來：

<script>
    let arr = [60,50,105,99,153,125,29];
    //直接求出即可
    let total = arr.reduce(function (sum,n){
        return sum + n;
    },0)
    console.log(total);

    /***
     * 這裡我解析一下：
     * reduce 這個函數 第一個參數是個方法，第二個參數是初始值
     * 然後第一個參數中的 第一個參數sum是初始值來的，這個方法每次周遊arr中的元素，放在參數n中
     * 這個方法的傳回值呢就是賦給sum，是以sum就會一直随着周遊而增加n 是以求出來了arr中的總和
     * 
     * 當然你也可以嘗試一下乘或者除， 但是呢 他一定是從左到右（下标0到下标leng-1）
     */

  </script>      

其實吧  注釋文檔寫的很清楚了，蠻簡單的 就是内個 初始值 要注意一下 一般為0；sum類似于靜态的，而n是每次周遊的元素值。

注意: reduce() 對于空數組是不會執行回調函數的。

文法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)      

看下面除了内幾個還有些很好玩的參數：比如下标

參數	描述
function(total,currentValue, index,arr)	必需。用于執行每個數組元素的函數。 函數參數:
initialValue	可選。傳遞給函數的初始值

參數	描述
total	必需。初始值, 或者計算結束後的傳回值。
currentValue	必需。目前元素
currentIndex	可選。目前元素的索引
arr	可選。目前元素所屬的數組對象。

總結：總結：

其實 你得舉一反三：

1、2、3 我這裡講了三個高階函數【常用的】 ，那麼你就得去把他們結合起來：

他們傳回的是一個數組對吧，那你可以用鍊式程式設計 在他們計算完後.xxxx 繼續寫，那麼

你就可以把你要用到的代碼很壓縮成一點點了，這是一個思維。