Javascript

你中了几条,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"); // => 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.png

image.png

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

可参考的编码风格示例:

  • Airbnb JavaScript 风格指南

  • 谷歌 JavaScript 风格指南

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

  • 安装 eslint

  • 使用最适合你的编码风格配置 eslint

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

6.总结

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

作者:dmitripavlutin 译者:前端css和js干货 来源:Dmitri Pavlutin

 

这篇关于你中了几条,5个js编码的坏习惯的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!