JavaScript學習筆記（高階函數一）

閉包

function add(x,y,f){
	return f(x) + f(y);
}
//將Math.abs作爲f傳入add函數
var x = add(-5,6,Math.abs);
console.log('add：'+x);

map/reduce

如果我們想把一個函數f(x)=X²作用在一個數組[1,2,3,4,5,6]中，那麼要怎麼實現呢？
首先先用傳統的方法來實現

//定義一個函數 
var f  = function(x){
	return  x * x;
}
var arr = [1,2,3,4,5,6];
var result = [];
for (var i = 0; i < arr.length; i++) {
	//將調用函數的結果push到新的數組中
	result.push(f(i));
}
//遍歷結果數組
console.log('傳統方式：'+result);

由於map()方法定義在JavaScript的Array中，我們調用Array的map(）方法，傳入到我們自己的數組中，

//定義一個函數 
function pow(x){
	return x * x;
}
var arr = [1,2,3,4,5,6];
var result = arr.map(pow);
console.log('map方式：'+result);

我們這樣做一行就搞定了，是不是特別的方便！當然我們也可以有其他的功能，比如：
將Array中的所有數字轉爲字符串：

var arr = [1,2,3,4,5,6];
console.log(arr.map(String));

使用map將字符串變成整數

var arr=['1','2','3'];
var r;
r = arr.map(Number);

reduce

再看reduce的用法，Array的reduce()把一個函數作用在這個Array的【x1,x2,x3…】上，這個函數必須接收兩個參數.
比如對一個Array求和，就可以用reduce實現：

var arr = [1,2,3,4,5,6];
console.log(arr.reduce(function(x,y){
	return x + y;
}));

要把[1,2,3,4,5]變換成整數12345,reduce()也能派上用場：

filter

filter是一個常用的操作，它用於把Array的某些元素過濾掉，然後返回剩下的元素

和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用於每個元素，然後根據返回值是true還是false決定保留還是丟棄該元素。
例如：在一個Array中，刪掉偶數，只保留奇數，可以寫:

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function(x){
    return x % 2 !== 0;
});
console.log(r);

那麼把一個Array中的空字符串刪除，可以寫成：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function(s){
    return s && s.trim();
});
console.log(r);

由此可以看出filter()這個高階函數，關鍵在於正確實現一個“篩選”函數

回調函數

filter()接收的回調函數，其實可以有多個參數，通常我們僅使用第一個參數表示元素的位置和數組本身：

var arr =['a','b','c'];
/**
 * element 數組中的目標元素
 * index 數組中的元素的索引
 * index 整個數組
 */
var r = arr.filter(function(element,index,self){
    console.log(element);
    console.log(index);
    console.log(self);
    return true;
});

利用filter，可以巧妙的去除Array的重複元素：

var 
r,arr = ['apply','strawberry','banana','pear','apply','orange','orange','strawberry'];
r = arr.filter(function(element,index,self){
	//數組元素對應的目標元素和數組中索引相同時就返回，這樣就達到了去掉重複項
    return self.indexOf(element) == index;
});
console.log(r.toString());

sort

排序算法
排序也是程序中經常用到的算法，無論使用冒泡排序還是快速，排序的核心是比較兩個元素的大小。如果是數字，我們可以直接比較，但如果字符串或者兩個對象呢？直接比較數學上的大小是沒有意義的，因此，比較的過程必須通過函數抽象出來。通常規定，對於兩個元素x和y,如果認爲x<y,則返回-1，如果認爲x == y,則返回0，如果認爲x>y,則返回1，這樣，排序算法就不用關心具體的比較過程，而是根據比較結果的直接排序。
JavaScript的Array的sort()方法就是使用排序的，但是排序結果可能讓你大喫一驚：

var arr = [1,34,6,0];
console.log(arr.sort());

我們可以這樣寫排序

var arr = [1,34,6,0];
// console.log(arr.sort());
arr.sort(function(x,y){
    if(x < y){
        return -1;
    }
    if(x > y){
        return 1;
    }
    return 0;
});
console.log(arr);

倒序也是一樣的原理：

var arr = [1,34,6,0];
// console.log(arr.sort());
arr.sort(function(x,y){
    if(x > y){
        return -1;
    }
    if(x < y){
        return 1;
    }
    return 0;
});
console.log(arr);

默認情況下，對字符串排序，是按照ASCII的大小比較的，現在，我們提出排序應該忽略大小寫，按照字母排序，要實現這個算法，不必對現在代碼在加改動，只要我們能定義出忽略大小寫的比較算法就可以實現排序了：

var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function(s1,s2){
    //將字母轉換爲大寫
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if(x1 < x2){
        return -1;
    }
    if(x1 > x2){
        return 1;
    }
    return 0;
});
console.log(arr);

這樣就排序成功了！

Array

對於數組，除了map()、reduce、filter()、sort()這些方法可以傳入一個函數外，Array對象還提供了很多非常實用的高階函數。

every

every()方法可以判斷數組的所有元素是否滿足測試條件
例如：
判斷當前數組中的元素長度是否大於0

var arr = ['Apple','pear','orange'];
console.log(arr.every(function (s){
    return s.length > 0;
}));//true，每個元素都滿足s.length>0
console.log(arr.every(function (s){
    return   s.toLowerCase() === s;
}));//false,因爲不是每個元素都全部是小寫

find

find()方法用於查找符合條件的第一個元素，如果找到了，返回這個元素，否則，返回undefined;

var arr = ['Apple','pear','orange','HKK'];
console.log(arr.find(function (s){
    return s.toLowerCase() === s;
}));//'pear'，因爲pear全部是小寫
console.log(arr.find(function (s){
    return s.toUpperCase() === s;
}));//'HKK',因爲HKK全部是大寫的

findIndex

var arr = ['Apple','pear','orange','HKK'];
console.log(arr.findIndex(function (s){
    return s.toLowerCase() === s;
}));//1.因爲'pear'的索引是1

console.log(arr.findIndex(function (s) {
    return s.toUpperCase() === s;
}));//3，因爲'HKK'的索引是3

forEach

forEach()和map()類似，它也把每個元素依次作用於傳入的函數，但不會返回新的數組。forEach()常用於遍歷數組，因此，傳入的函數不需要返回值：

var arr = ['Apple','pear','orange','HKK'];
arr.forEach(console.log);//依次打印 每個元素

閉包

函數作爲返回值

//我們不是立刻得到進行求和，而是在後面的代碼中使用，就先保存求和的函數！
function lazy_sum(arr) {  
    //定義一個函數用於求和
    var sum = function(){  
        return arr.reduce(function (x,y) {  
            return x + y;
        });
    }
    return sum;
}
//調用lazy_sum時其實是[Function: sum]函數
var f  = lazy_sum([1,2,3,4,5,6,7,8,9,10]);
//這裏纔是真正的調用
console.log(f());

總結：在上面這個例子中，我們在函數 lazy_sum中又定義了一個函數sum，內部函數sum可以引用外部函數lazy_sum的參數和局部變量，當lazy_sum返回函數sum時，相關參數和變量都保存在返回的函數中，這種稱爲"閉包(Closure)"的程序結構擁有極大的威力。

這兩次的調用每次都會返回一個新的函數，雖然傳入的是相同的參數，但是調用的結果不互相影響！

閉包

注意到返回的函數在其定義內部引用了局部變量arr，所以，當現代戰爭函數返回一個函數後，其內部的局部變量還被新函數引用，所以，閉包用起來簡單，實現起來可沒有那麼容易。
另一個需要注意的問題是，返回的函數並沒有立即執行，而是直到調用了f()才執行，我們來看一個例子：

function count() {  
    var arr = [];
    for(var i =  1;i<= 3;i++){
        arr.push(function () {  
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

console.log(f1());
console.log(f2());
console.log(f3());

你可能認爲調用的結果爲1,4,9,只是實際的結果是：

原因在於，返回的函數引用了變量i，但它並非立刻執行。而是3個函數都返回時，它們所引用的變量i已經變成了4，所以最終的結果爲16.
返回閉包時牢記的一點就是：返回函數不要引用任何循環變量，或者後續會發生變化的變量。

如果一定要引用循環變量怎麼辦？方法是再創建一個函數，用該函數的參數綁定循環變量當前的值，無論該循環變量後續如何更改，已綁定到函數參數的值不變：

function count() {  
    var arr = [];
    for(var i =  1;i<= 3;i++){
        arr.push((function (n) {
            return function () {  
                return n * n;
            }  
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

console.log(f1());
console.log(f2());
console.log(f3());

這裏“創建一個匿名函數並立刻執行”的語法：

(function (x) {  
    return x * x;
})(3);

閉包可以返回一個函數延遲執行，但是他還有更強大的功能：
在面向對象的程序設計語言裏，比如Java和C++，要在對象內部封裝一個私有變量，可以用private 修飾一個成員變量。
在沒有class機制，只有函數的語言裏，藉助閉包，同樣可以封裝一個私有變量。我們用js創建一個計數器：

function create_counter(initial) {
    var x = initial || 0;
    return{
        inc:function () {
            x += 1;
            return x;
        }
    }
}
var c1 = create_counter();
console.log(c1.inc());
console.log(c1.inc());
console.log(c1.inc());

在返回的對象中，實現了一個閉包，該閉包攜帶了局部變量x，並且，從外部代碼根本無法訪問到變量x。換句話說，閉包就是攜帶狀態的函數，並且它的狀態可以完全對外隱藏起來。
例如，要計算xy可以用Math.pow(x, y)函數，不過考慮到經常計算x2或x3，我們可以利用閉包創建新的函數pow2和pow3：

//定義一個函數，內部含有一個函數
function make_pow(n){
    return function (x) {  
        return Math.pow(x,n);
    }
}
var pow2 = make_pow(2);
var pow3 = make_pow(3);

console.log(pow2(5));
console.log(pow3(7));

JavaScript學習筆記（高階函數一）