走查前端项目发现的代码问题

174 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第28天,点击查看活动详情

前言

我们所有工程的代码进行eslint的配置,期间发现了我们代码中很多的问题,这关系到我们的代码质量的提升,良好的代码习惯,将有效的降低我们代码异常情况,也会增加我们排查问题的复杂度

下面整理出一些非常常见的问题汇总

1、比较运算符

这个请大家务必注意,在很多情况下,出现不可以预估的判断问题,为了代码的严谨请务必严格使用 === 和 !== 而非 == 和 !=

image.png

2、变量申明

声明变量时,请使用 const、let 关键字,如果没有写关键字,变量就会暴露在全局上下文中,这样很可能会和现有变量冲突,另外,也很难明确该变量的作用域是什么。

延展问题:什么时候用let?什么时候用const? 这个问题也许结果一样,只在极少数情况下才会出现问题,但是最直接的理解就是,如果在这个变量被申明后的未来不发生改变,那么请用const,如果会对这个变量发生修改请使用let,这样也非常有利于你的代码逻辑的确定性,降低奇怪情况发生概率

这里推荐使用 const 来声明变量,我们需要避免全局命名空间的污染。这段代码中还有另外一个问题,可以使用解构方式来进行变量申明: const { admissionWard } = this.userInfo;

image.png

3、parseInt的不正确使用

**parseInt(stringradix) **  解析一个字符串并返回指定基数的十进制整数, radix 是2-36之间的整数,表示被解析字符串的基数。

如果 radix 是 undefined0或未指定的,JavaScript会假定以下情况:

  1. 如果输入的 string以 "0x"或 "0x"(一个0,后面是小写或大写的X)开头,那么radix被假定为16,字符串的其余部分被当做十六进制数去解析。
  2. 如果输入的 string以 "0"(0)开头, radix被假定为8(八进制)或10(十进制)。具体选择哪一个radix取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制),但不是所有的浏览器都支持。因此,在使用 parseInt 时,一定要指定一个 radix
  3. 如果输入的 string 以任何其他值开头, radix 是 10 (十进制)。

如果第一个字符不能转换为数字,parseInt会返回 NaN

为了算术的目的,NaN 值不能作为任何 radix 的数字。你可以调用isNaN函数来确定parseInt的结果是否为 NaN。如果将NaN传递给算术运算,则运算结果也将是 NaN

不传radix可能返回八进制的结果,也可能返回十进制的结果。 总是指定一个基数(radix)可以避免这种不可靠的行为。

image.png

4、下面的奇怪的写法

如果当前if判断下没有要处理的事情那么请直接去掉

image.png

5、逗号及分号的不严谨

此处没有什么说明,这应该是写代码时候粗心导致,请避免这样粗心大意带来的错误异常,要求每一句结束请用分号结束,使代码结构更加清晰

image.png

6、老生常谈 forEach、map的使用

先看下面的代码,map中有一个if判断,当条件成立返回一个新的对象,此时会有一个问题,遍历数组中不满足的条件的会返回一个undefined,此时再用filter是可以过滤掉,但是此时我们将遍历循环两次,推荐可以使用forEach一次遍历将事情处理完毕。

性能方面,取决于遍历时执行的事情的快慢,从本质上来说,他们性能差距不大,当然for还更快,但是不利于代码的阅读

在我们要遍历一个数组的时候,请记住一个原则:如果需要操作数组中每个元素(比如计算返回新的值),返回一个新的数组,且不需要改变原数组,那么使用map,其他遍历大概率请使用forEach,不管是性能及内存的使用都是有利的,当然也不完全死的,需要我们在写代码的时候更加严谨的思考。

image.png

7、switch中break的使用

我们都很清楚其实在switch中使用break还是return都是可以的,大部分时候是一致,但是也有意外情况,如果是在一个需要return的函数中去使用switch,那么此时return会直接跳出当前进程,出现意料之外的情况,所以和大家约定,不管什么情况下,都使用配套的关键字break,此外,在严格规范下,已经要有default进行兜底,除非你对传进来的参数的值非常确定,否则请加上,这也是代码健壮的体现。

image.png

8、判断返回 boolean

判断返回的就是一个boolean值!这样的地方非常多请大家注意,给人看到都会脸红的

image.png

9、尽量区别变量名的重复使用

image.png

10、多层if判断,增加代码性能负担

不推荐写法:

image.png 推荐写法:这样写法,更清晰

image.png

11、重复申明

image.png

12、(Vue)不要在computed中改变页面变量的值,如果需要改变,请使用watch

不推荐写法:

image.png

推荐写法:

image.png