码迷,mamicode.com
首页 > Web开发 > 详细

JS 的5个不良编码习惯

时间:2019-09-02 12:07:43      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:undefined   需要   rand   class   怎么   判断   运算符   strong   进一步   

1.不要使用隐式类型转换

JavaScript是一种松散类型的语言。如果使用得当,这是一个好处,因为它给你带来了灵活性。

大多数运算符 +-*/==(不包括 ===)在处理不同类型的操作数时会进行隐式转换。

语句 ifcondition){...}, whilecondition){...}隐式地将条件转换为布尔值。

下面的示例依赖于类型的隐式转换,这种有时候会让人感到很困惑:

  1. console.log("2" + "1"); // => "21"

  2. console.log("2" - "1"); // => 1

  3.  

  4. console.log(‘‘ == 0); // => true

  5.  

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

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

过度依赖隐式类型转换是一个坏习惯。首先,它使你的代码在边缘情况下不太稳定。其次,增加了引入难以重现和修复的bug的机会。

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

  1. function getProp(object, propertyName, defaultValue) {

  2. if (!object[propertyName]) {

  3. return defaultValue;

  4. }

  5. return object[propertyName];

  6. }

  7.  

  8. const hero = {

  9. name: ‘Batman‘,

  10. isVillian: false

  11. };

  12.  

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

getProp() 读取 name属性的值,即 ‘Batman‘

那么试图访问 isVillian属性:

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

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

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

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

  1. function getPropFixed(object, propertyName, defaultValue) {

  2. if (object[propertyName] === undefined) {

  3. return defaultValue;

  4. }

  5. return object[propertyName];

  6. }

  7.  

  8. const hero = {

  9. name: ‘Batman‘,

  10. isVillian: false

  11. };

  12.  

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

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

这里建议避免直接使用 undefined。因此,上述解决方案可以进一步改进:

  1. function getPropFixedBetter(object, propertyName, defaultValue) {

  2. if (!(propertyName in object)) {

  3. return defaultValue;

  4. }

  5. return object[propertyName]

  6. }

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

最佳实践列表:

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

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

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

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

  • ifcondition){...}, whilecondition){...}等语句: condition 必须是一个布尔类型值

你可能会说这种方式需要编写更多代码......你是对的!但是通过明确的方法,可以控制代码的行为。此外,显性提高了可读性。

2. 不要使用早期的JavaScript技巧

JavaScript的有趣之处在于,它的创建者没有料到这种语言会如此流行。

基于JavaScript构建的应用程序的复杂性比语言发展的速度还要快。这种情况迫使开发人员使用JavaScript技巧和变通方法,只是为了让事情正常运行。

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

ES6 及以后版本的功能要强大得多,可以使用新的语言特性安全地重构许多技巧。

ES6 中可以使用 array.includes(item) 来代替 array.indexOf(item)!==-1

3. 不要污染函数作用域

在ES2015之前,你可能会养成了将所有变量声明在函数作用域里面。

来看看一个例子:

  1. function someFunc(array) {

  2. var index, item, length = array.length;

  3. /*

  4. * Lots of code

  5. */

  6. for (index = 0; index < length; index++) {

  7. item = array[index];

  8. // Use `item`

  9. }

  10. return someResult;

  11. }

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

通过引入具有块作用域 let和 const,应该尽可能地限制变量的生命周期。

  1. function someFunc(array) {

  2. /*

  3. * Lots of code

  4. */

  5. const length = array.length;

  6. for (let index = 0; index < length; index++) {

  7. const item = array[index];

  8. // Use `item`

  9. }

  10. return someResult;

  11. }

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

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

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

if 块作用域

  1. // 不好

  2. let message;

  3. // ...

  4. if (notFound) {

  5. message = ‘Item not found‘;

  6. // Use `message`

  7. }

  8.  

  9. // 好

  10. if (notFound) {

  11. const message = ‘Item not found‘;

  12. // Use `message`

  13. }

for 块作用域

  1. // 不好

  2. let item;

  3. for (item of array) {

  4. // Use `item`

  5. }

  6.  

  7. // 好

  8. for (const item of array) {

  9. // Use `item`

  10. }

4.尽量避免 undefined 和 null

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

  1. let count;

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

  3.  

  4. const hero = {

  5. name: ‘Batman‘

  6. };

  7. console.log(hero.city); // => undefined

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

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

为什么直接使用 undefined是一个不好习惯?因为与 undefined进行比较时,你正在处理未初始化状态的变量。

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

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

判断属性是否存在

  1. // 不好

  2. const object = {

  3. prop: ‘value‘

  4. };

  5. if (object.nonExistingProp === undefined) {

  6. // ...

  7. }

  8.  

  9. // 好

  10. const object = {

  11. prop: ‘value‘

  12. };

  13. if (‘nonExistingProp‘ in object) {

  14. // ...

  15. }

对象的默认属性

  1. // 不好

  2. function foo(options) {

  3. if (object.optionalProp1 === undefined) {

  4. object.optionalProp1 = ‘Default value 1‘;

  5. }

  6. // ...

  7. }

  8.  

  9. // 好

  10. function foo(options) {

  11. const defaultProps = {

  12. optionalProp1: ‘Default value 1‘

  13. };

  14. options = {

  15. ...defaultProps,

  16. ...options

  17. }

  18. }

默认函数参数

  1. // 不好

  2. function foo(param1, param2) {

  3. if (param2 === undefined) {

  4. param2 = ‘Some default value‘;

  5. }

  6. // ...

  7. }

  8. // 好

  9. function foo(param1, param2 = ‘Some default value‘) {

  10. // ...

  11. }

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

一旦 null出现在调用堆栈中,就必须在每个可能访问 null的函数中检查它的存在,这很容易出错。

  1. function bar(something) {

  2. if (something) {

  3. return foo({ value: ‘Some value‘ });

  4. } else {

  5. return foo(null);

  6. }

  7. }

  8.  

  9. function foo(options) {

  10. let value = null;

  11. if (options !== null) {

  12. value = options.value;

  13. // ...

  14. }

  15. return value;

  16. }

尝试编写不涉及 null的代码。可替代方法是 try/catch机制,默认对象的使用。

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

有什么比阅读具有随机编码风格的代码更令人生畏的事情?你永远不知道会发生什么!

如果代码库包含许多开发人员的不同编码风格,该怎么办?,这种就像各色人物涂鸦墙。

 

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

一些有用的编码风格的例子:

  • Airbnb JS 风格指南

  • 谷歌 JS 风格指南

老实说,当我在回家前准备提交时,我可能会忘记设计代码的样式。

我自己总说:保持代码不变,以后再更新它,但是“以后”意味着永远不会。

这里建议使用 eslint 来规范编码风格。

  1. 安装eslint

  2. 使用最适合自己的编码风格配置 eslint

  3. 设置一个预提交钩子,在提交之前运行eslint验证。

总结

编写高质量和干净的代码需要纪律,克服不好的编码习惯。

JavaScript是一种宽容的语言,具有很大的灵活性。但是你必须注意你所使用的特性。这里建议是避免使用隐式类型转换, undefined 和 null 。

现在这种语言发展得相当快。找出复杂的代码,并使用最新 JS 特性来重构。

整个代码库的一致编码风格有益于可读性。良好的编程技能总是一个双赢的解决方案。

JS 的5个不良编码习惯

标签:undefined   需要   rand   class   怎么   判断   运算符   strong   进一步   

原文地址:https://www.cnblogs.com/qhantime/p/11445227.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!