JavaScript与函数式编程
JavaScript与函数式编程
绝大多数编程语言都会有函数的概念(或者说所有的?我不太确定),他们都可以做出类似的操作:
function(x) {
return x * x
}
但是Javascript更适合函数式编程,因为函数对于js来说,是一等公民。
我们可以把匿名函数赋值给一个变量,比如:
let pow = function(x) {
return x * x
}
然后我们可以将这个函数赋值给另一个变量:
let comeon = pow
comeon(x)
这样做和直接调用pow(x)
是一样的效果。
甚至于我们可以将函数作为参数传入另一个函数,这样,诸多小函数可以汇聚在一起,变得异常强大!
filter()
OK,我们接下来看一些比较基础的例子。
首先是filter()
,这是我最喜欢的函数之一。filter()
方法会创建一个新的数组,并且我们可以传入一个判断函数,将符合条件的元素,放入新的数组。
现在我们有一个数组,里面存放了很多游戏,每个元素都记录了该游戏需要花多少钱:
let games = [
{
name: '英雄联盟',
cost: 45
},
{
name: '穿越火线',
cost: 888
},
{
name: '魔兽世界',
cost: 75
},
{
name: '征途',
cost: 1000000
}
]
然后我们需要找出,花费不超过一百元的游戏,该怎么做呢?
可能是这样:
let target = []
for(let i = 0; i < games.length; i++) {
if(games[i].cost <= 100) {
target.push(games[i])
}
}
这是大家从大学开始学C语言的时候就会用的方法。但是我现在想用filter()
方法重写它:
let target = games.filter((game) => {
return game.cost <= 100
})
Wow! Awesome!
我稍微解释一下,防止有同学没有看懂,这里传入了一个函数,函数接收了一个参数,这个参数就是games的每一个元素依次传入的值,在每一次传入之后,我们都返回一个逻辑值,这个逻辑值取决于该游戏的cost
是否小于100,如果返回了true
该元素就会被放到新的数组里去,反之同理。
注意:
filter()
不会对空数组进行检测filter()
不会改变原始数组
实际上,filter内部的处理方法可能和我们使用for循环一模一样!但是我们利用函数式编程,写了更少的代码、更少的逻辑。Less code! Less time! Less bug!
这就是函数式编程的美妙之处。
map()
我们现在先看回之前写的数组:
let games = [
{
name: '英雄联盟',
cost: 45
},
{
name: '穿越火线',
cost: 888
},
{
name: '魔兽世界',
cost: 75
},
{
name: '征途',
cost: 1000000
}
]
现在我们要把每一款游戏的名字都拿出来,组成一个新的数组。
这种操作是非常常见的,比如我们使用React,向服务器请求了JSON数据,接下来需要在这里渲染名字,那里渲染价格……等等。
let gameName = games.map((item) => {
return item.name
})
我们甚至可以做出更多的骚操作,比如说:
let gameName = games.map((item) => {
return `${item.name}是一个${item.cost > 100? '坑钱游戏':'良心游戏'}`
})
得到结果["英雄联盟是一个良心游戏", "穿越火线是一个坑钱游戏", "魔兽世界是一个良心游戏", "征途是一个坑钱游戏"]
Wow! Awesome! 只能用优雅两个字来形容!
reduce()
reduce()
单词本身是减少的意思,但是实际上你可以将reduce()
理解为求和(事实并不如此,reduce更加强大且灵活,但是此时可以暂时这么理解,更多特性可以在下一节看到)。
语言太过苍白无力,我们来看看代码:
let numbers = [1, 2, 3, 4, 5]
let sum = numbers.reduce((total, item) => total + item)
这里是利用了箭头函数可以省略return的特性。
这里的传入的函数接收了两个参数(实际上可以接收四个,但这里不需要后面两个),这两个参数通过英文应该就可以看懂。
reduce()
方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
注意: reduce()
对于空数组是不会执行回调函数的。
这里可以给一个初始值:
let numbers = [1, 2, 3, 4, 5]
let sum = numbers.reduce((total, item) => {
return total + item
}, 10)
之前的和是15,这次加上了一个初始值,就是25了。
实践
假设我们有一个TXT文件。
徐航宇 游泳 4分钟
徐航宇 跑步 1分钟
徐航宇 跳远 3米
刘好 游泳 5分钟
刘好 跑步 2分钟
刘好 跳远 1米
我们用node去读取他,让它变成一个JSON对象,就像这样:
{
"徐航宇": [
{
"项目": "游泳",
"时间": "4分钟"
},
{
"项目":"跑步",
"时间":"1分钟"
}
],
"刘好": [
// ...
]
}
上代码!
import fs from 'fs'
let output = fs.readFileSync('data.txt', 'utf-8')
.trim() // 去掉字符串头尾的空格,返回新数组
.split('\n') // 在换行处截断,组成数组
.map(line => line.split('\t')) // 每一行根据制表符断开,组成数组
这一步之后,我们应该得到什么?
[
["徐航宇", "游泳", "4分钟"],
["徐航宇", "跑步", "1分钟"],
["徐航宇", "跳远", "3米"],
["刘好", "游泳", "5分钟"],
["刘好", "跑步", "2分钟"],
["刘好", "跳远", "1米"]
]
接下来想要变成对象,该怎么做呢?
首先第一步,我们想一想,要想变成最终的JSON数据,我们需要对每一项进行处理:
- 把每一个数组的第一个作为对象的属性名
- 把每一个数组的二三项组成新的对象,放入该属姓名的值中
接下来就该reduce()
出场了:
.reduce((customer, line) => {
// 提取每个数组的第一项,作为传入对象的属姓名
// 如果该项是以前没有的,那么将其初始化为空数组
// 如果该项以前有,那么就不动他
customer[line[0]] = customer[line[0]] === undefined ? [] : customer[line[0]]
customer[line[0]].push({
name: line[1],
time: line[2]
})
return customer
}, {})
这样就成功了!
总结
总而言之,函数式编程如果归根结底,和直接写没有任何区别。但是它提供给了我们一种写更少的代码,完成更多的事情的方法。
人是难免会出错的,代码量越大、错误可能就会越多,所以更少代码的函数式编程,往往意味着:更少的bug。
(完)
JavaScript与函数式编程的更多相关文章
- 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言&前言
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.brucec ...
- 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A:Transducing(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 B: 谦虚的 Monad-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 C:函数式编程函数库-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 全本 | iKcamp翻译 | 《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson - <You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.bruc ...
随机推荐
- 03. Pandas数据结构
03. Pandas数据结构 Series DataFrame 从DataFrame中查询出Series 1. Series Series是一种类似于一维数组的对象,它由一组数据(不同数据类型)以及一 ...
- Azure DevOps 中 Dapr项目自动部署流程实践
注:本文中主要讨论 .NET6.0项目在 k8s 中运行的 Dapr 的持续集成流程, 但实际上不是Dapr的项目部署到K8s也是相同流程,只是k8s的yaml配置文件有所不同 流程选择 基于 Dap ...
- canvas写个简单的小游戏
之前在HTML5 Canvas属性和方法汇总一文中,介绍过Canvas的各种属性以及方法的说明,并列举了自己写的一些Canvas demo,接下来开始写一个简单的小游戏吧,有多简单,这么说吧,代码不到 ...
- safari浏览器fixed后,被软键盘遮盖的问题—【未解决】
safari浏览器fixed后,被软键盘遮盖的问题,已经有好多人问相关的问题,应该是问的角度不一样,还的再次提出咯. 问题描述 测试环境:ios 10.2/10.3 简单来说就是在html5页面中底部 ...
- 干货,看微信小程序后台用户数据如何演变和递增
这几天发现附近小程序又多了好几家,其中有普通小程序和门店小程序,把它们做一个对比,门店小程序更多的像一张名片,只有基本的企业名称.地址.营业时间.电话和门店照片,和普通小程序相比显得逊色许多.楼下的水 ...
- 玩别人玩剩下的:canvas大雪纷飞
canvas大雪纷飞 前言:正好业务触及到canvas,看完api顺手写个雪花效果,因为之前看到过很多次这个,主要看思路,想象力好的可以慢慢去创作属于自己的canvas效果 思路: 利用画圆arc() ...
- 前端基础之CSS(1)
1.css3的新特性有哪些 (1)CSS3选择器(基本.属性.伪类具体见下) (2)CSS3边框与圆角 圆角border-radius 属性:border-top-left-radius 左上角 bo ...
- 【Android开发】View 转 Bitmap
public static Bitmap loadBitmapFromView(View v) { int w = v.getWidth(); int h = v.getHeight(); Bitma ...
- parseFloat的取值
<script type="text/javascript"> document.write(parseFloat("10")) document. ...
- [ Shell ] 通过 Shell 脚本导出 CDL 网表
https://www.cnblogs.com/yeungchie/ 通过 si 导出电路网表,实际上在 Virtuoso 中通过 export - cdl 和 Calibre LVS 的步骤中也是通 ...