函数式编程（四）

2019年8月25日 130次阅读 来源: 林小新

我们接下来引见函数式语言中3个罕见的函数：Map,Filter,Reduce。

敕令式代码与声明式代码

前面我们引见了函数式编程中罕见的几种函数，下面我们要最先转变观念了。

敕令式代码的意义就是，我们经由过程编写一条又一条指令去让计算机实行一些行动，这个中平常都邑涉及到许多冗杂的细节。 而声明式就要文雅许多了，我们经由过程写表达式的体式格局来声明我们想干什么，而不是经由过程一步一步的指导。

// 敕令式
const makes = [];
for (i = 0; i < cars.length; i++) {
  makes.push(cars[i].make);
}

// 声明式
var makes = cars.map(function(car){ return car.make; });

我们看下es5 Map,Filter,Reduce函数的简朴完成。

Array.prototype.map = function(f) {
    const newArray = [];
    const O = Object(this);
    for (let i = 0; i < O.length; i++) {
        newArray[i] = f(O[i]);
    }
    return newArray;
}


Array.prototype.filter = function(pred) {
    const newArray = [];
    for (var i = 0; i < this.length; ++i) {
        if (pred(this[i]))
            newArray[newArray.length] = this[i];
    }
    return newArray;
}

Array.prototype.reduce = function(f, start) {
    var acc = start;
    for (var i = 0; i < this.length; ++i)
        acc = f(this[i], acc); // f() 接收2个参数
    return acc;
};

这3个罕见的函数会在我们函数式编程中经常出现的三个函数。
有一点须要申明的是，for轮回是自然语言的处理结果，永远是比map快的。这个就须要你本身在编写代码的时刻对利害举行衡量。

一段函数式编程的综合运用

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
        <script>
            requirejs.config({
                paths: {
                    ramda: 'https://cdnjs.cloudflare.com/ajax/libs/ramda/0.13.0/ramda.min',
                    jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min'
                }
            });

            require([
                'ramda',
                'jquery'
                ],
                   (_, $) => {
                    const Impure = {
                        getJSON: _.curry((callback, url) => {
                            $.getJSON(url, callback);
                        }),

                        setHtml: _.curry((sel, html) => {
                            $(sel).html(html);
                        })
                    };

                    const img = url => $('<img />', { src: url });

                    const trace = _.curry((tag, x) => {
                      console.log(tag, x);
                      return x;
                    });

                    const url = t => 'https://api.flickr.com/services/feeds/photos_public.gne?tags=' + t + '&format=json&jsoncallback=?';

                    const mediaUrl = _.compose(_.prop('m'), _.prop('media'));

                    const srcs = _.compose(_.map(mediaUrl), _.prop('items'));

                    const images = _.compose(_.map(img), srcs);

                    const renderImages = _.compose(Impure.setHtml("body"), images);

                    const app = _.compose(Impure.getJSON(renderImages), url);

                    app("cats");
                }
            );
        </script>
    </head>
    <body></body>
</html>
    原文作者：林小新
    原文地址: https://segmentfault.com/a/1190000009325566
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞