JavaScript の次の 5 つの間違いを避けてください

javascript 列には、コードを読みやすく、保守しやすくするための 5 つのヒントがリストされます。

古いプロジェクトを編集しているときに、新しいロジックが追加されるとすぐに「粉々」になる、混乱を招くコードに遭遇したことはありませんか?もちろん、私たちは皆そこに行ったことがあります。 読めない Javascript コードから世界を救うために、次の 5 つの例を示さなければなりません - 私の恥の柱です。

配列分割を使用して関数の複数の戻り値を取得する

複数の値を返す関数がある場合、配列分割を使用して値を取得できます。コードは次のとおりです。

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4; 
  return [a,b,c,d];
}const [a,b,c,d] = func();console.log(a,b,c,d); // Outputs: 1,2,3,4复制代码

上記のメソッドでは割り当てを実行できますが、いくつかの副作用があります。

関数を呼び出して戻り値 a,b,c,d を取得する場合、戻り値が返される順序に注意する必要があります。ここでの小さな間違いは、デバッグの悪夢になる可能性があります。

順序に注意するだけでなく、必要な戻り値をいくつかだけ取得することはできません。c,d だけが必要な場合はどうすればよいでしょうか?

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4;  return {a,b,c,d};
}const {c,d} = func();复制代码

オブジェクトの構造化代入を使用して置き換えることができます。

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4;  return {a,b,c,d};
}const {c,d} = func();复制代码

これで、必要な関数の戻り値を自由に選択できるようになりました。

将来、関数によってさらに多くの戻り値が追加された場合でも、オブジェクトを構造化するコードは変更されないため、コードがより安定します。

関数の入力パラメーターではオブジェクトの分割は使用されません

入力パラメーターがオブジェクトである関数があり、関数内のコードでこのオブジェクトのプロパティを使用する必要があるとします。 単純な実装は次のとおりです。

// badfunction getDaysRemaining(subscription) {  const startDate = subscription.startDate;  const endDate = subscription.endDate;  return endDate - startDate;
}复制代码

このソリューションはニーズを満たしていますが、2 つの不要な一時参照変数 startDate と endDate を宣言しています。

より良い解決策は、オブジェクトの構造化を使用して入力パラメータ startDate と endDate を 1 行で取得することです。

// betterfunction getDaysRemaining(subscription) {  const { startDate, endDate } = subscription;  return startDate - endDate;
}复制代码

オブジェクトの構造化を使用して、これら 2 つの変数を入力パラメータで直接定義することもできます。

// even betterfunction getDaysRemaining({ startDate, endDate }) {  return startDate - endDate;
}
Much more elegant wouldn’t you agree?复制代码

こちらの方がエレガントだと思いませんか?

展開構文を使用せずに配列をコピーします (...)

Use for 要素をループして新しい配列にコピーするのは面倒なだけでなく、醜い。

拡張構文を使用すると、実装がより明確かつ簡潔になります。

const stuff = [1,2,3];// badconst stuffCopyBad = []for(let i = 0; i < stuff.length; i++){
  stuffCopyBad[i] = stuff[i];
}// goodconst stuffCopyGood = [...stuff];复制代码

Use Var

const を使用して、変数が再割り当てできないようにします。これにより、バグが減少し、コードの可読性が向上します。

// badvar x = "badX";var y = "baxY";// goodconst x = "goodX";const y = "goodX";复制代码

本当に変数を再割り当てする必要がある場合は、常に var より let を優先してください。 本当に変数を再割り当てする必要がある場合は、var の代わりに let を使用してください。

let はブロック スコープで動作し、var は関数スコープで動作します。

ブロック スコープでは、変数が定義されているコード ブロック内でのみ変数が有効になります。ブロック スコープ外で変数にアクセスすると、ReferenceError が発生します。

for(let i = 0; i < 10; i++){  //something}
print(i) // ReferenceError: i is not defined复制代码

関数スコープで定義された変数は、それが定義されている関数のスコープ内で使用できます。

for(var i = 0; i < 10; i++){  //something}console.log(i) // Outputs 10复制代码

let と const で定義された変数は両方ともブロック スコープでアクセスできます。

テンプレート文字列を使用しない

文字列を手動で結合することは、書くのが非常に複雑で、読むのもわかりにくいです。例を参照してください:

// badfunction printStartAndEndDate({ startDate, endDate }) {  console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}复制代码

テンプレート文字列は、変数を文字列に挿入する明確で読みやすい方法を提供します。

// goodfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}复制代码

テンプレート文字列を使用すると、行を折り返す簡単な方法が提供されます。(システム内で) 通常使用するのと同じように、キーボードの enter キーを押すだけです。

// prints on two linesfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}
  EndDate: ${endDate}`)
}复制代码

#その他の関連する無料学習の推奨事項: javascript(ビデオ)

以上がJavaScript の次の 5 つの間違いを避けてくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。