JavaScript進階系列02,函式作為引數以及在陣列中的應用

有時候，把函式作為引數可以讓程式碼更簡潔。

        var calculator = {
            calculate: function(x, y, fn) {
                return fn(x, y);
            }
        };
        var sum = function(x, y) { return x + y; },
            diff = function (x, y) { return x - y; };
        var sumResult = calculator.calculate(2, 1, sum),
            diffResult = calculator.calculate(2, 1, diff);
        alert(sumResult + " " + diffResult);

變數sum和diff代表的函式引數和calculator物件的calculate方法的前2個引數保持一致。

 

□ 陣列的every, some, filter方法引數可以是函式

 

       var fruit = ["apples", "oranges", "bananas", "grapes"];
        //判斷是否是字串
        function isString(value, index, array) {
            return typeof value == "string";
        }
        //判斷每個陣列長度是否為1
        function isLengthOne(value, index, array) {
            return value.length === 1;
        }
        //判斷是否有g開頭的
        function startsWithG(value, index, array) {
            return value[0] === "g";
        }
        //過濾以a和b開頭的陣列元素
        function startsWithAB(value, index, array) {
            return value[0] === "a" || value[0] === "b";
        }
        var result = fruit.filter(startsWithAB);     
        //列印
        alert(fruit.every(isString));//判斷每個陣列元素的型別
        alert(fruit.every(isLengthOne));//判斷是否每個陣列元素都為1
        alert(fruit.some(startsWithG));//判斷是否有一些以G開頭
        alert(result); //過濾結果

 

以上，every, some, filter方法引數大致是every(value, index, array, fn),所以自定義函式的引數必須和這前3個引數保持一致。

 

□ 陣列的forEach, map方法引數可以是函式

※ 陣列的forEach方法

        var fruit = ["apples", "oranges", "bananas", "grapes"];
        function doSth(value, index, array) {
            alert(value);
        }
        fruit.forEach(doSth);

forEach方法，只針對陣列元素進行操作，不返回新的陣列。

 

※ 陣列的map方法

        var fruit = ["apples", "oranges", "bananas", "grapes"];
        function doMap(value, index, array) {
            return "i like " + value;
        }
        var result = fruit.map(doMap);
        alert(result); 

map方法，不僅對陣列元素操作，而且返回新的陣列。          

 

“JavaScript進階系列”包括：

JavaScript進階系列01,函式的宣告，函式引數，函式閉包

JavaScript進階系列02,函式作為引數以及在陣列中的應用

JavaScript進階系列03,通過硬編碼、工廠模式、建構函式建立JavaScript物件

JavaScript進階系列04,函式引數個數不確定情況下的解決方案

JavaScript進階系列05,事件的執行時機, 使用addEventListener為元素同時註冊多個事件,事件引數

JavaScript進階系列06,事件委託

JavaScript進階系列07,滑鼠事件