You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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`
}
为了保证的可读性,本文采用意译而非直译。
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!
在阅读JavaScript代码时,你是否有过这种感觉
你几乎不明白代码的作用?
代码使用了很多 JavaScript 技巧?
命名和编码风格太过随意?
这些都是不良编码习惯的征兆。
在这篇文章中,我描述了JavaScript中常见的5种不良编码习惯。重要的是,本文会给出一些可行的建议,如何的摆脱摆脱这些习惯。
1.不要使用隐式类型转换
JavaScript是一种松散类型的语言。 如果使用得当,这是一个好处,因为它给你带来了灵活性。
大多数运算符
+ - * / ==
(不包括===
)在处理不同类型的操作数时会进行隐式转换。语句
if(condition){...}
,while(condition){...}
隐式地将条件转换为布尔值。下面的示例依赖于类型的隐式转换,这种有时候会让人感到很困惑:
过度依赖隐式类型转换是一个坏习惯。 首先,它使你的代码在边缘情况下不太稳定。 其次,增加了引入难以重现和修复的bug的机会。
现在咱们实现一个获取对象属性的函数。如果属性不存在,函数返回一个默认值
getProp()
读取name
属性的值,即'Batman'
。那么试图访问
isVillian
属性:这是一个错误。即使
hero
的属性isVillian
为false
,函数getProp()
也会返回错误的true
。这是因为属性存在的验证依赖于
if(!object [propertyName]){...}
隐式转换的布尔值。这些错误很难发现,要修复该函数,就要明确验证值的类型:
object[propertyName] === undefined
确切地验证属性是否为undefined
。这里建议避免直接使用
undefined
。 因此,上述解决方案可以进一步改进:原谅作者建议是:尽可能不要使用隐式类型转换。相反,请确保变量和函数参数始终具有相同的类型,必要时使用显式类型转换。
最佳实践列表:
始终使用严格的相等运算符
===
进行比较不要使用松散等式运算符
==
加法运算符
operand1 + operand2
:两个操作数应该是数字或字符串算术运算符
- * /%**
:两个操作数都应该是数字if(condition){...}
,while(condition){...}
等语句:condition
必须是一个布尔类型值你可能会说这种方式需要编写更多代码......你是对的! 但是通过明确的方法,可以控制代码的行为。 此外,显性提高了可读性。
2. 不要使用早期的JavaScript技巧
JavaScript的有趣之处在于,它的创建者没有料到这种语言会如此流行。
基于JavaScript构建的应用程序的复杂性比语言发展的速度还要快。这种情况迫使开发人员使用JavaScript技巧和变通方法,只是为了让事情正常运行。
一个典型的例子是查看数组是否包含某个元素。 我从来不喜欢使用
array.indexOf(item)!== -1
来检查。ES6 及以后版本的功能要强大得多,可以使用新的语言特性安全地重构许多技巧。
ES6 中可以使用
array.includes(item)
来代替array.indexOf(item) !== -1
3. 不要污染函数作用域
在ES2015之前,你可能会养成了将所有变量声明在函数作用域里面。
来看看一个例子:
变量
index、item
和length
在函数作用域内。但是这些变量会影响函数作用域,因为它们只在for()
块作用域内才被需要。通过引入具有块作用域
let
和const
,应该尽可能地限制变量的生命周期。index
和item
变量被限制为for()
循环块作用域。length 被移动到使用地方的附近。重构后的代码更容易理解,因为变量不会分散在整个函数作用域内,它们存在于使用地方的附近。
在使用的块作用域定义变量
if 块作用域
for 块作用域
4.尽量避免 undefined 和 null
未赋值的变量默认被赋值为
undefined
。例如count
变量已定义,但尚未使用值初始化。 JavaScript隐式赋值给它undefined
。访问不存在的属性
hero.city
时,也会返回undefined
。为什么直接使用
undefined
是一个不好习惯? 因为与undefined
进行比较时,你正在处理未初始化状态的变量。变量、对象属性和数组在使用前必须用值初始化
JS 提供了很多避免与
undefined
进行比较方式。判断属性是否存在
对象的默认属性
默认函数参数
null
是一个缺失对象的指示符。应该尽量避免从函数返回null
,特别是使用null
作为参数调用函数。一旦
null
出现在调用堆栈中,就必须在每个可能访问null
的函数中检查它的存在,这很容易出错。尝试编写不涉及
null
的代码。 可替代方法是try /catch
机制,默认对象的使用。5. 不要使用随意的编码风格,执行一个标准
有什么比阅读具有随机编码风格的代码更令人生畏的事情? 你永远不知道会发生什么!
如果代码库包含许多开发人员的不同编码风格,该怎么办?,这种就像各色人物涂鸦墙。
整个团队和应用程序代码库都需要相同的编码风格,它提高了代码的可读性。
一些有用的编码风格的例子:
老实说,当我在回家前准备提交时,我可能会忘记设计代码的样式。
我自己总说:保持代码不变,以后再更新它,但是“以后”意味着永远不会。
这里建议使用 eslint 来规范编码风格。
总结
编写高质量和干净的代码需要纪律,克服不好的编码习惯。
JavaScript是一种宽容的语言,具有很大的灵活性。但是你必须注意你所使用的特性。这里建议是避免使用隐式类型转换,
undefined
和null
。现在这种语言发展得相当快。找出复杂的代码,并使用最新 JS 特性来重构。
整个代码库的一致编码风格有益于可读性。良好的编程技能总是一个双赢的解决方案。
交流
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
The text was updated successfully, but these errors were encountered: