JavaScript代码简化技巧实例解析


Posted in Javascript onSeptember 09, 2020

函数式编程可以使您的代码更简单。简单意味着代码易于阅读和理解,可测试和可维护。

在本文中,我描述了一些函数式编程(FP)技巧,您可以使用它们来简化代码,从而使代码更好。

摆脱临时变量和不变性原则

函数式编程倾向于不变性,这种不变性原则意味着在初始化变量之后不会更改它们的值。同样,创建对象或字符串后,您也无需对其进行突变。

如果使用JavaScript编程,则所有变量定义都应使用 const。对于正在阅读您的代码的任何人,常量定义都可以让您高枕无忧:它保证永远不会重新分配变量,因为重新分配是不可能的,所以读者的大脑从跟踪和识别代码中重新分配的负担中解脱出来。

何时需要更改值呢?首先,您可以拥有一个数组:

const fruits = ['apple', 'orange', 'banana']

要将新水果添加到此列表中,该怎么办?解决方案是用新的或更新的值初始化一个新的常量变量,我们可以使用点扩展符复制现有的 fruits 值:

const allFruits = [...fruits, 'pineapple']

您应该在代码的任何地方都遵循不变性原则,因为如果这样做,您的代码将变得更干净。

您知道 fruits 变量的值永远不会改变,并且您第一次看到变量的声明时就知道这一事实,初始化后,在任何可见的 fruits 变量处,您都知道。

摆脱循环

考虑以下循环:

var list = [];
var i = 0;
while (i < rows.length) {
  var row = rows[i];
  var message = {
    childAddress: row[1],
    action: 'switchToBackupNode2',
    role: 'edge'
  };
  list.push(message);
  i += 1;
}

函数编程方法去掉了while循环,并使用map将行处理为一个列表。

const list = rows.map(r => ({ 
  childAddress: r[1],
  action: 'switchToBackupNode2',
  role: 'edge'
 }))

除了摆脱循环之外,这段代码还删除了临时变量 row 和 message 以及循环变量 i。

结果更具可读性,非常清晰。

为了公平起见,要获得此信任级别,您需要首先了解map函数。map函数在函数式编程中无处不在,因此学习它是过渡到FP的重要步骤。

map是程序员用于列表处理的函数之一。处理列表中的数据是FP的重要组成部分,您还应该学习其他列表处理功能:最重要的是 reduce 和 filter 函数。

删除if..else

在我的简化代码的实践中,删除 if 是一个有用的策略。有几种策略可以用于从代码中删除 if 语句,并且应用其中任何一种通常都会得到更清晰、更容易理解的结构。

让我们看一下删除 if 语句的一些策略。

三元运算符

三元运算符是我从变量赋值中去掉 if 语句的主要工具。

考虑以下:

let message;
if (person !== null) {
 message = `hello, ${person}!`
} else {
 message = 'hey there!'
}

上面的代码中有两个问题:

我必须使用非 const 变量 message,因为对于 if 结构,我无法在变量声明中立即给 message 赋值。
考虑到它只完成了声明变量和有条件地为变量赋值的简单任务,代码相当冗长和复杂。
使用三元运算符? 可以在一行中完成相同的工作:

const message = person !== null ? `hello, ${person}!` : 'hey there!'

布尔运算符 && 和 ||

布尔运算符 && 和 || 为 if 语句提供有效的替代方法。

不要这样做:

if (value) {
doStuff(value)
} else {
doStuff(1)
}

改进:

doStuff(value || 1)

这里的逻辑或操作符 || 提供了向函数传递默认值的快速方法。每次不知道或不确定变量是否具有值时,都可以使用相同的技巧:使用 || <default> 作为前缀提供默认值。

这是一个如何使用逻辑与运算符 && 的示例。首先,使用 if 的版本:

if (data) {
sendData(data.value);
}

然后我们使用 && 删除 if :

data && sendData(data.value)

在这里,我们使用 && 来首先检查数据变量是否包含值。如果没有这个检查,当没有值时代码就会崩溃(换句话说,值为 null 或 undefined)。

在这里使用这些运算符时,我们依赖布尔表达式的短路求值。&& 和 || 运算符,当第一部分错误时,JavaScript不会计算表达式的后半部分。

Map 和 查找

使用 map 作为查找 list 是替换一系列if语句的有效方法。考虑以下:

let language;
if (country === 'FI') {
	language = 'Finnish'
} else if (country === 'SE') {
	language = 'Swedish'
} else if (country === 'USA') {
 language = 'English (American)'
} else if (country === 'UK') {
 language = 'English (UK)'
} // etc...

更简洁的方法是使用国家/语言对的Map。

const languages = new Map([
 ['FI', 'Finnish'],
 ['SE', 'Swedish'],
 ['USA', 'English (American)'],
 ['UK', 'English (UK)'],
])
const language = languages.get('SE')
console.log(language) // Swedish

第二种实现要简单得多。该代码立即显示出它的意图。另外,它将 language 变量转换为使用 const。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 #Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 #Javascript
关于vue的列表图片选中打钩操作
Sep 09 #Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 #Javascript
js实现简单抽奖功能
Nov 24 #Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 #Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
You might like
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP中的use关键字概述
2014/07/23 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现清屏的方法
2015/04/30 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python下简易的单例模式详解
2019/04/08 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
《小儿垂钓》教学反思
2014/02/23 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
感谢信格式范文
2015/01/22 职场文书
单位考核聘任报告
2015/03/02 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript