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 相关文章推荐
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
原生js实现验证码功能
Mar 16 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
详解vue 图片上传功能
Apr 30 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 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常用表单验证类用法实例
2015/06/18 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
JS与框架页的操作代码
2010/01/17 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
Python struct模块解析
2014/06/12 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
小小聊天室Python代码实现
2016/08/17 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python实现人民币大写转换
2018/06/20 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
《恐龙》教学反思
2014/04/27 职场文书
红色故事演讲稿
2014/05/22 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
工作岗位职责范本
2015/02/15 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
你真的会用Mysql的explain吗
2022/03/31 MySQL
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS