摘要：近期看了好多函數(shù)式編程以及設(shè)計(jì)模式的書和文章，于是想分享一些讓代碼更優(yōu)雅的小技巧。事實(shí)上，不僅是數(shù)學(xué)運(yùn)算，任何函數(shù)式的方法都有可緩存性，這是函數(shù)式編程的一個(gè)明顯的優(yōu)點(diǎn)解構(gòu)嵌套數(shù)組這個(gè)方法和結(jié)合十分有用處。

今天翻了翻一年多前寫的代碼，感覺當(dāng)年年輕的自己寫下的代碼真是圖樣啊（然而現(xiàn)在也沒好到哪里去 /w）。近期看了好多函數(shù)式編程以及設(shè)計(jì)模式的書和文章，于是想分享一些讓JS代碼更優(yōu)雅的小技巧。

假設(shè)我們有這樣的需求，需要先把數(shù)組foo中的對(duì)象結(jié)構(gòu)更改，然后從中挑選出一些符合條件的對(duì)象，并且把這些對(duì)象放進(jìn)新數(shù)組result里。

var foo = [{
    name: "Stark",
    age: 21
},{
    name: "Jarvis",
    age: 20
},{
    name: "Pepper",
    age: 16
}]

//我們希望得到結(jié)構(gòu)稍微不同，age大于16的對(duì)象：
var result = [{
    person: {
        name: "Stark",
        age: 21
    },
    friends: []
},{
    person: {
        name: "Jarvis",
        age: 20
    },
    friends: []
}]

從直覺上我們很容易寫出這樣的代碼：

var result = [];

//有時(shí)甚至是普通的for循環(huán)
foo.forEach(function(person){
    if(person.age > 16){
        var newItem = {
            person: person,
            friends: [];
        };
        result.push(newItem);
    }
})

然而用函數(shù)式的寫法，代碼可以優(yōu)雅得多：

var result = foo
    .filter(person => person.age > 16)
    .map(person => ({
        person: person,
        friends: []
    }))

還有比如在各種文章里說爛了的數(shù)組求和：

var foo = [1, 2, 3, 4, 5];

//不優(yōu)雅
function sum(arr){
    var x = 0;
    for(var i = 0; i < arr.length; i++){
        x += arr[i];
    }
    return x;
}
sum(foo) //15

//優(yōu)雅
foo.reduce((a, b) => a + b) //15

這些只是很簡(jiǎn)單的例子，更多關(guān)于函數(shù)式編程的知識(shí)，可以參考這里：

JS函數(shù)式編程指南 - GitBook

lodash是一個(gè)著名的JS工具庫(kù)，里面存在眾多函數(shù)式的方法和接口，在項(xiàng)目中引入可以簡(jiǎn)化很多冗余的邏輯。

lodash中文文檔

//很難看的嵌套
a(b(c(d(...args))));

//可以這樣改善
_.flowRight(a,b,c,d)(...args)

//或者
_.flow(d,c,b,a)(...args)

在寫一些Canvas游戲或者其他WebGL應(yīng)用的時(shí)候，經(jīng)常有大量的數(shù)學(xué)運(yùn)算，例如：

Math.sin(1)

Math.sin()的性能比較差，如果我們對(duì)精度要求不是太高，我們可以使用_.memoize做一層緩存

var Sin = _.memoize(function(x){
    return Math.sin(x);
})
Sin(1) //第一次使用速度比較慢
Sin(1) //第二次使用有了cache，速度極快

注意此處傳入的x最好是整數(shù)或者較短的小數(shù)，否則memoize會(huì)極其占用內(nèi)存。

事實(shí)上，不僅是數(shù)學(xué)運(yùn)算，任何函數(shù)式的方法都有可緩存性，這是函數(shù)式編程的一個(gè)明顯的優(yōu)點(diǎn)

_.flatten([1, 2], [3, 4]); // => [1, 2, 3, 4]

這個(gè)方法和Promise.all結(jié)合十分有用處。

假設(shè)我們爬蟲程序有個(gè)getFansList方法，它可以根據(jù)傳入的值x，異步從粉絲列表中獲取第 x*20 到 (x+1)*20 個(gè)粉絲，現(xiàn)在我們希望獲得前1000個(gè)粉絲：

var works = [];
for (var i = 0; i < 50; i++) {
    works.push(getFansList(i))
}
Promise.all(works)
    .then(ArrayOfFansList=> _.flatten(ArrayOfFansList))
    .then(result => console.log(result))

前段時(shí)間寫的知乎關(guān)系網(wǎng)爬蟲中就能看到類似的寫法

有些函數(shù)會(huì)產(chǎn)生一個(gè)彈出框/遮罩層，或者負(fù)責(zé)app的初始化，因此這個(gè)函數(shù)是執(zhí)行且只執(zhí)行一次的。這就是所謂的單例模式，_.once大大簡(jiǎn)化了我們的工作量

var initialize = _.once(createApplication);
initialize();
initialize();
// 這里實(shí)際上只執(zhí)行了一次 initialize
// 不使用 once 的話需要自己手寫一個(gè)閉包

有時(shí)我們遇到這樣的情況：

getSomethingAsync()
    .then( a => method1(a) )
    .then( b => method2(b) )
    .then( c => method3(a,b,c) ) //a和b在這里是undefined！！！

只用 Promise 的話，解決方法只有把 a、b 一層層 return 下去，或者聲明外部變量，把a(bǔ)、b放到 Promise 鏈的外部。但無論如何，代碼都會(huì)變得很難看。

用 Generator 可以大大改善這種情況（這里使用了Generator的執(zhí)行器co）：

import co from "co";

function* foo(){
    var a = yield getSomethingAsync();
    var b = yield method1(a);
    var c = yield method2(b);
    var result = yield method3(a,b,c);
    console.log(result);
}

co(foo());

當(dāng)然，Generate 的用處遠(yuǎn)不止如此，在異步遞歸中它能發(fā)揮更大的用處。比如我們現(xiàn)在需要搜索一顆二叉樹中value為100的節(jié)點(diǎn)，而這顆二叉樹的取值方法是異步的（比如它在某個(gè)數(shù)據(jù)庫(kù)中）

import co from "co";

function* searchBinaryTree(node, value){
    var nowValue = yield node.value();
    if(nowValue == value){
        return node;
    }else if(nowValue < value){
        var rightNode = yield node.getRightNode()
        return searchBinaryTree(rightNode, value);
    }else if(nowValue > value){
        var leftNode = yield node.getLeftNode()
        return searchBinaryTree(leftNode, value);
    }
}

co(searchBinaryTree(rootNode, 100))