JS コーディングにおける 5 つの悪い習慣、それらを回避する方法は?

JavaScript コードを読んでいるときに、そのコードが何をしているのかほとんど理解できないと感じたことはありませんか?

• コードには JavaScript のトリックがたくさん使用されていますか?

• 名前とコーディングのスタイルがカジュアルすぎませんか?

• これらはすべて、悪いコーディング習慣の兆候です。

• この記事では、JavaScript でよくある 5 つの悪いコーディング習慣について説明します。重要なのは、この記事では、これらの習慣を取り除く方法についての実践的なアドバイスを提供することです。

1. 暗黙的な型変換を使用しない

JavaScript は型付けが緩やかな言語です。これは、正しく使用すると柔軟性が得られるため、利点があります。 ほとんどの演算子 - * / == (=== を除く) は、異なる型のオペランドを処理するときに暗黙的な変換を実行します。

ステートメント if (条件) {...}、while (条件) {...} は、暗黙的に条件をブール値に変換します。

次の例は暗黙的な型変換に依存しているため、混乱を招く場合があります:

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

暗黙的な型変換に依存しすぎるのは悪い習慣です。まず、エッジケースではコードの安定性が低下します。次に、再現や修正が難しいバグが発生する可能性が高くなります。

次に、オブジェクトのプロパティを取得する関数を実装します。属性が存在しない場合、関数はデフォルト値を返します。

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

これはエラーです。ヒーローのプロパティ isVillian が false であっても、関数 getProp() は false 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] === 未定義 プロパティが未定義かどうかを正確に確認してください。

unknown を直接使用しないことをお勧めします。したがって、上記の解決策はさらに改善することができます。

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

著者の提案をご容赦ください: 暗黙的な型変換はできるだけ使用しないでください。代わりに、必要に応じて明示的な型変換を使用して、変数と関数パラメーターが常に同じ型であることを確認してください。

ベスト プラクティス リスト:

比較には常に厳密な等価演算子 === を使用します。

• 緩い等価演算子は使用しないでください。 ==

• 加算演算子 operand1 operand2: 両方のオペランドは数値または文字列である必要があります

• 算術演算子 - */%**: 両方のオペランドは数値または文字列である必要があります数値であること

• #if (条件) {...}、while (条件) {...} およびその他のステートメント: 条件はブール値である必要があります

• この方法ではさらに多くのコードを記述する必要があると思われるかもしれません...その通りです。ただし、明示的なメソッドを使用すると、コードの動作を制御できます。さらに、明示的にすることで可読性が向上します。

• 2. 初期の JavaScript トリックは使用しないでください

JavaScript の興味深い点は、その作成者がこの言語がこれほど人気が​​あるとは予想していませんでした。 JavaScript で構築されたアプリケーションの複雑さは、言語よりも速く進化しています。この状況では、開発者は、物事を適切に動作させるためだけに JavaScript のトリックや回避策を使用する必要があります。

典型的な例は、配列に特定の要素が含まれているかどうかを確認することです。私は array.indexOf(item) を使うのが好きではありません。 == -1 をチェックします。

ES6 以降はさらに強力になっており、新しい言語機能を使用して多くのトリックを安全にリファクタリングできます。

ES6 では、array.indexOf(item) の代わりに array.includes(item) を使用できます !== -1

3. 関数を汚さないでください。 scope

ES2015 より前は、すべての変数を関数スコープで宣言する習慣があったかもしれません。 例を見てみましょう:

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() ループ ブロックのスコープに制限されます。長さが使用される場所に近くなりました。

リファクタリングされたコードは、変数が関数スコープ全体に散在せず、使用される場所の近くに存在するため、理解しやすくなります。

使用されるブロック スコープで変数を定義します

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.未定義と null を避けるようにしてください

#未割り当ての変数には、デフォルトで未定義が割り当てられます。たとえば、

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

count 変数は定義されていますが、値で初期化されていません。 JavaScript は暗黙的に未定義を割り当てます。 存在しないプロパティ hero.city にアクセスした場合も、unknown が返されます。

未定義を直接使用するのはなぜ悪い習慣なのでしょうか?未定義と比較する場合、初期化されていない状態の変数を扱っていることになるためです。

変数、オブジェクトのプロパティ、配列は、使用する前に値で初期化する必要があります

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教程》

以上がJS コーディングにおける 5 つの悪い習慣、それらを回避する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。