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

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

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

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

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

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

var result = [];

//有時甚至是普通的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

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

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

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

lodash中文文檔

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

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

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

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

Math.sin(1)

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

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

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

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

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

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

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

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))

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

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

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

有時我們遇到這樣的情況：

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

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

用 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());

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

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))