5个要矫正的JavaScript编程陋习

在阅读JavaScript(JS)代码时,您是否有过这样的感觉:
你几乎完全不明白这条代码的作用?
这些代码使用了大量的JS技巧?
命名和编程风格相当随意?
这些是编程陋习的征兆。

在这篇文章中,我将会概述JS中5种常见的编程陋习。重要的是,我将提出我认为的,关于如何矫正这些陋习的可行的建议。

不要使用隐式类型转换

JavaScript是一种松散类型的程序语言。如果使用得当,这对我们是有利的,因为它提供了很大的灵活性。

大多数操作符+ - * / ==(但不是指===)在处理不同类型的操作数时会进行隐式转换。语句if (condition) {…},(while(condition) {…}隐式地将条件转换为布尔值。

下面的示例依赖于类型的隐式转换。我猜你一定感很到困惑:

1
2
3
4
5
6
7
console.log("2" + "1");  // => "21"
console.log("2" - "1"); // => 1

console.log('' == 0); // => true

console.log(true == []); // -> false
console.log(true == ![]); // -> false

过分依赖于隐式类型转换是一个陋习.
首先,它使你的代码在边缘情况下不够稳定。其次,增加了出现难以重现和修复的bug的机率。

现在咱们使用一个获取对象属性的函数。如果属性不存在,函数返回一个默认值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function getProp(object, propertyName, defaultValue) {
if (!object[propertyName]) {
return defaultValue;
}
return object[propertyName];
}

const hero = {
name: 'Batman',
isVillian: false
};

console.log(getProp(hero, 'name', 'Unknown')); // => 'Batman'

getProp() 读取name属性的值,即为’Batman’。

那么如果我们试图访问isVillian属性呢:

console.log(getProp(hero, ‘isVillian’, true)); // => true

这是一个错误。即使hero的属性isVillian 为false,函数getProp()也会错误得返回true。

这是因为属性存在的验证依赖于if (!object[propertyName]) {…}隐式转换的布尔值。

这些错误很难发现,要修正该函数,就要明确验证值的类型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function getPropFixed(object, propertyName, defaultValue) {
if (object[propertyName] === undefined) {
return defaultValue;
}
return object[propertyName];
}

const hero = {
name: 'Batman',
isVillian: false
};

console.log(getPropFixed(hero, 'isVillian', true)); // => false

object[propertyName] === undefined确切地验证了属性是否为undefined。

你们有什么其他方法来验证对象中的属性是否存在吗?如果有,请在下面的评论区留言!

边注:在第4(此处需要一个超链接直接跳到第4部分)部分我有建议避免直接使用undefined。因此,上述解决方案可以用运算符in进一步改进:

1
2
3
4
5
6
7

function getPropFixedBetter(object, propertyName, defaultValue) {
if (!(propertyName in object)) {
return defaultValue;
}
return object[propertyName];
}

我的建议是:尽可能不要使用隐式类型转换。相反,请确保变量和函数参数始终具有相同的类型,必要时使用显式类型转换。

大家最好这么做:

始终使用严格的相等运算符===进行比较

不要使用松散等式运算符==

加法运算符operand1 + operand2:两个操作数应该是数字或字符串

算术运算符- * / % **:两个操作数都应该是数字

if (condition) {…},while (condition) {…}等语句中的condition必须是一个布尔类型值

大家可能会觉得这种方式需要编写更多代码…的确!但是通过明确的方法,我们能够控制代码的行为。此外,显性类型转换增强了可读性。

不要使用早期的JavaScript技巧

JS的有趣之处在于,它的创建者并没有料到这种语言会如此流行。基于JS构建的应用程序的复杂性比语言发展的速度还要快。这种情况迫使开发人员使用JS技巧和变通方法,只是为了让事情正常运行。

一个典型的例子是查看数组是否包含某个元素。我从不会使用array.indexOf(item) !== -1来检查。

ECMAScript 2015及以后版本的功能要强大得多,可以使用新的语言特性安全地重构许多技巧。
such
在新的ES2015中可以使用array.includes(item)来代替array.indexOf(item) !== -1。
大家可以根据我写的重构列表来清除你的JS代码中的老旧技巧。

不要污染函数作用域

在ES2015之前,JS变量在函数作用域内,因此大家可能会习惯了将所有变量声明在函数作用域里面。

我们来看一个例子:

1
2
3
4
5
6
7
8
9
10
11
12

function someFunc(array) {
var index, item, length = array.length;
/*
* Lots of code
*/
for (index = 0; index < length; index++) {
item = array[index];
// Use `item`
}
return someResult;
}

变量index,item和length在函数作用域内。但是这些变量会影响函数作用域,因为它们只在for()块作用域内才被需要。

因为已经引入了具有块作用域let和const,我们应该尽可能地限制变量的生命周期。

让我们来清理一下函数作用域:

1
2
3
4
5
6
7
8
9
10
11
12

function someFunc(array) {
/*
* Lots of code
*/
const length = array.length;
for (let index = 0; index < length; index++) {
const item = array[index];
// Use `item`
}
return someResult;
}

变量index和item被限制为for()循环块作用域。length被挪到使用地方的附近。

重构后的代码更容易理解,因为变量不会分散在整个函数作用域内,它们存在于使用地方的附近。

在使用的块作用域定义变量:

if块作用域

1
2
3
4
5
6
7
// Bad
let message;
// ...
if (notFound) {
message = 'Item not found';
// Use `message`
}

1
2
3
4
5
6

// Good
if (notFound) {
const message = 'Item not found';
// Use `message`
}

for块作用域

1
2
3
4
5
6

// Bad
let item;
for (item of array) {
// Use `item`
}

1
2
3
4
5

// Good
for (const item of array) {
// Use `item`
}

尽量避免undefined和null

未赋值的变量默认被赋值为undefined。例如:

1
2
3
4
5
6
7
8

let count;
console.log(count); // => undefined

const hero = {
name: 'Batman'
};
console.log(hero.city); // => undefined

count变量已定义,但尚未使用值初始化。JS隐式赋值给它undefined。

在我们访问不存在的属性hero.city时,也会返回undefined。

为什么直接使用undefined是一个陋习呢?因为与undefined进行比较时,实际上我们正在处理的是未初始化状态的变量。

变量、对象属性和数组在使用前必须用值初始化

JS提供了很多避免与undefined进行比较的方式。

判断属性是否存在

1
2
3
4
5
6
7
// Bad
const object = {
prop: 'value'
};
if (object.nonExistingProp === undefined) {
// ...
}

1
2
3
4
5
6
7
8

// Good
const object = {
prop: 'value'
};
if ('nonExistingProp' in object) {
// ...
}

对象的默认属性

1
2
3
4
5
6
7
// Bad
function foo(options) {
if (object.optionalProp1 === undefined) {
object.optionalProp1 = 'Default value 1';
}
// ...
}

1
2
3
4
5
6
7
8
9
10
11
12

// Good
function foo(options) {
const defaultProps = {
optionalProp1: 'Default value 1'
};
options = {
...defaultProps,
...options
};
// ...
}

默认函数参数

1
2
3
4
5
6
7
// Bad
function foo(param1, param2) {
if (param2 === undefined) {
param2 = 'Some default value';
}
// ...
}

1
2
3
4
// Good
function foo(param1, param2 = 'Some default value') {
// ...
}

null是一个缺失对象的指示符。我们应该尽量避免从函数返回null,特别是使用null作为参数调用函数。

一旦null出现在调用堆栈中,我们就必须在每个可能访问null的函数中检查它的存在,这样我们一不小心就出错了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function bar(something) {
if (something) {
return foo({ value: 'Some value' });
} else {
return foo(null);
}
}

function foo(options) {
let value = null;
if (options !== null) {
value = options.value;
// ...
}
return value;
}

大家尽量编写不涉及null的代码。可以用try /catch机制替代,默认对象的使用。
Algol的发明者Tony Hoare曾说过:“我把它称为我的十几亿美元的错误…[…]我设计了第一个面向对象语言的综合类型系统。[…]但是我无法抗拒放入null引用的诱惑,因为它很容易实现。这导致了无数的错误、漏洞和系统崩溃,在过去四十年中,这些错误和崩溃可能造成了十亿美元的损失。”

“计算机科学中最糟糕的错误”一文深入分析了为什么null会破坏代码的质量。

不要使用随意的编码风格,执行一个标准

有什么比阅读具有随机编码风格的代码更令人生畏的事情?你永远不知道会发生什么!如果代码库包含许多开发人员的不同编码风格,该怎么办?,这种就像各色人物涂鸦墙。

整个团队和应用程序代码库都需要相同的编码风格,它提高了代码的可读性。

一些有用的编码风格的例子:
爱彼迎 JS 风格指南
谷歌 JS 风格指南
老实说,我很懒。当我正面临着死线或者在回家前准备提交时,我可能会“忘记”设计代码的样式。

懒惰的我总对自己说:先这样吧,以后再更新它,但是”以后”意味着永远不会。

所以在这里我建议使用 eslint 来规范编码风格。安装eslint
使用最适合自己的编码风格去配置eslint
设置一个预提交hook,在提交之前运行eslint验证。

总结

编写高质量和干净的代码需要有纪律性,我们克服编码陋习。

JS是一种自由的编程语言,具有很大的灵活性。但是我们必须注意我们所使用的特性。这里我的建议是避免使用隐式类型转换undefined和null。

现在这种编程语言发展得相当快。找出复杂的代码,并使用最新的JS特性来重构简化。整个代码库的一致编码风格有益于可读性。优秀的编程技能总是一个双赢的解决方案。

今天的分享就到这里,希望本文能帮助到您!

来源:https://juejin.im/post/5d4add0ce51d45620d2cb89f
声明:著作权归作者所有。如有侵权请联系博主删除!!!

-------------本文结束感谢您的阅读-------------
木槿前端不求人,有空就来坐坐。
0%