高階函數 Higher-order function
Javascript的函數其實都指向某個變量。既然變量可以指向函數,函數的參數能接收變量,那么一個函數就可以接收另一個函數作為參數,這種函數就稱之為高階函數。
一個最簡單的高階函數:
function add(x, y, f) { return f(x) + f(y);}當我們調用add(-5, 6, Math.abs)時,參數x,y和f分別接收-5,6和函數Math.abs,根據函數定義,我們可以推導計算過程為:
x = -5;y = 6;f = Math.abs;f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;return 11;編寫高階函數,就是讓函數的參數能夠接收別的函數。
map
舉例說明,比如我們有一個函數f(x)=x*x,要把這個函數作用在一個數組[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map實現如下:
由于map()方法定義在JavaScript的Array中,我們調用Array的map()方法,傳入我們自己的函數,就得到了一個新的Array作為結果:
function pow(x) { return x * x;}var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]map()傳入的參數是pow,即函數對象本身。
你可能會想,不需要map(),寫一個循環,也可以計算出結果:
var f = function (x) { return x * x;};var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];var result = [];for (var i=0; i<arr.length; i++) { result.push(f(arr[i]));}的確可以,但是,從上面的循環代碼,我們無法一眼看明白“把f(x)作用在Array的每一個元素并把結果生成一個新的Array”。
所以,map()作為高階函數,事實上它把運算規則抽象了,因此,我們不但可以計算簡單的f(x)=x*x,還可以計算任意復雜的函數,比如,把Array的所有數字轉為字符串:
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']只需要一行代碼。
reduce
再看reduce的用法。Array的reduce()把一個函數作用在這個Array的[x1, x2, x3…]上,這個函數必須接收兩個參數,reduce()把結果繼續和序列的下一個元素做累積計算,其效果就是:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)比方說對一個Array求和,就可以用reduce實現:
var arr = [1, 3, 5, 7, 9];arr.reduce( function (x, y){ return x + y;} ); // 25練習:利用reduce()求積:
'use strict';function PRoduct(arr) { var s = arr.reduce( function(x,y){ return x * y; } ); return s;}// 測試:if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) { alert('測試通過!');}else { alert('測試失敗!');}要把[1, 3, 5, 7, 9]變換成整數13579,reduce()也能派上用場:
var arr = [1, 3, 5, 7, 9];arr.reduce(function (x, y) { return x * 10 + y;}); // 13579如果我們繼續改進這個例子,想辦法把一個字符串13579先變成Array——[1, 3, 5, 7, 9],再利用reduce()就可以寫出一個把字符串轉換為Number的函數。
練習:不要使用JavaScript內置的parseInt()函數,利用map和reduce操作實現一個string2int()函數:
'use strict';function string2int(s) {return s.split('').map(function(x){return x-'0'}).reduce(function(x,y){return x*10+y});}// 測試:if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) { if (string2int.toString().indexOf('parseInt') !== -1) { alert('請勿使用parseInt()!'); } else if (string2int.toString().indexOf('Number') !== -1) { alert('請勿使用Number()!'); } else { alert('測試通過!'); }}else { alert('測試失敗!');}先用s.split(”)把字符串變成字符串數組arr,再用arr.map(function(x){return x-‘0’})將字符串數組變為單個數字的數組arr2,最后再用arr2.reduce(function(x,y){return x*10+y});將數組變為數字。
練習
請把用戶輸入的不規范的英文名字,變為首字母大寫,其他小寫的規范名字。輸入:[‘adam’, ‘LISA’, ‘barT’],輸出:[‘Adam’, ‘Lisa’, ‘Bart’]。
'use strict';function normalize(arr) { //....}// 測試:if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) { alert('測試通過!');}else { alert('測試失敗!');}不支持名字含空格
return arr.map(function(str){return str[0].toUpperCase() + str.substring(1,str.length).toLowerCase()});支持名字含空格。如[‘adam’, ‘LISA huang’, ‘barT’]
return arr.map(function(str){return str.split(' ').map(function(str){return str[0].toUpperCase() + str.substring(1,str.length).toLowerCase()}).join(' ')});新聞熱點
疑難解答