高階函數(shù)
高階函數(shù)英文叫Higher-order function右核。那么什么是高階函數(shù)？
JavaScript的函數(shù)其實都指向某個變量殖氏。既然變量可以指向函數(shù)众雷，函數(shù)的參數(shù)能接收變量，那么一個函數(shù)就可以接收另一個函數(shù)作為參數(shù)绎巨，這種函數(shù)就稱之為高階函數(shù)近尚。
一個最簡單的高階函數(shù)：
function add(x, y, f) {
return f(x) + f(y);
}
當(dāng)我們調(diào)用add(-5, 6, Math.abs)時，參數(shù)x场勤，y和f分別接收-5戈锻，6和函數(shù)Math.abs，根據(jù)函數(shù)定義和媳，我們可以推導(dǎo)計算過程為：
x = -5;
y = 6;
f = Math.abs;
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
return 11;
用代碼驗證一下：
'use strict';
function add(x, y, f) {
return f(x) + f(y);
}
var x = add(-5, 6, Math.abs); // 11
console.log(x);
11
map/reduce
map
舉例說明格遭，比如我們有一個函數(shù)f(x)=x2，要把這個函數(shù)作用在一個數(shù)組[1, 2, 3, 4, 5, 6, 7, 8, 9]上留瞳，就可以用map實現(xiàn)如下：
[圖片上傳失敗...(image-96d450-1592792865448)]
由于map()方法定義在JavaScript的Array中拒迅，我們調(diào)用Array的map()方法，傳入我們自己的函數(shù)她倘，就得到了一個新的Array作為結(jié)果：
'use strict';
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);
1,4,9,16,25,36,49,64,81
注意：
map()傳入的參數(shù)是pow璧微，即函數(shù)對象本身。
你可能會想硬梁，不需要map()前硫，寫一個循環(huán)，也可以計算出結(jié)果：
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]));
}
的確可以荧止，但是开瞭，從上面的循環(huán)代碼，我們無法一眼看明白“把f(x)作用在Array的每一個元素并把結(jié)果生成一個新的Array”罩息。
所以嗤详，map()作為高階函數(shù)，事實上它把運(yùn)算規(guī)則抽象了瓷炮，因此葱色，我們不但可以計算簡單的f(x)=x2，還可以計算任意復(fù)雜的函數(shù)娘香，比如苍狰，把Array的所有數(shù)字轉(zhuǎn)為字符串：
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()把一個函數(shù)作用在這個Array的[x1, x2, x3...]上淋昭，這個函數(shù)必須接收兩個參數(shù)，reduce()把結(jié)果繼續(xù)和序列的下一個元素做累積計算安接，其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
比方說對一個Array求和翔忽，就可以用reduce實現(xiàn)：
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
filter
filter也是一個常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素歇式。
和map()類似驶悟，Array的filter()也接收一個函數(shù)。和map()不同的是材失，filter()把傳入的函數(shù)依次作用于每個元素痕鳍，然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。
例如龙巨，在一個Array中笼呆，刪掉偶數(shù)，只保留奇數(shù)旨别，可以這么寫：
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
把一個Array中的空字符串刪掉诗赌，可以這么寫：
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']
可見用filter()這個高階函數(shù)，關(guān)鍵在于正確實現(xiàn)一個“篩選”函數(shù)昼榛。
回調(diào)函數(shù)
filter()接收的回調(diào)函數(shù)境肾，其實可以有多個參數(shù)剔难。通常我們僅使用第一個參數(shù)胆屿，表示Array的某個元素∨脊回調(diào)函數(shù)還可以接收另外兩個參數(shù)非迹，表示元素的位置和數(shù)組本身：
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是變量arr
return true;
});
利用filter，可以巧妙地去除Array的重復(fù)元素：
'use strict';
var
r,
arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
console.log(r.toString());
Run
apple,strawberry,banana,pear,orange
閉包
函數(shù)作為返回值
高階函數(shù)除了可以接受函數(shù)作為參數(shù)外纯趋，還可以把函數(shù)作為結(jié)果值返回憎兽。
我們來實現(xiàn)一個對Array的求和。通常情況下吵冒，求和的函數(shù)是這樣定義的：
function sum(arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum([1, 2, 3, 4, 5]); // 15
但是纯命，如果不需要立刻求和，而是在后面的代碼中痹栖，根據(jù)需要再計算怎么辦亿汞？可以不返回求和的結(jié)果，而是返回求和的函數(shù)揪阿！
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
當(dāng)我們調(diào)用lazy_sum()時疗我，返回的并不是求和結(jié)果，而是求和函數(shù)：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
調(diào)用函數(shù)f時南捂，才真正計算求和的結(jié)果：
f(); // 15
在這個例子中吴裤，我們在函數(shù)lazy_sum中又定義了函數(shù)sum，并且溺健，內(nèi)部函數(shù)sum可以引用外部函數(shù)lazy_sum的參數(shù)和局部變量麦牺，當(dāng)lazy_sum返回函數(shù)sum時，相關(guān)參數(shù)和變量都保存在返回的函數(shù)中，這種稱為“閉包（Closure）”的程序結(jié)構(gòu)擁有極大的威力枕面。
請再注意一點愿卒，當(dāng)我們調(diào)用lazy_sum()時，每次調(diào)用都會返回一個新的函數(shù)潮秘，即使傳入相同的參數(shù)：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false
f1()和f2()的調(diào)用結(jié)果互不影響琼开。
閉包
注意到返回的函數(shù)在其定義內(nèi)部引用了局部變量arr，所以枕荞，當(dāng)一個函數(shù)返回了一個函數(shù)后柜候，其內(nèi)部的局部變量還被新函數(shù)引用，所以躏精，閉包用起來簡單渣刷，實現(xiàn)起來可不容易。
另一個需要注意的問題是矗烛，返回的函數(shù)并沒有立刻執(zhí)行辅柴，而是直到調(diào)用了f()才執(zhí)行。我們來看一個例子：
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];
在上面的例子中瞭吃，每次循環(huán)碌嘀，都創(chuàng)建了一個新的函數(shù)，然后歪架，把創(chuàng)建的3個函數(shù)都添加到一個Array中返回了股冗。
你可能認(rèn)為調(diào)用f1()，f2()和f3()結(jié)果應(yīng)該是1和蚪，4止状，9，但實際結(jié)果是：
f1(); // 16
f2(); // 16
f3(); // 16
全部都是16攒霹！原因就在于返回的函數(shù)引用了變量i怯疤，但它并非立刻執(zhí)行。等到3個函數(shù)都返回時催束，它們所引用的變量i已經(jīng)變成了4集峦，因此最終結(jié)果為16。
返回閉包時牢記的一點就是：返回函數(shù)不要引用任何循環(huán)變量泣崩，或者后續(xù)會發(fā)生變化的變量少梁。
如果一定要引用循環(huán)變量怎么辦？方法是再創(chuàng)建一個函數(shù)矫付，用該函數(shù)的參數(shù)綁定循環(huán)變量當(dāng)前的值凯沪，無論該循環(huán)變量后續(xù)如何更改，已綁定到函數(shù)參數(shù)的值不變：
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];
f1(); // 1
f2(); // 4
f3(); // 9
注意這里用了一個“創(chuàng)建一個匿名函數(shù)并立刻執(zhí)行”的語法：
(function (x) {
return x * x;
})(3); // 9
理論上講买优，創(chuàng)建一個匿名函數(shù)并立刻執(zhí)行可以這么寫：
function (x) { return x * x } (3);
但是由于JavaScript語法解析的問題妨马，會報SyntaxError錯誤挺举，因此需要用括號把整個函數(shù)定義括起來：
(function (x) { return x * x }) (3);
通常，一個立即執(zhí)行的匿名函數(shù)可以把函數(shù)體拆開烘跺，一般這么寫：
(function (x) {
return x * x;
})(3);
說了這么多湘纵，難道閉包就是為了返回一個函數(shù)然后延遲執(zhí)行嗎？
當(dāng)然不是滤淳！閉包有非常強(qiáng)大的功能梧喷。舉個栗子：
在面向?qū)ο蟮某绦蛟O(shè)計語言里，比如Java和C++脖咐，要在對象內(nèi)部封裝一個私有變量铺敌，可以用private修飾一個成員變量站故。
在沒有class機(jī)制历等，只有函數(shù)的語言里，借助閉包两疚，同樣可以封裝一個私有變量派歌。我們用JavaScript創(chuàng)建一個計數(shù)器：
'use strict';
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
它用起來像這樣：
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
在返回的對象中弯囊，實現(xiàn)了一個閉包，該閉包攜帶了局部變量x胶果，并且匾嘱，從外部代碼根本無法訪問到變量x。換句話說稽物，閉包就是攜帶狀態(tài)的函數(shù)奄毡，并且它的狀態(tài)可以完全對外隱藏起來折欠。
閉包還可以把多參數(shù)的函數(shù)變成單參數(shù)的函數(shù)贝或。例如，要計算xy可以用Math.pow(x, y)函數(shù)锐秦，不過考慮到經(jīng)常計算x2或x3咪奖，我們可以利用閉包創(chuàng)建新的函數(shù)pow2和pow3：
'use strict';
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
// 創(chuàng)建兩個新函數(shù):
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(5)); // 25
console.log(pow3(7)); // 343
generator
generator（生成器）是ES6標(biāo)準(zhǔn)引入的新的數(shù)據(jù)類型。一個generator看上去像一個函數(shù)酱床，但可以返回多次羊赵。
ES6定義generator標(biāo)準(zhǔn)的哥們借鑒了Python的generator的概念和語法，如果你對Python的generator很熟悉扇谣，那么ES6的generator就是小菜一碟了昧捷。如果你對Python還不熟，趕快惡補(bǔ)Python教程罐寨！
我們先復(fù)習(xí)函數(shù)的概念靡挥。一個函數(shù)是一段完整的代碼，調(diào)用一個函數(shù)就是傳入?yún)?shù)鸯绿，然后返回結(jié)果：
function foo(x) {
return x + x;
}
var r = foo(1); // 調(diào)用foo函數(shù)
函數(shù)在執(zhí)行過程中跋破，如果沒有遇到return語句（函數(shù)末尾如果沒有return簸淀，就是隱含的return undefined;），控制權(quán)無法交回被調(diào)用的代碼毒返。
generator跟函數(shù)很像租幕，定義如下：
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
generator和函數(shù)不同的是，generator由function*定義（注意多出的*號）拧簸，并且劲绪，除了return語句，還可以用yield返回多次盆赤。
大多數(shù)同學(xué)立刻就暈了珠叔，generator就是能夠返回多次的“函數(shù)”？返回多次有啥用弟劲？
還是舉個栗子吧祷安。
我們以一個著名的斐波那契數(shù)列為例，它由0兔乞，1開頭：
0 1 1 2 3 5 8 13 21 34 ...
要編寫一個產(chǎn)生斐波那契數(shù)列的函數(shù)汇鞭，可以這么寫：
function fib(max) {
var
t,
a = 0,
b = 1,
arr = [0, 1];
while (arr.length < max) {
[a, b] = [b, a + b];
arr.push(b);
}
return arr;
}
// 測試:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
函數(shù)只能返回一次，所以必須返回一個Array庸追。但是霍骄，如果換成generator，就可以一次返回一個數(shù)淡溯，不斷返回多次读整。用generator改寫如下：
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
直接調(diào)用試試：
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
直接調(diào)用一個generator和調(diào)用函數(shù)不一樣，fib(5)僅僅是創(chuàng)建了一個generator對象咱娶，還沒有去執(zhí)行它米间。
調(diào)用generator對象有兩個方法，一是不斷地調(diào)用generator對象的next()方法：
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}
next()方法會執(zhí)行g(shù)enerator的代碼膘侮，然后屈糊，每次遇到yield x;就返回一個對象{value: x, done: true/false}，然后“暫颓砹耍”逻锐。返回的value就是yield的返回值，done表示這個generator是否已經(jīng)執(zhí)行結(jié)束了雕薪。如果done為true昧诱，則value就是return的返回值。
當(dāng)執(zhí)行到done為true時所袁，這個generator對象就已經(jīng)全部執(zhí)行完畢盏档，不要再繼續(xù)調(diào)用next()了。
第二個方法是直接用for ... of循環(huán)迭代generator對象纲熏，這種方式不需要我們自己判斷done:
'use strict'
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
for (var x of fib(10)) {
console.log(x); // 依次輸出0, 1, 1, 2, 3, ...
}
generator和普通函數(shù)相比妆丘，有什么用锄俄？
因為generator可以在執(zhí)行過程中多次返回，所以它看上去就像一個可以記住執(zhí)行狀態(tài)的函數(shù)勺拣，利用這一點奶赠，寫一個generator就可以實現(xiàn)需要用面向?qū)ο蟛拍軐崿F(xiàn)的功能。例如药有，用一個對象來保存狀態(tài)毅戈，得這么寫：
var fib = {
a: 0,
b: 1,
n: 0,
max: 5,
next: function () {
var
r = this.a,
t = this.a + this.b;
this.a = this.b;
this.b = t;
if (this.n < this.max) {
this.n ++;
return r;
} else {
return undefined;
}
}
};
用對象的屬性來保存狀態(tài)，相當(dāng)繁瑣愤惰。
generator還有另一個巨大的好處苇经，就是把異步回調(diào)代碼變成“同步”代碼。這個好處要等到后面學(xué)了AJAX以后才能體會到宦言。
沒有g(shù)enerator之前的黑暗時代扇单，用AJAX時需要這么寫代碼：
ajax('http://url-1', data1, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-2', data2, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-3', data3, function (err, result) {
if (err) {
return handle(err);
}
return success(result);
});
});
});
回調(diào)越多，代碼越難看奠旺。
有了generator的美好時代蜘澜，用AJAX時可以這么寫：
try {
r1 = yield ajax('http://url-1', data1);
r2 = yield ajax('http://url-2', data2);
r3 = yield ajax('http://url-3', data3);
success(r3);
}
catch (err) {
handle(err);
}
看上去是同步的代碼，實際執(zhí)行是異步的响疚。
