热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入理解JavaScript函数式编程技巧与应用(下篇)

本文将继续探讨JavaScript函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例,我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中,节点之间的连线代表路径,连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。

(以下大部分内容翻译自 eloquent Javascript 第7章)

 

来看一个寻路算法的例子:

地图 

如图所示,连线上的数字表示这两点之间的距离,现在要写一个算法能够计算出两点间的最短路径。

别急着往下看,认真地想一下有哪几种可行方案,有哪些可能会碰到的问题。在阅读技术文章时,经常是快速翻阅一遍内容,若有所悟地点点头,然后马上就忘了。如果你真正努力地去解决某个问题,那它就会变成你的问题,它的解决方案也更有意义。

 

首先,用数据来描述这个地图,我们使用一个object:

 roads = { "Point Kiukiu": [ { "to": "Taaoa", "distance": 15 }, { "to": "Hanaiapa", "distance": 19 }, { "to": "Mt Feani", "distance": 15 } ], "Taaoa": [ { "to": "Point Kiukiu", "distance": 15 }, { "to": "Mt Temetiu", "distance": 4 }, { "to": "Atuona", "distance": 3 } ], "Hanaiapa": [ { "to": "Point Kiukiu", "distance": 19 }, { "to": "Airport", "distance": 6 } ], "Mt Feani": [ { "to": "Point Kiukiu", "distance": 15 }, { "to": "Mt Temetiu", "distance": 8 }, { "to": "Airport", "distance": 5 } ], "Mt Temetiu": [ { "to": "Taaoa", "distance": 4 }, { "to": "Mt Feani", "distance": 8 } ], "Atuona": [ { "to": "Taaoa", "distance": 3 }, { "to": "Airport", "distance": 4 }, { "to": "Hanakee pearl lodge", "distance": 1 } ], "Airport": [ { "to": "Mt Feani", "distance": 5 }, { "to": "Atuona", "distance": 4 }, { "to": "Hanaiapa", "distance": 6 }, { "to": "Mt Ootua", "distance": 11 } ], "Hanakee pearl lodge": [ { "to": "Atuona", "distance": 1 }, { "to": "Cemetary", "distance": 6 } ], "Mt Ootua": [ { "to": "Airport", "distance": 11 }, { "to": "Cemetary", "distance": 5 }, { "to": "Hanapaoa", "distance": 3 }, { "to": "Puamua", "distance": 13 } ], "Cemetary": [ { "to": "Hanakee pearl lodge", "distance": 6 }, { "to": "Mt Ootua", "distance": 5 } ], "Hanapaoa": [ { "to": "Mt Ootua", "distance": 3 } ], "Puamua": [ { "to": "Mt Ootua", "distance": 13 }, { "to": "Point Teohotepapapa", "distance": 14 } ], "Point Teohotepapapa": [ { "to": "Puamua", "distance": 14 } ] };

这个roads包含了小岛上所有的路径信息,当我们从某处出发,想要知道有哪些路时,用roads[place]就可以得到,但如果万一打错地名,把place拼错了,就可能意外地返回一个undefined,这可能造成一些很隐蔽的奇怪错误,所以我们用一个函数来获取它

function roadsFrom(place) { var found = roads[place]; if (found == undefined) throw new Error("No place named '" + place + "' found."); else return found;
}
show(roadsFrom("Puamua"));

现在开始尝试一种老老实实的做法,"生成,测试",就像这样:

  1. 生成所有可行的路径。

  2. 在其中找出最短的路径。

对于一个小型的地图来说,生成所有路径的做法是可行的。

 在这之前,我们需要一些新的工具函数,第一个是member,用来检查一个数组中是否包含某个元素。路径是由很多地名组成的数组,当我们到达一个新地方时,我们会调用member来检查这个地方是否已经到过,像这样:

function member(array, value) { var found = false; forEach(array, function(element) { if (element === value) found = true; }); return found;
}
print(member([6, 7, "Bordeaux"], 7)); // true

然而,即使我们要找的值出现在数组的第一项,它也会继续遍历完整个数组,这是没有必要的。当使用for循环时候,我们可以用break来跳出循环,但在forEach中这将不管用,因为循环体是一个函数,break不能跳出函数。解决方法是把forEach改造成能够知道什么时候该停止遍历。

function forEach(array, action) { for (var i = 0; i }

现在,一旦action函数返回false,forEach就会停止遍历。即使member函数使用了forEach,还是显得臃肿且不够通用,它需要在内部维护一个found,最终还要返回它,使得这个函数显得太有针对性和过于麻烦。member实现的是:判断在一组数据中是否有任何满足条件的元素,这个任何可以被抽象出来,成为any函数

function any(test, array) { for (var i = 0; i }
function member(array, value) { return any(partial(op["==="], value), array);
}
print(member(["Fear", "Loathing"], "Denial"));

any遍历整个数组,对每个元素应用test函数,一旦有测试结果为真值,就返回那一项,如果都不满足,返回false。使用any(test, array)就相当于test(array[0]) || test(array[1]) || ...

就像&&有个||为伴, any也有一个与之对应的every:

function every(test, array) { for (var i = 0; i }
show(every(partial(op["!="], 0), [1, 2, - 1]));

我们还需要另一个函数flatten,它接受一个二维数组,将其合并到一个一维数组中:

function flatten(arrays) { var result = []; forEach(arrays, function(array) { forEach(array, function(element) { result.push(element); }); }); return result;
}

当然flattern也可以这样实现:

function flattern2(arrays) { return reduce(function(base, array) { return base.concat(array); }, [], arrays);
}
console.info(flattern2([[1, 3, 5], [2, 4]]));
// 结果为: [1, 3, 5, 2, 4]

但这种做法效率较低,就像反复连接字符串,不如把字符串都加入到数组中然后join起来更高效一样,重复地concat数组会产生很多没必要的临时数组。

在生成路径之前,我们还需要一个函数filter,就像map一样,它接收2个参数,test函数和一个数组array,用于过滤掉array中不满足test的元素。

function filter(test, array) { var result = []; forEach(array, function(element) { if (test(element)) result.push(element); }); return result;
}
show(filter(partial(op[">"], 5), [0, 4, 8, 12]));
// 结果为: [0, 4]

(上面的例子中filter的返回值是否令人不解?记住传给partial的参数,将被用在函数的第一个参数,这里传给partial5,将被作用在op[">"]的第一个参数,所以上面的表达式意思并不是 "所有大于5的值",而是 "5大于的值",即 "比5小的值")

 

现在,整个生成路径的算法看上去应该是这样 -- 从出发点开始,对每一条离开那里的路生成路径,我们使用递归来做:

function possibleRoutes(from, to) { function findRoutes(route) { function notVisited(road) { return ! member(route.places, road.to); } function continueRoute(road) { return findRoutes({ places: route.places.concat([road.to]), length: route.length + road.distance }); } var end = route.places[route.places.length - 1]; if (end == to) return [route]; else return flatten(map(continueRoute, filter(notVisited, roadsFrom(end)))); } return findRoutes({ places: [from], length: 0 });
}
show(possibleRoutes("Point Teohotepapapa", "Point Kiukiu").length); // 11
show(possibleRoutes("Hanapaoa", "Mt Ootua")); // [{ places: ["Hanapaoa", "Mt Ootua"], length: 3 }]

这个函数返回一个路径数组,每一条路径都包含一个所通过节点的数组,和一个总长度。findRoutes递归循环一条路径,返回一个路径的所有延伸。当一条路径的末尾地点是我们的目的地时,它将返回那条路径,因为继续在那条路径上走是没有意义的。如果末尾是其他的地点,我们就继续。包含了flatten/map/filter的那行可能是最难读的,它描述的是:得到所有从当前节点出发的临近节点,从其中过滤掉那些已经访问过的,然后对每一个节点继续进行continueRoute,由于每一个节点都将返回一个路径数组,多个节点map后将返回一个二维数组(第一维对应应节点,第二维对应该节点的路径数组),所以需要用flatten把这二维数组并成一维数组(因为我们并不关心节点,只需要所有的路径数组)。

 这一行做了很多事,这就是抽象带来的好处:不用打满屏幕的代码就能做很复杂的事。

 现在我们有了所有可行的路径,开始尝试找出其中最短的那条。需要一个函数shortestRoute:
 

function shortestRoute(from, to) { var currentShortest = null; forEach(possibleRoutes(from, to), function(route) { if (!currentShortest || currentShortest.length > route.length) currentShortest = route; }); return currentShortest;
}

也许你已经想到了,最短的可以被抽象出来 

 

function minimise(func, array) { var minScore = null; var found = null; forEach(array, function(element) { var score = func(element); if (minScore == null || score }
function getProperty(propName) { return function(object) { return object[propName]; };
}
function shortestRoute(from, to) { return minimise(getProperty("length"), possibleRoutes(from, to));
}

这种最xx的形式还可以抽象出most函数:

function most(arr, comp) { var min = arr[0]; forEach(arr, function(a) { if(comp(min, a)) { min = a; } }); return min;
}
function getProperty(p) { return function(o) { return o[p]; };
}
function minimal(arr, getter) { return most(arr, function(a, b) { return getter(b) } function shortestRoute(from, to) { return minimal(possibleRoutes(from, to), getProperty('length'));
}
console.info(shortestRoute("Point Teohotepapapa", "Point Kiukiu"));

看上去为一个shortestRoute写了这么多行代码,比起第一个版本长了3倍,但这些代码是可重用的。

注意其中的getProperty,这种做法在函数式编程里经常是很有用的。

转:https://www.cnblogs.com/aj3423/archive/2011/02/27/3150515.html



推荐阅读
  • JavaScript 中创建对象的多种方法
    本文详细介绍了 JavaScript 中创建对象的几种常见方式,包括对象字面量、构造函数和 Object.create 方法,并提供了示例代码和属性描述符的解释。 ... [详细]
  • 12月16日JavaScript变量、函数、流程、循环等***线上九期班
    12月16日JavaScript变量、函数、流程、循环等***线上九期班 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Redux入门指南
    本文介绍Redux的基本概念和工作原理,帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库,特别适用于React项目。 ... [详细]
  • 本题探讨了在大数据结构背景下,如何通过整体二分和CDQ分治等高级算法优化处理复杂的时间序列问题。题目设定包括节点数量、查询次数和权重限制,并详细分析了解决方案中的关键步骤。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 本文介绍了如何使用JavaScript的Fetch API与Express服务器进行交互,涵盖了GET、POST、PUT和DELETE请求的实现,并展示了如何处理JSON响应。 ... [详细]
  • 历经三十年的开发,Mathematica 已成为技术计算领域的标杆,为全球的技术创新者、教育工作者、学生及其他用户提供了一个领先的计算平台。最新版本 Mathematica 12.3.1 增加了多项核心语言、数学计算、可视化和图形处理的新功能。 ... [详细]
  • 本文总结了优化代码可读性的核心原则与技巧,通过合理的变量命名、函数和对象的结构化组织,以及遵循一致性等方法,帮助开发者编写更易读、维护性更高的代码。 ... [详细]
  • 深入解析Java虚拟机(JVM)架构与原理
    本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
  • 本文详细介绍如何使用 HTML5 和 JavaScript 实现一个交互式的画板功能。通过具体代码示例,帮助读者理解 Canvas API 的基本用法及其在绘图应用中的实际应用。 ... [详细]
  • 探讨如何修复Visual Studio Code中JavaScript的智能感知和自动完成功能在特定场景下无法正常工作的问题,包括配置检查、语言模式选择以及类型注释的使用。 ... [详细]
  • 本文介绍了如何在多线程环境中实现异步任务的事务控制,确保任务执行的一致性和可靠性。通过使用计数器和异常标记字段,系统能够准确判断所有异步线程的执行结果,并根据结果决定是否回滚或提交事务。 ... [详细]
  • Linux系统中Java程序Too Many Open Files问题的深入解析与解决方案
    本文详细分析了在Linux环境下运行的Java应用程序中可能出现的“Too many open files”异常现象,探讨其成因及解决方法。该问题通常出现在高并发文件访问或大量网络连接场景下,对系统性能和稳定性有较大影响。 ... [详细]
author-avatar
爱这奋斗
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有