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 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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初学者最感迷茫的问题小结
2010/03/27 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
php格式文件打开的四种方法
2018/02/24 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
jQuery 动画基础教程
2008/12/25 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
jQuery检测返回值的数据类型
2015/07/13 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python程序中设置HTTP代理
2016/11/06 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Django实现跨域的2种方法
2019/07/31 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
交通安全教育制度
2014/02/02 职场文书
西式结婚主持词
2014/03/14 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2014年图书室工作总结
2014/12/09 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
法人代表证明书范本
2015/06/18 职场文书
民事纠纷协议书
2016/03/23 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书