高品質なJavaScriptコードの書き方

//悪い
関数foo(x,y) {
  戻る {
    合計: x + y
  };
}
関数バー(m, n){
  ret = m*nとする
  ret を返します。
}
//良い
function foo(x, y) { // 適切なスペースで区切ります。通常、シンボルの前にはスペースは追加されませんが、シンボルの後にはスペースが追加されます。 return {
    sum: x + y, // 末尾のカンマは有効で、オブジェクトや配列への要素の追加や削除が簡単になります} // 終了セミコロンは省略できますが、リスクを回避する方法を知っておく必要があります}
関数バー(m, n) {
  ret = m * nとする
  リターン ret
}

//悪い
タイムアウトを設定します(blastOff、86400000)
document.onkeydown = 関数 (ev) {
  ev.keyCode === 13の場合{
    // やること
  }
}
//良い
定数 1 日のミリ秒 = 86400000
定数 ENTER_KEY = 13
setTimeout(blastOff、1日あたりミリ秒)
document.onkeydown = 関数 (ev) {
  ev.keyCode === ENTER_KEY の場合 {
    // やること
  }
}

//悪い
クラスFoo {
    関数foo(){
        この数値 = 100
        this.el.onclick = 関数 () {
            this.className = "アクティブ"
        }
    }
}
//良い
クラスFoo {
    関数foo(){
        コンテキスト = this
        コンテキスト.番号 = 100
        context.el.onclick = 関数 () {
            el = thisとする
            el.className = "アクティブ"
        }
    }
}

//悪い
関数コピー(obj, deep) {
  if (深い) {
    //ディープコピー} else {
    // 浅いコピー}
}
//良い
関数コピー(obj) {
  // 浅いコピー}
関数 deepCopy(obj) {
  // ディープコピー}

//悪い
関数foo(){
  結果を出す
  if (isDead) {
    結果 = deadAmount()
  } それ以外 {
    if (isRet) {
      結果 = retAmount()
    } それ以外 {
      結果 = 通常の金額()
    }
  }
  結果を返す
}
//良い
関数foo(){
  if (isDead) {
    deadAmount() を返す
  }
  if (isRet) {
    retAmount() を返す
  }
  通常の金額を返す()
}

//悪い
関数foo(){
    （正常かどうか）
        やること()
    }
    グレードを付ける
    if (isAdmin) {
        グレード = 1
    } それ以外 {
        グレード = 0
    }
}
//良い
関数foo(){
    isOk && todo() // 短絡演算 let grade = isAdmin ? 1 : 0 // 条件演算子 }

//悪い
fs = require("fs") とします。
関数init() {
  fs.mkdir(ルート、(エラー) => {
    fs.mkdir(path.join(root, "public", "stylesheets"), (err) => {
      fs.writeFile() 関数は、
        path.join(ルート、"public"、"stylesheets"、"style.css")、
        "",
        関数 (エラー) {}
      ）
    })
  })
}
初期化()
//良い
fs = require("fs").promises とします。
非同期関数init() {
  fs.mkdir(ルート) を待機します。
  fs.mkdir(path.join(root, "public", "stylesheets")) を待ちます。
  fs.writeFile(path.join(root, "public", "stylesheets", "style.css"), "") を待機します。
}
初期化()

//悪い
関数foo(n) {
  (n === 1)の場合{
    戻り値 1
  }
  n * foo(n - 1) を返す
}
foo(100) // 平均時間: 0.47ms
//良い
関数foo(n, 結果 = 1) {
  (n === 1)の場合{
    結果を返す
  }
  return foo(n - 1, n * result) // ここで末尾呼び出しの最適化}
foo(100) // 平均時間: 0.09ms

//悪い
データ = {
  ユーザー名: "leo",
  年齢: 20,
  性別:「男性」、
}
結果 = []
for (let attr in data) {
  結果.push([attr, data[attr]])
}
console.log(結果)
//良い
データ = {
  ユーザー名: "leo",
  年齢: 20,
  性別:「男性」、
}
結果 = Object.entries(データ)
console.log(結果)

//悪い
関数foo(){
  $("li").click(function () { // グローバル検索を 1 回実行$("li").hide() // グローバル検索を再度実行$(this).show()
  })
}
//良い
関数foo(){
  let $li = $("li") // $liのスコープ検索レベルを下げます $li.click(function () {      
    $li.非表示()               
    $(これ).表示()
  })
}

//悪い
関数isNull(引数) {
  Object.prototype.toString.call(arg) === "[オブジェクト Null]" を返します
}
関数isFunction(引数) {
  return Object.prototype.toString.call(arg) === "[オブジェクト関数]"
}
//良い
toString = Object.prototype.toString とします。
関数isNull(引数) {
  return toString.call(arg) === "[オブジェクト Null]"
}
関数isFunction(引数) {
  return toString.call(arg) === "[オブジェクト関数]"
}

//悪い
インデックスを0にする
(i = 0, len = li.length; i < len; i++) の場合 {
    if (li[i].dataset.switch === "on") {
        インデックス = i
    }
}
//良い
インデックスを0にする
(i = 0, len = li.length; i < len; i++) の場合 {
    if (li[i].dataset.switch === "on") {
        インデックス = i
        break // 次のループは意味がなく、不要なコードを実行します}
}

//悪い
関数foo(n) {
  (n < 3) の場合 {
    戻り値 1
  }
  foo(n - 1) + foo(n - 2) を返す
}
foo(40) // 平均時間: 1043ms
//良い
キャッシュを {} にします
関数foo(n) {
  (n < 3) の場合 {
    戻り値 1
  }
  if (!cache[n]) {
    キャッシュ[n] = foo(n - 1) + foo(n - 2)
  }
  キャッシュを返す[n]
}
foo(40) // 平均時間: 0.16ms

//悪い
変数a = 1
isNaN(NaN) // 真
isNaN(未定義) // 真
//良い
a = 1とする
Number.isNaN(NaN) // 真
Number.isNaN(undefined) // false

//悪い
ユーザー = { 名前: "ジェームズ", 年齢: 36 }
関数foo(){
  arg = 引数
  名前 = ユーザー名
  年齢 = user.age とします
}
//良い
ユーザー = { 名前: "ジェームズ", 年齢: 36 }
function foo(...arg) { // 残りパラメータ let { name, age } = user // 分割代入 }

//悪い
関数 foo(動物) {
  if (動物 === "犬" || 動物 === "猫") {
    // やること
  }
}
関数バー(名前、年齢) {}
バー("ジェームズ", 36)
//良い
関数 foo(動物) {
  const animals = ["dog", "cat", "hamster", "turtle"] // 拡張可能な一致する値 if (animals.includes(animal)) {
    // やること
  }
}
function bar(options) {} // 任意のパラメータを拡張できる bar({
  性別:「男性」、
  名前:「ジェームズ」、
  年齢: 36歳
})

//悪い
フルーツ = 「アップルバナナ」
関数splitFruits() {
  フルーツ = fruit.split(" ")
}
関数 addItemToCart(カート, アイテム) {
  cart.push({ アイテム、データ: Date.now() })
}
//良い
フルーツ = 「アップルバナナ」
関数splitFruits(果物) {    
  戻り値: fruit.split(" ")
}
関数 addItemToCart(カート, アイテム) {
  [...cart, { item, data: Date.now() }] を返します
}

//悪い
エクスポートデフォルト{
  名前: 'アプリ'、
  データ（）{
    戻る {
      検索ホット: [],
      検索候補: [],
      検索履歴: [],
    },
    マウント() {
      // ホットなtodo
      
      // ToDo 履歴
    },
    メソッド: {
      ハンドル検索サジェスト(){
        // todo 提案
      },
      ハンドル検索履歴(){
        // ToDo 履歴
      }
    }
  }
}
//良い
エクスポートデフォルト{
  名前:「アプリ」、
  設定（） {
    {searchHot} = useSearchHot() とします
    {searchSuggest、handleSearchSuggest} = useSearchSuggest() とします。
    {searchHistory、handleSearchHistory} = useSearchHistory() とします。
    戻る {
      検索ホット、
      検索提案、
      検索履歴、
      ハンドル検索提案、
      ハンドル検索履歴、
    }
  }
}
関数useSearchHot() {
  // ホットなtodo
}
関数useSearchSuggest() {
  // todo 提案
}
関数useSearchHistory() {
  // ToDo 履歴
}