何年もJavaScriptの授業料を払っていますが、どのくらい把握していますか(第1期)

"===="と"!="の代わりに"===="と"!="を使用するべきです.==と!=の値を比較する前に、タイプ強制が実行されます.タイプエラーを隠す可能性があるので、これは大変です.
例えば、その計算結果' \t\r
' == 0はtrueに戻る.
タイプによって要素を選択するには、[type=...]を適用します.:および[type=""]は、jQueryで要素タイプ別に要素を選択するために使用できますが、[type=""]は、querySelectorAll()の現代ブラウザにおけるネイティブDOMメソッドを利用することができるため、より高速です.
次のセレクタを使用すると、このルールに問題が発生します.

:checkbox

:file

:image

:password

:radio

:reset

:text

互換性のないコードの例:

var input = $（“ form input：radio”）; //     

互換性のあるソリューション:

var input = $（“ form input [type = radio]”）; //  

使用を推奨しません.このルールは破棄され、最終的には削除されます.
「alert(...)」は使用しないでください.alert(...)およびconfirm(...)およびprompt(...)は、開発中にデバッグするのに非常に有用であるが、このようなポップアップの可能性のある機密情報は、攻撃者に表示されるべきではない.
互換性のないコードの例:

if（unexpectedCondition）{
  alert（“    ”）;
}

「arguments」は直接アクセスするべきではありません
JavaScriptの不思議な点は、パラメータを宣言されていない関数に渡すことができる一方で、no-args内でこれらの入力パラメータfunctionを使用することもできます.
パラメータを明示的に命名したくない場合は、...構文を使用して、所望の可変数のパラメータを指定します.次に、関数の内部で、配列のような構造ではなく、配列のクラスを処理します.
互換性のないコードの例:

function concatenate() {
  let args = Array.prototype.slice.call(arguments);  // Noncompliant
  return args.join(', ');
}

function doSomething(isTrue) {
  var args = Array.prototype.slice.call(arguments, 1); // Noncompliant
  if (!isTrue) {
    for (var arg of args) {
      ...
    }
  }

互換性のあるソリューション:

function concatenate(...args) {
  return args.join(', ');
}

function doSomething(isTrue, ...values) {
  if (!isTrue) {
    for (var value of values) {
      ...
    }
  }
}

「arguments.caller」および「arguments.callee」は使用しないでください.arguments.callerとarguments.callee は、JavaScriptの最新バージョンでは推奨されないように、多くの最適化されています.実際、strictはドキュメントに基づいて、EcmaScript 5はモードで両方を同時に使用することを禁止しています.
厳格モード機能のパラメータオブジェクトは、“ caller”および“ callee”という構成不可能なアクセサ属性を定義し、これらの属性は、アクセス時にTypeError を開始する.
互換性のないコードの例:

function whoCalled() {
   if (arguments.caller == null)   //Noncompliant
      console.log('I was called from the global scope.');
   else
      console.log(arguments.caller + ' called me!');  // Noncompliant

  console.log(whoCalled.caller);  // Noncompliant
  console.log(whoCalled.arguments);  // Noncompliant

「await」は冗長に使用しないでください
async関数は常に戻り値Promiseに包まれ、return awaitの使用は余計です.
互換性のないコードの例:

async function foo() {
  // ...
}

async function bar() {
  // ...
  return await foo(); // Noncompliant
}

互換性のあるソリューション:

async function foo() {
  // ...
}

async function bar() {
  // ...
  return foo();
}

「catch」句の役割は、再放出だけではありません
1つのcatch句は、catchを完全に省略して自動的にポップアップさせる効果と同じ効果で、より多くのコードが生成され、メンテナンススタッフの作業量が増加するキャプチャされた例外のみが再放出されます.
このような句は、適切な論理的埋め込みを除去または使用する必要があります.
互換性のないコードの例:

try {
  doSomething();
} catch (ex) {  // Noncompliant
  throw ex;
}

互換性のあるソリューション:

try {
  doSomething();
} catch (ex) {
  console.err(ex);
  throw ex;
}

「continue」は使用しないでください.
continueは非構造化の制御フロー文です.コードのテスト性、読み取り可能性、メンテナンス性を低下させます.if構造化された制御フロー文を使用する必要があります.たとえば、次のようにします.
互換性のないコードの例:

  for (i = 0; i < 10; i++) {
    if (i == 5) {
      continue;  /* Noncompliant */
    }
    alert("i = " + i);
  }

互換性のあるソリューション:

 for (i = 0; i < 10; i++) {
    if (i != 5) {  /* Compliant */
      alert("i = " + i);
    }
  }

「default」句は最後に書く
switchは、defaultが様々な理由で、すべての状況が適切に考慮されていることを示すために、予期せぬ値を処理する句を含むことができる.
読み取り可能性を考慮して、開発者がswitch文のデフォルトの動作を迅速に見つけるのを助けるために、default句を文の末尾にswitchを置くことをお勧めします.default句が最初のまたは最後のswitchケースでない場合、このルールは問題を引き起こします.
互換性のないコードの例:

switch (param) {
  case 0:
    doSomething();
    break;
  default: // default clause should be the first or last one
    error();
    break;
  case 1:
    doSomethingElse();
    break;
}

互換性のあるソリューション:

switch (param) {
  case 0:
    doSomething();
    break;
  case 1:
    doSomethingElse();
    break;
  default:
    error();
    break;
}

「delete」はオブジェクト属性のみで使用します.
delete演算子の意味は少し厄介で、オブジェクトから属性を削除するのに信頼できるだけです.他のコンテンツを渡すと、予想される結果が得られない可能性があります.
互換性のないコードの例:

var x  = 1;
delete x;       // Noncompliant

function foo(){
..
}

delete foo;  // Noncompliant

互換性のあるソリューション:

var obj = {
  x:1,
  foo: function(){
  ...
  }
};
delete obj.x;
delete obj.foo;

「delete」は配列で使用するべきではありません
deleteは、任意のオブジェクトから属性を削除するために使用できます.配列はオブジェクトであるため、deleteはここで演算子を使用することもできますが、そうであれば、インデックス/キーが削除を反映するように移動しないため、配列に穴が残ります.
インデックスの要素を削除するには、次のようにします.

Array.prototype.splice-配列から要素

を追加/削除

Array.prototype.pop-配列の末尾から要素

を追加/削除

Array.prototype.shift-配列の先頭から要素

を追加/削除
互換性のないコードの例:

var myArray = ['a', 'b', 'c', 'd'];

delete myArray[2];  // Noncompliant. myArray => ['a', 'b', undefined, 'd']
console.log(myArray[2]); // expected value was 'd' but output is undefined

互換性のあるソリューション:

var myArray = ['a', 'b', 'c', 'd'];

// removes 1 element from index 2
removed = myArray.splice(2, 1);  // myArray => ['a', 'b', 'd']
console.log(myArray[2]); // outputs 'd'

「for...in」ループは、プロパティをフィルタリングしてから操作します.
for...in文では、オブジェクトのすべてのプロパティの名前を巡回できます.プロパティリストには、プロトタイプチェーンで継承されたすべてのプロパティが含まれます.データがセクシーな興味を持つ場合、これは機能を提供する副作用を有する.この点を考慮しないプログラムは失敗する可能性があります.
したがって、各for...in文のボディはifフィルタに含まれるべきであり、フィルタがどの属性に作用するか.特定のタイプまたは値範囲を選択したり、関数を除外したり、プロトタイプのプロパティを除外したりできます.
互換性のないコードの例:

for (name in object) {
    doSomething(name);  // Noncompliant
}

互換性のあるソリューション:

for (name in object) {
  if (object.hasOwnProperty(name)) {
    doSomething(name);
  }
}

「indexOf」チェックは正数ではありませんindexO f文字列または配列に対する呼び出しチェックの多くは、0が有効なインデックスであるため、-1と比較されます.値>0を検索するチェックでは、最初の要素は無視されます.これはエラーの可能性があります.文字列の存在のみをチェックする場合は、includesを使用に変更することを考慮してください.includesメソッドを使用する前に、ブラウザバージョンがこのメソッドをサポートしていることを確認してください.
互換性のないコードの例:

var color = "blue";
var name = "ishmael";
var number = 123;

var arr = [color, name];

if (arr.indexOf("blue") > 0) { // Noncompliant
  // ...
}
if (name.indexOf("ish") > 0) { // Noncompliant
  // ...
}

互換性のあるソリューション:

var color = "blue";
var name = "ishmael";
var number = 123;

var arr = [color, name];

if (arr.indexOf("blue") >= 0) {
  // ...
}
if (name.includes("ish")) {
  // ...
}

比較では「NaN」は使用しない
NaNは何にも等しくなく、何にも等しくない.同等性または不均等性のテストを行うためにNaNは予測可能な結果を生成しますが、希望する結果ではない可能性があります.
逆に、変数が等しいかどうかを確認する最良の方法NaNは、Number.isNaN()ES2015を使用して以来、または(直感に反するかもしれない)を使用して自身と比較されている.その時からNaN ! == NaNa ! == aはNaNに等しくなければならないことを知っています.
互換性のないコードの例:

var a = NaN;

if (a === NaN) {  // Noncompliant; always false
  console.log("a is not a number");  // this is dead code
}
if (a !== NaN) { // Noncompliant; always true
  console.log("a is not NaN"); // this statement is not necessarily true
}

互換性のあるソリューション:

if (Number.isNaN(a)) {
  console.log("a is not a number");
}
if (!Number.isNaN(a)) {
  console.log("a is not NaN");
}

strictモードは慎重に使用してください
JavaScript厳格モードを強制的に実行するのは良い習慣かもしれませんが、JavaScript厳格モードをサポートしていないブラウザで予期せぬ動作が発生する可能性があります.したがって、この機能は慎重に使用し、サポートされていないブラウザの潜在的な結果を十分に理解する必要があります.
互換性のないコードの例:

function strict() {
  'use strict';

「super()」を適切に呼び出すべきです
場合によってはsuper()が呼び出される必要がありますが、場合によってはsuper()が呼び出されません.
基本ルールは、派生クラス以外のコンストラクション関数ではsuper()を呼び出すことができません.派生クラスのコンストラクション関数はsuper()を呼び出す必要があります.
さらに、

super()は、this and superキーワードを使用する前に呼び出さなければなりません.

super()は、ベースクラスのコンストラクション関数と同じ数のパラメータを使用して呼び出さなければならない.

super()は、コンストラクション関数でのみ呼び出されます.他の方法では呼び出されません.

super()は、同じコンストラクション関数で複数回呼び出すことはできません.

互換性のないコードの例:

class Dog extends Animal {
  constructor(name) {
    super();
    this.name = name;
    super();         // Noncompliant
    super.doSomething();
  }
}

互換性のあるソリューション:

class Dog extends Animal {
  constructor(name) {
    super();
    this.name = name;
    super.doSomething();
  }
}

「switch」文はネストすべきではありません
ネストされたswitch構造は理解しにくい.内部の状況を外部に属する文と混同しやすいからだ.したがって、switchはネストされた文を使用しないでください.
具体的には、switch文をネストする必要がないようにコードを構造化する必要がありますが、できない場合は、内部構造switchを別の関数に移動することを考慮してください.
互換性のないコードの例:

function foo(n, m) {
  switch (n) {
    case 0:
      switch (m) {  // Noncompliant; nested switch
        // ...
      }
    case 1:
      // ...
    default:
      // ...
  }
}

互換性のあるソリューション:

function foo(n, m) {
  switch (n) {
    case 0:
      bar(m);
    case 1:
      // ...
    default:
      // ...
  }
}

function bar(m) {
  switch(m) {
    // ...
  }
}