JavaScript代码简化技巧实例解析
函数式编程可以使您的代码更简单。简单意味着代码易于阅读和理解，可测试和可维护。
在本文中，我描述了一些函数式编程（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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
用jQuery简化JavaScript开发分析
jQuery是我最近发现的一个新工具.jQuery开发团队形容jQuery是"一个快捷.简练的JavaScript库,它可以简化HTML文档检查.事件处理.动画执行.并给你的Web页面增加AJAX交互." jQuery初步 你可以免费下载jQuery的最新版本.它由一个明确定义的脚本文件构成,因此你可以随意研究它的源代码.下载JavaScript文件后,你就可以把它放在Web服务器中准备使用.你可以用HTML SCRIPT元素把jQuery库加载到任何Web页面中.src属性应利用文件
-
javascript表格控件：Chgrid，简化型
本着自由共享的精神,把代码帖出来,同时大家也可以一起来测试以及添加新功能,请大家根据网友提出的问题,把自己修改好的版本都帖出来跟在下面,最后作为一款比较全面的表格软件. Chgrid的简单功能介绍: 1:支持自定义排序 2:支持列宽度的拖放 3:支持自定义函数 4:支持分页 5:支持自动编号 6:多浏览器支持,支持ie6,ie7,ff,opera 7:div布局 已知问题: 1:由于使用的div布局,如果使用margin或者padding会改变定义的列宽度,所以目前文字只能居中或者靠左或靠右,不
-
javascript if 的简化代码
a=0 if(a [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] a=0 a?0:(alert(a),alert(1-a)) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 还可以这样写 a=0 a==0 && (alert(a),alert(1-a)) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
AngularJS 路由和模板实例及路由地址简化方法(必看)
最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula
-
javascript下with 的简化代码写法
with (object) statements 参数 object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象. 说明 with 语句通常用来缩短特定情形下必须写的代码量.在下面的例子中,请注意 Math 的重复使用: x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Math.E) 当使用 with 语句时,代码变得更短且更易读: 复制代码 代码如下: with (M
-
js创建数据共享接口——简化框架之间相互传值
很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码: 复制代码 代码如下: window.parent.document.getElementById("main") .contentWindow.document.getElementById('input').value = document.getElementById('myIframe') .contentWindow.document.getElementById('s0').value; 其实这个问题可
-
C++中rapidjson组装继续简化的方法
rapidjson组装继续简化------人生苦短,我用rapidjson 看最简单的: #include <iostream> #include <stdio.h> #include<unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include<sstream> // 请自己下载开源的rapidjson #includ
-
javascript简化代码 A=alert w=document.writeln
a=alert;w=document.writeln A=alert,w=document.writeln w(''+'Hello Well You!'.fontcolor('red')+'') A('A is short for alert') [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
Three.js利用dat.GUI如何简化试验流程详解
简介 本文主要给大家介绍了关于Three.js利用dat.GUI如何简化试验流程的想内容,其实使用这个插件的最省事的地方在于,调试很方便的调节相关的值,从而影响最后绘制的结果.而dat.GUI实现的东西也很简单,理解起来也很好理解.下面话不多说了,来一起看看详细的介绍吧. 我们实例化dat.GUI对象后,会在右上角显示出一些可以调节的参数,比如: 这就是今天的案例制作出来的五个可以调节的属性.而且实现起来也很简单,而且大部分是需要我们做的,除了上面的这个控制台不是我们写出来的. 引入方式 首先,
-
JavaScript代码简化技巧实例解析
函数式编程可以使您的代码更简单.简单意味着代码易于阅读和理解,可测试和可维护. 在本文中,我描述了一些函数式编程(FP)技巧,您可以使用它们来简化代码,从而使代码更好. 摆脱临时变量和不变性原则 函数式编程倾向于不变性,这种不变性原则意味着在初始化变量之后不会更改它们的值.同样,创建对象或字符串后,您也无需对其进行突变. 如果使用JavaScript编程,则所有变量定义都应使用 const.对于正在阅读您的代码的任何人,常量定义都可以让您高枕无忧:它保证永远不会重新分配变量,因为重新分配是不可能
-
JavaScript设计模型Iterator实例解析
这篇文章主要介绍了JavaScript设计模型Iterator实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Iterator Pattern是一个很重要也很简单的Pattern:迭代器! 我们可以提供一个统一入口的迭代器,Client只需要知道有哪些方法,或是有哪些Concrete Iterator,并不需要知道他们底层如何实作!现在就让我们来开始吧! 起手式 Iterator最主要的东西就是两个:hasNext.next.要让Cli
-
JavaScript对象属性操作实例解析
这篇文章主要介绍了JavaScript对象属性操作实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在js对象中,我们可以对对象属性进行操作. 上图的要点为:for-in会把原型链上的可枚举属性也列出来. 上图的要点为:可以使用逻辑运算符&&进行层层查找对象是否为undefined,从而在赋值过程中不报错. 上图的要点为: 1.delete不存在的属性,依旧返回true. 2.Object.getOwnPropertyDescrip
-
JavaScript代码调试方法实例小结
本文实例讲述了JavaScript代码调试方法.分享给大家供大家参考,具体如下: 1 把消息记录到控制台 IE8.Firefox.Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息,它有这些方法: error(message):错误性消息. info(message):信息性消息. log(message):一般性消息. warn(message):警告性消息. Opera 10.5 之前的版本,是使用 opera.postError() 方
-
JavaScript代码复用模式实例分析
任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量避免使用这些模式,因为或多或少有带来一些问题:第二排是推荐篇,指的是推荐大家使用的模式,一般不会有什么问题. 模式1:默认模式 代码复用大家常用的默认模式,往往是有问题的,该模式使用Parent()的构造函数创建一个对象,并且将该对象赋值给Child()的原型.我们看一下代码: 复制代码 代码如下: fu
-
Javascript类型转换的规则实例解析
类型转换可以分为隐式转换和显式转换,所谓隐式转换即程序在运行时进行的自动转换,显式转换则是人为的对类型进行强制转换.Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改变.请看示 例: var n = 10; n = "hello CSSer!"; n = {}; 上面的示例中,首先声明n变量并初始化其值为10(整数类型),接着将字符串"hello CSSer!"赋值给n,接着再赋一个对象给它,最
-
Java Idea高效率配置技巧实例解析
对于java开发人员来说,Idea的普及率已经很高了.但是还是很多好用的技巧没有用到,只是用到一些基本的功能,蛮浪费IDEA这个优秀的IDE.这次我分享的就是这个系列,后续会不断的补充和完善. 1. 代码提示不区分大小写 Settings -> Editor -> General -> Code Completion (低版本 将 Case sensitive completion 设置为 None 就可以了) 2. 自动导包功能及相关优化功能 Settings -> Editor
-
JS eval代码快速解密实例解析
有一段js代码内容如下: eval(function(E,I,A,D,J,K,L,H){function C(A)后面内容省略... 解密可以采用如下方法: 方法一: 打开谷歌浏览器,按F12,在Console窗口中把eval代码复制粘贴进去,回车运行,即可就到源码. 方法二: 新建一个html文件,把上面eval替换成document.write输出即可. 备注,前后加xmp标签的作用是完整的输出html标签,并且不做任何转义. <html> <head> <title&g
-
Objective-C 代码与Javascript 代码相互调用实例
现在好的IOS 的 APP有时候会跟网页内容相关联,当然也是增加用户体验,及更好的,有效的体现APP 的功能. 由于本人在项目中会用到这部分功能,做下记录! JS调用OC 很多应用里面或多或少的调用了网页,来达到绚丽的效果,所谓的JS调用OC.....举个例子吧,网页上有个按钮 点击按钮跳转界面,跳转的动作由OC的代码实现. OC调用JS 还是举个例子,我们OC代码创建了输入框比如输入用户名,输入完成后显示在网页上,显示用户的用户名 一.利用webView的代理方法实现OC和JS的相互调用 创建
-
JavaScript oncopy事件用法实例解析
作用:当用户拷贝添加了oncopy事件的元素时触发 使用方式:直接在HTML标签中添加该事件,通过JavaScript为指定元素添加该事件 提示:如果想要禁止复制某个元素的内容,可以在该事件的函数中添加return: false;,禁止浏览器的默认行为 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onco