更多文章，请关注微信公众号:前端css和js干货
在阅读js代码时，是否有过这样的感受：
- 你几乎不明白代码的意思？
- 代码使用了很多过时的JavaScript技巧？
- 命名和编码风格比较随意？
这些是编码不良习惯的迹象。
本文列举了JavaScript中5个常见的不良编码习惯。 更重要的是，本文给出了如何改掉这些习惯的可行建议。
1. 不要使用隐式类型转换
JavaScript是一种弱类型的语言。如果使用得当，这是优点，因为它提供了灵活性。
大多数运算符 + - * / ==（不包括===）在处理不同类型的数据时使用隐式类型转换。
if (condition) {...}, while(condition) {...} 语句隐式地将条件转换为布尔值。
以下示例依赖于隐式类型转换。 我打赌你会感到困惑：
console.log("2" + "1"); // => "21"
console.log("2" - "1"); // => 1
console.log('' == 0); // => true
console.log(true == []); // -> false
console.log(true == ![]); // -> false
过度依赖隐式类型转换是一个坏习惯。首先，它使你的代码在某些情况下不太稳定。 其次，这使得难以复现也难以修复的bug变得更多。
下面是一个获取对象属性的函数。 如果该属性不存在，该函数返回一个默认值：
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]) {...} 隐式转换为布尔值。这类错误很难发现。 要修复该函数，需要明确数据的类型。
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.节建议避免直接使用 undefined。 因此可以使用in运算符改进上述方案 ：
function getPropFixedBetter(object, propertyName, defaultValue) {
if (!(propertyName in object)) {
return defaultValue;
}
return object[propertyName];
}
建议：尽可能不要使用隐式类型转换。 相反，请确保变量和函数参数始终具有相同的类型。 必要时使用显式类型转换。
最佳实践列表：
- 始终使用严格相等运算符 === 来执行比较
- 不要使用松散相等运算符 ==
- 加法运算符operand1+operand2：两个操作数都应该是数字或都是字符串
- 算术运算符 - * / % ：两个操作数都应该是数字
- if (condition) {...}, while (condition) {...} 等语句：condition 应该是一个布尔值
- 你可能会说这种方法需要编写更多代码……确实是这样！ 但是通过明确的方法，你可以控制代码的行为。 另外，这也增加了可读性。
2.不要使用过时的 JavaScript 技巧
JavaScript 的有趣之处在于，它的创始人并没有预料到这种语言会变得如此流行。
基于 JavaScript 构建的应用程序的复杂性增长速度超过了语言的发展速度。 这种情况迫使开发人员使用 javaScript hacks来实现功能。
一个经典的例子是搜索一个数组是否包含一个元素。 使用 array.indexOf(item) !== -1来监测元素是否存在。
ECMAScript 2015及更高版本的功能变得越来越强大。 你可以使用新的语言特性安全地重构很多hacks。
使用ES2015方法 array.includes(item)重构array.indexOf(item) !== -1。
3.不要污染函数作用域
在ES2015之前，js变量是函数作用域的，因此，你可能养成了以函数作用域的方式声明所有变量的坏习惯，请看一个例子：
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 的引入，我们应该尽可能地限制变量的生命周期。
让我们修正上述代码：
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块作用域
// 不好的做法
let message;
// ...
if (notFound) {
message = 'Item not found';
// Use `message`
}
// 好的做法
if (notFound) {
const message = 'Item not found';
// Use `message`
}
for块作用域
// 不好的做法
let item;
for (item of array) {
// Use `item`
}
// 好的做法
for (const item of array) {
// Use `item`
}
4.尽量避免 undefined 和 null
尚未赋值的变量被自动评估为undefined。 例如：
let count;
console.log(count); // => undefined
const hero = {
name: 'Batman'
};
console.log(hero.city); // => undefined
count 变量已定义，但尚未用值初始化。 JavaScript 隐式分配给它 undefined。
访问不存在的属性 hero.city 时，也会返回 undefined。
为什么直接使用 undefined 是一个坏习惯？ 因为当我们与undefined直接进行比较时，我们就有可能是在处理状态为未初始化的变量。
变量、对象属性、数组在使用之前必须用值初始化！
JavaScript 提供了很多方法来避免与undefine直接进行比较。
属性是否存在：
// 不好的做法
const object = {
prop: 'value'
};
if (object.nonExistingProp === undefined) {
// ...
}
// 好的做法
const object = {
prop: 'value'
};
if ('nonExistingProp' in object) {
// ...
}
对象默认属性
// 不好的做法
function foo(options) {
if (object.optionalProp1 === undefined) {
object.optionalProp1 = 'Default value 1';
}
// ...
}
// 好的做法
function foo(options) {
const defaultProps = {
optionalProp1: 'Default value 1'
};
options = {
...defaultProps,
...options
};
// ...
}
函数默认参数
// 不好的做法
function foo(param1, param2) {
if (param2 === undefined) {
param2 = 'Some default value';
}
// ...
}
// 好的做法
function foo(param1, param2 = 'Some default value') {
// ...
}
你应该努力避免从函数中返回 null，更要避免使用null作为参数调用函数。
一旦 null 出现在你的调用堆栈中，你就必须在每个可能访问 null 的函数中检查变量是否为null。 这很麻烦也很容易出错，如下代码：
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引用的诱惑，仅仅因为它很容易实现。 这导致了无数错误、漏洞和系统崩溃，在过去的四十年里，这些问题可能造成了 10 亿美元的痛苦和损失。
“计算机科学最严重的错误”一文深入探讨了为什么 null会损害代码质量。
5.不要使用随意的编码风格
有什么比阅读具有随机编码风格的代码更令人生畏的呢？ 你永远不知道会发生什么！
如果代码库包含许多开发人员的不同编码风格怎么办？ 各式各样的人物涂鸦墙。
[图片上传失败...(image-87b3ff-1638805924999)]
要求整个团队和应用程序代码库采用相同的编码风格。 它提高了代码的可读性。
可参考的编码风格示例：
- Airbnb JavaScript 风格指南
- 谷歌 JavaScript 风格指南
建议自动化验证代码风格：
- 安装 eslint
- 使用最适合你的编码风格配置 eslint
- 设置一个预提交钩子，在提交之前运行 eslint验证。
6.总结
编写高质量和干净的代码需要纪律越是，克服不良的编码习惯。
JavaScript 是一种弱类型语言，有很大的灵活性。 但是你必须清楚自己所使用的特性。 建议是避免隐式类型转换并减少 undefined 和 null 的使用。
最近几年js语言发展得非常快。 找到棘手的代码，并使用最新的 JavaScript特性重构它。
代码库中一致的编码风格有利于可读性。
你还知道 JavaScript 中还有哪些不好的编码习惯？
作者：dmitripavlutin 译者：前端css和js干货 来源：Dmitri Pavlutin