整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JS代码其实可以这样写

JS代码其实可以这样写

常工作中,我确实经常去帮大家review代码,长期以来,我发现有些个功能函数,JS其实可以稍微调整一下,或者换个方式来处理,代码就会看起来更清晰,更简洁,甚至效率更高,主要是还更好理解。

下面我列举5个案例,我们一起来看一下

一、建议考虑使用FlatMap方法

先来看一段同时使用filtermap方法遍历数组的代码。我相信这种场景大家一定碰到过。为了说明问题,这里我用简单的数字内容来举个例子。

上面代码这样写,没什么问题,而且方法的连用也是比较推荐的处理方式, 但是,还是请多想想,其实我们有更好的方式来处理这一类问题。

现在我们看使用FlatMap如何实现的

使用FlatMap的好处是

只要遍历一遍,而且不产生中间多余数组

二、建议调整数组方法调用的顺序

日常工作中写的比较多的数组方法有filter()find()map()reduce(),在必要的场景下,我们也建议将这些个方法连起来一起调用。但是,一定要注意调用顺序,否则也会影响效率问题。

比如下面这样:

仔细看上面这段代码,你就会发现

如果我们首先使用过滤器,然后排序,这样执行就能提高效率

三、建议这里使用reduce方法

你写的代码一定要让大家看的懂,代码要简洁,然而,有些方法它就出于这个目的创造的,如果你又不用,那就太可惜了,比如reduce方法。

举个例子,我们先从接口中拉出一段数据,然后对数据内容进行分类处理,像下面代码这样

我看到大多数前端开发人员都会使用forEach方法或者错误的使用map方法去处理,相比之下,实际上这里特别适合使用reduce方法

看起来会更清晰而且更容易理解

四、建议使用原生JavaScript类

上面这张很清晰明了的拆解了URL的每一部分

关于页面的URL我们可以组装也可以拆卸,这里说一下URL各部分的组装问题,你现在或者曾经肯定处理过URL拼接的问题,代码可能是这么写的

这样写虽然能够实现,但是代码看起来很混乱,很可能会被破坏,并且每次都需要你在最后添加一些规则,添加一些其他参数。

比如,你可能忘记添加/或者&符号就会导致错误,下面看看原生类怎么实现的,可以对比一下两者区别

这样看来,在处理URL组装问题上是不是可以考虑使用原生类了?

五、建议使用生成器

提到生成器,大家可能只是听过,或者知道怎么使用,而实际项目中很少去用。实际上它有很多使用场景。

使用生成器能够节省很多代码,代码也非常清晰。如,进行异步操作或者按需循环或者按需加载时。

看这段代码:

上面代码中main函数,可以根据用户交互或者其它技巧来调用。因为这里不希望无限加载。

总结

好了,就说这几点,日常工作中,希望大家都写出高质量的代码。

数的编写与使用

在程序设计语言中函数是一段具有特殊功能的代码,同时也是一组可以重复使用的代码。通过函数这一对象的使用,进一步提高了程序开发的模块化与高度多的代码复用性。各种程序设计语言都对函数的定义及使用有着严格的语法规则。本文主要介绍如何在JavaScript中定义函数、使用函数,并对递归函数这一特殊类型函数进行说明。


JavaScript函数基本语法

JavaScript中所定义的函数主要由函数定义关键字、函数名称、函数参数、执行代码段与函数返回值5部分所组成。同时要求函数在使用过程中需要先定义函数,再调用函数。JavaScript函数定义基本语法描述如下:

JavaScript函数定义基本语法

JavaScript函数定义基本语法描述如上图,说明如下:

函数定义语法说明


函数调用与形参&实参

函数定义完成之后,就可以通过调用该函数完成特定的功能。函数调用方式较为简单,只需要给出函数名称与所传递参数,如果参数为空,只需要给出名称后面的括号即可。关于参数部分需要注意形参与实参概念的区分。其中在函数定义中用于解释说明语言的参数为形参。在函数调用过程中替代形参参与实际运算的参数为实参。示例说明如下:

形参与实参示例说明


匿名函数

匿名函数(Anonymous function),顾名思义是指没有名字的函数,即在上面给出的基本语法中functionName部分可以省略的函数。在JavaScript中提供两类基本匿名函数定义方式,一种是将匿名函数封装为表达式,一种是将匿名函数赋值给变量形式。两类匿名函数基本语法描述如下:

匿名函数的定义形式

匿名函数定义形式描述如上图所示,上文中计算解决值函数我们可以使用两种方法改写为匿名函数,实现描述如下:

匿名函数使用实例


递归函数

递归函数是一类特殊的函数类型,简单理解即为在一个函数的内部调用了该函数自身。在使用递归函数是需要注意产生递归的条件与递归终止的条件。如同循环控制语句一样,没有递归终止的条件,程序将会一直占用资源,无法结束释放资源。递归函数的说明可以从阶乘的计算这一案例展开说明。阶乘计算过程描述如下:

阶乘计算原理

阶乘计算过程描述如上图所示,我们可知阶乘问题的解决主要在于递推关系的挖掘与终止条件的确定。本例中递推关系为N!=N*(N-1)!,终止条件为1!=1;在明确这两点之后我们可以编写递归函数实现问题求解。递归函数描述如下图:

阶乘问题的递归求解编程实现


经典递归问题举例

爬楼梯问题是使用递归算法进行问题求解的经典案例之一,爬楼梯问题主要只是假设有N阶楼梯,需要从最底层爬到最高层,在上楼过程中每步只允许上1层或者2层,计算爬到N层总共方法有多少种?

爬楼梯方法问题

爬楼梯方法问题采用递归思想还是比较简单的,我们可以从小人最后一步考虑。小人上到最高层N层时只能有两种方法:

①从N-2层跨越2层到达N层;

②从N-1层跨越1层到达N层;

则计算到达N层的方法f(n)就等于到达N-1层方法f(n-1)与达N-2层方法f(n-2)之和。这就找到了我们进行递推的关系式,终止条件即为f(1)=1和f(2)=2;

因此我们可以编程实现计算,实现代码如下:

爬楼梯递归求解代码


本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可以联系作者,共同探讨。更多程序设计相关教程及实例分享,期待大家关注与阅读!JavaScript基础教程系列教程链接如下:

JavaScript基础教程(六)流程控制之循环语句

JavaScript基础教程(五)流程控制之条件语句

重点 前端19 个 JavaScript 简写方法!新手们赶紧学起来!


1.三元操作符

当想写 if...else 语句时,使用三元操作符来代替。

简写:

也可以嵌套

2.短路求值简写方式

当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句。

或者可以使用短路求值方法:

3.声明变量简写方法

简写方法:

4.if存在条件简写方法

简写:

只有likeJavaScript是真值时,二者语句才相等。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

如果判断值不是真值,则可以这样:

简写:

5.JavaScript循环简写方法

简写:for(letindexinallImgs)也可以使用Array.forEach:

6.短路评价

给一个变量分配的值是通过判断其值是否为null或undefined,则可以:

简写:

7.十进制指数

当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字:for(leti=0;i<10000;i++){}简写:

8.对象属性简写

如果属性名与key名相同,则可以采用ES6的方法:

简写:

9.箭头函数简写

传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡然无存。

简写:

10.隐式返回值简写

经常使用return语句来返回函数最终结果,一个单独语句的箭头函数能隐式返回其值(函数必须省略{}为了省略return关键字)

为返回多行语句(例如对象字面表达式),则需要使用()包围函数体。

简写:

11.默认参数值

为了给函数中参数传递默认值,通常使用if语句来编写,但是使用ES6定义默认值,则会很简洁:

简写:

12.模板字符串

传统的JavaScript语言,输出模板通常是这样写的。

ES6可以使用反引号和${}简写:

13.解构赋值简写方法

在web框架中,经常需要从组件和API之间来回传递数组或对象字面形式的数据,然后需要解构它。

简写:

也可以分配变量名:

14.多行字符串简写

需要输出多行字符串,需要使用+来拼接:

使用反引号,则可以达到简写作用:

15.扩展运算符简写

扩展运算符有几种用例让JavaScript代码更加有效使用,可以用来代替某个数组函数。

简写:

不像concat()函数,可以使用扩展运算符来在一个数组中任意处插入另一个数组。

也可以使用扩展运算符解构:

16.强制参数简写

JavaScript中如果没有向函数参数传递值,则参数为undefined。为了增强参数赋值,可以使用if语句来抛出异常,或使用强制参数简写方法。

简写:

17.Array.find简写

想从数组中查找某个值,则需要循环。在ES6中,find()函数能实现同样效果。

简写:

18.Object[key]简写

考虑一个验证函数:

假设当需要不同域和规则来验证,能否编写一个通用函数在运行时确认?

现在可以有适用于各种情况的验证函数,不需要为了每个而编写自定义验证函数了

19.双重非位运算简写

有一个有效用例用于双重非运算操作符。可以用来代替Math.floor(),其优势在于运行更快,可以阅读此文章了解更多位运算。

简写:

* 作者:SangSir

* https://segmentfault.com/a/1190000012673854