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 相关文章推荐
javascript中onclick(this)用法介绍
Apr 19 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 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 获得汉字拼音首字母的函数
2009/08/01 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
python爬虫如何解决图片验证码
2021/02/14 Python
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
2014年秋季开学演讲稿
2014/05/24 职场文书
承诺书格式范文
2014/06/03 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
文明班级申报材料
2014/12/24 职场文书
2016春节放假通知范文
2015/08/18 职场文书