你中了几条，5个js编码的坏习惯你中了几条，5个js编码的坏习

更多文章，请关注微信公众号:前端css和js干货

在阅读js代码时，是否有过这样的感受：

你几乎不明白代码的意思？
代码使用了很多过时的JavaScript技巧？
命名和编码风格比较随意？
这些是编码不良习惯的迹象。

本文列举了JavaScript中5个常见的不良编码习惯。更重要的是，本文给出了如何改掉这些习惯的可行建议。
1. 不要使用隐式类型转换 JavaScript是一种弱类型的语言。如果使用得当，这是优点，因为它提供了灵活性。
大多数运算符 + - * / ==（不包括===）在处理不同类型的数据时使用隐式类型转换。
if (condition) {...}, while(condition) {...} 语句隐式地将条件转换为布尔值。
以下示例依赖于隐式类型转换。我打赌你会感到困惑：

console.log("2" + "1"); // => "21"console.log("2" - "1"); // => 1console.log('' == 0); // => trueconsole.log(true == []); // -> falseconsole.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

【你中了几条，5个js编码的坏习惯】这是一个错误。即使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); // => undefinedconst 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 = https://www.it610.com/article/null; if (options !== null) {value = options.value; // ...}return value; }

尽量编写不涉及null值的代码。一个替代方案是 try/catch 机制。
ALGOL 的发明者 Tony Hoare 曾说过：

我称其为我的十亿美元错误... 我正在为面向对象语言中的引用设计第一个综合类型系统。但我无法抗拒null引用的诱惑，仅仅因为它很容易实现。这导致了无数错误、漏洞和系统崩溃，在过去的四十年里，这些问题可能造成了 10 亿美元的痛苦和损失。

“计算机科学最严重的错误”一文深入探讨了为什么 null会损害代码质量。
5.不要使用随意的编码风格有什么比阅读具有随机编码风格的代码更令人生畏的呢？你永远不知道会发生什么！
如果代码库包含许多开发人员的不同编码风格怎么办？各式各样的人物涂鸦墙。

文章图片

要求整个团队和应用程序代码库采用相同的编码风格。它提高了代码的可读性。
可参考的编码风格示例：

Airbnb JavaScript 风格指南
谷歌 JavaScript 风格指南

建议自动化验证代码风格：

安装 eslint
使用最适合你的编码风格配置 eslint
设置一个预提交钩子，在提交之前运行 eslint验证。

6.总结编写高质量和干净的代码需要纪律越是，克服不良的编码习惯。
JavaScript 是一种弱类型语言，有很大的灵活性。但是你必须清楚自己所使用的特性。建议是避免隐式类型转换并减少 undefined 和 null 的使用。
最近几年js语言发展得非常快。找到棘手的代码，并使用最新的 JavaScript特性重构它。
代码库中一致的编码风格有利于可读性。
你还知道 JavaScript 中还有哪些不好的编码习惯？