5 schlechte Angewohnheiten in der JS-Codierung, wie kann man sie vermeiden?

Hatten Sie jemals dieses Gefühl beim Lesen von JavaScript-Code

• Sie verstehen kaum, was der Code tut?

• Der Code verwendet viele JavaScript-Tricks?

• Name und Codierungsstil zu locker?

• Das sind alles Anzeichen für schlechte Programmiergewohnheiten.

In diesem Artikel beschreibe ich 5 häufige schlechte Programmiergewohnheiten in JavaScript. Wichtig ist, dass dieser Artikel Ihnen einige praktische Ratschläge gibt, wie Sie diese Gewohnheiten loswerden können.

1. Verwenden Sie keine impliziten Typkonvertierungen

JavaScript ist eine lose typisierte Sprache. Bei richtiger Anwendung ist das ein Vorteil, denn es gibt Ihnen Flexibilität.

Die meisten Operatoren + - * / == (außer ===) führen implizite Konvertierungen durch, wenn sie Operanden unterschiedlichen Typs verarbeiten.

Die Anweisungen if(condition){...}, while(condition){...} wandeln die Bedingung implizit in einen booleschen Wert um.

Das folgende Beispiel basiert auf der impliziten Typkonvertierung, was manchmal verwirrend sein kann:

console.log("2" + "1");  // => "21"
console.log("2" - "1");  // => 1
console.log('' == 0);    // => true
console.log(true == []); // -> false
console.log(true == ![]); // -> false

Übermäßiges Vertrauen in die implizite Typkonvertierung ist eine schlechte Angewohnheit. Erstens wird Ihr Code dadurch in Randfällen weniger stabil. Zweitens erhöht es die Wahrscheinlichkeit, dass Fehler auftreten, die schwer zu reproduzieren und zu beheben sind.

Jetzt implementieren wir eine Funktion, um die Eigenschaften des Objekts abzurufen. Wenn das Attribut nicht vorhanden ist, gibt die Funktion einen Standardwert zurück.

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() liest den Wert des Namensattributs, nämlich „Batman“.

Dann wird versucht, auf die Eigenschaft isVillian zuzugreifen:

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

Dies ist ein Fehler. Selbst wenn die Eigenschaft isVillian des Helden falsch ist, gibt die Funktion getProp() false true zurück.

Dies liegt daran, dass die Überprüfung der Existenz der Eigenschaft auf dem booleschen Wert beruht, der implizit von if(!object[propertyName]){...} konvertiert wird.

Diese Fehler sind schwer zu finden. Überprüfen Sie explizit den Typ des Werts:

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] === undefiniert. Überprüfen Sie genau, ob die Eigenschaft undefiniert ist.

Es wird empfohlen, die direkte Verwendung von undefiniert zu vermeiden. Daher kann die obige Lösung weiter verbessert werden:

function getPropFixedBetter(object, propertyName, defaultValue) {
  if (!(propertyName in object)) {
    return defaultValue;
  }
  return object[propertyName]
}

Verzeihen Sie den Vorschlag des Autors: Verwenden Sie nach Möglichkeit keine impliziten Typkonvertierungen. Stellen Sie stattdessen sicher, dass Variablen und Funktionsparameter immer denselben Typ haben, und verwenden Sie bei Bedarf explizite Typkonvertierungen.

Best Practices-Liste:

• Verwenden Sie für Vergleiche immer den strikten Gleichheitsoperator ===.

• Verwenden Sie keine losen Gleichheitsoperatoren ==

• Additionsoperatoren operand1 + operand2: Beide Operanden sollten Zahlen oder Zeichenfolgen sein

• Arithmetische Operatoren - */%**: Beide Operanden sollten Zahlen sein

• if (condition) {...}, while (condition) {...} und andere Anweisungen: Condition Muss ein boolescher Wert sein

• Man könnte sagen, dass dieser Weg das Schreiben von mehr Code erfordert ... Sie haben Recht! Aber mit expliziten Methoden können Sie das Verhalten Ihres Codes steuern. Darüber hinaus verbessert die Explizitheit die Lesbarkeit.

2. Verwenden Sie keine frühen JavaScript-Tricks

Das Interessante an JavaScript ist, dass seine Entwickler es nicht getan haben. Ich hätte nicht erwartet, dass diese Sprache so beliebt sein würde.

Die Komplexität von Anwendungen, die auf JavaScript basieren, entwickelt sich schneller als die Sprache. Diese Situation zwingt Entwickler dazu, JavaScript-Tricks und Problemumgehungen zu verwenden, damit alles ordnungsgemäß funktioniert.

Ein typisches Beispiel ist die Überprüfung, ob ein Array ein bestimmtes Element enthält. Ich benutze nie gerne array.indexOf(item)! == -1 zur Überprüfung.

ES6 und höher sind viel leistungsfähiger und viele Tricks können mithilfe neuer Sprachfunktionen sicher umgestaltet werden.

In ES6 können Sie array.includes(item) anstelle von array.indexOf(item) !== -1 verwenden

3. Verunreinigen Sie die Funktion nicht Bereich

Vor ES2015 haben Sie möglicherweise die Angewohnheit, alle Variablen im Funktionsbereich zu deklarieren.

Schauen wir uns ein Beispiel an:

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;
}

Die Variablen index, item und length liegen im Funktionsumfang. Diese Variablen wirken sich jedoch auf den Funktionsumfang aus, da sie nur innerhalb des for()-Blockumfangs benötigt werden.

Durch die Einführung von let und const mit Blockbereich sollte die Lebensdauer von Variablen so weit wie möglich begrenzt werden.

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- und Elementvariablen sind auf den for()-Schleifenblockbereich beschränkt. Die Länge wurde näher an den Einsatzort gerückt.

Umgestalteter Code ist leichter zu verstehen, da Variablen nicht über den gesamten Funktionsumfang verstreut sind, sondern in der Nähe ihres Verwendungsorts vorhanden sind.

Variablen im verwendeten Blockbereich definieren

wenn Blockbereich

// 不好
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 Versuchen Sie, undefiniert und null zu vermeiden 🎜>

Nicht zugewiesene Variablen werden standardmäßig undefiniert zugewiesen. Beispielsweise ist die Zählvariable

let count;
console.log(count); // => undefined
const hero = {
  name: 'Batman'
};
console.log(hero.city); // => undefined

definiert, wurde aber nicht mit einem Wert initialisiert. JavaScript weist es implizit undefiniert zu.

Beim Zugriff auf die nicht vorhandene Eigenschaft hero.city wird auch undefiniert zurückgegeben.

Warum ist es eine schlechte Angewohnheit, undefiniert direkt zu verwenden? Denn beim Vergleich mit undefiniert haben Sie es mit einer Variablen in einem nicht initialisierten Zustand zu tun.

Variablen, Objekteigenschaften und Arrays müssen vor der Verwendung mit Werten initialisiert werden

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

判断属性是否存在

// 不好
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机制，默认对象的使用。

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

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

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

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

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

Airbnb JS 风格指南

谷歌 JS 风格指南

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

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

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

安装eslint

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

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

总结

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

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

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

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

推荐教程：《JS教程》

Das obige ist der detaillierte Inhalt von5 schlechte Angewohnheiten in der JS-Codierung, wie kann man sie vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!