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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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中读写文件实现代码
2011/10/20 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php图像处理类实例
2015/07/28 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
js实现动态时钟
2020/03/12 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
党校自我鉴定范文
2013/10/02 职场文书
迟到检讨书900字
2014/01/14 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
施工现场安全管理制度
2015/08/05 职场文书