JavaScriptのベストプラクティス

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
他のプログラミング言語と同様に、JavaScriptはプログラムを読みやすく維持するためにベストプラクティスの独自のリストを持っています.JavaScriptにトリッキーな部分がたくさんあるので、避けるべきことがたくさんあります.
我々はJavaScriptコードを読みやすくするためにいくつかのベストプラクティスに従うことができます.
この記事では、我々は我々が避けなければならないより多くの建設を見ますfor...in ループ== 演算子arguments オブジェクトthis .

のための誤用

The for...in ループは、配列や配列のようなオブジェクトを反復処理するために使用すべきではありません.例えば、

const arr = ['a', 'b', 'c', 'd', 'e'];
for (let i in arr) {
  console.log(i)
}

私たちは戻る

0
1
2
3
4

しかし、これは誤用ですfor...in ループは、配列のインデックスをループするのではなく、オブジェクトとそのプロトタイプの列挙可能なプロパティを反復処理することになっています.
列挙体の順序は保証されませんので、配列をループでループすることはできません.
The for...in ループはまた、列挙可能な継承されたプロパティをループします.
例えば、
次に、プロトタイプオブジェクトを持つオブジェクトを作成しますfoo プロパティ.The for...in ループは、obj ’sプロトタイプとobj .
プロトタイプのプロパティをループするのを避けるためにObject.keys 代わりに

for (let prop of Object.keys(obj)) {
  console.log(prop);
}

我々は、キーの値のペアをobj そのプロトタイプから何もせずに、我々は使うことができますObject.entries :

for (let entry of Object.entries(obj)) {
  console.log(entry);
}

配列と配列のようなオブジェクトをループするには、for...of 代わりにループ

const arr = ['a', 'b', 'c', 'd', 'e'];
for (let a of arr) {
  console.log(a)
}

次に、配列のエントリを取得します.

これをいじめる

The this オブジェクトは常にJavaScriptで問題です.スコープによって変化するためです.
幸いにも、ES 6では、我々の値を変更しない矢印関数がありますthis 我々がそれを中で参照するならば.これはまた、我々の価値を変えることができないことを意味しますthis with call , bind , or apply .
たとえば、次のコードはwindow 対象:
値this それを変えても変えないbind .
また、ES 6はコンストラクタ関数を作成するためのクラス構文を持っていますthis クラスメソッドと矢印関数を使用する限りクラスの内部にある必要があります.
クラスメソッドは、this クラス内の矢印関数は、this .
写真でCasey Allen をUnsplash

===演算子

The == 演算子は、オペランドを比較する前に自動型変換を行います.これは、異なったタイプのデータが同じであると考えられる問題を引き起こします.
例えば、null == undefined リターンtrue , 我々はおそらくしたくない.null == undefined リターンtrue 彼らは両方のfalsyだから.
これらの種類の問題を避けるために=== 演算子の代わりに、これらの種類のオペランドを返すtrue . これは=== オペランドの内容に加えて各オペランドの型をチェックします.

引数オブジェクト

残りの演算子の導入により、最終的にはarguments 関数に渡された引数を取得するためのオブジェクトです.
The arguments オブジェクトはいくつかの理由で使用すべきではありません.一つは、オブジェクトのような配列であり、length それの中にあります、そして、それはAを通してループされることができますfor ループですが、配列のメソッドmap and forEach 含まれない.
また、実際に配列ではないので、そのインデックスにエントリをアクセスできます.
使用arguments また、ブラウザのエンジンによってコードの最適化を防ぎます.また、arguments オブジェクトは矢印関数では使用できません.
したがって、記載されているパラメータを超えた余分な引数にアクセスするには、残りの演算子を使用する必要があります.
例えば、書く代わりに
書くことができます.

const add = (...args) => args.reduce((a, b) => a + b, 0);
console.log(add(1, 2, 3, 4, 5));

残りの演算子を使用するにはずっと短いことに注意してください....args 関数シグネチャの一部.args 配列が既に配列になっているので、使用する配列メソッドをすべて使用できます.

結論

現代のJavaScriptでは、我々のコードを読みやすく維持するために多くの古い構造を放棄することができます.
残りの演算子はarguments オブジェクト.これは、残りの演算子が配列の代わりに引数の配列を与えるからですarguments オブジェクト.
また、我々は避ける必要があります== 同等の比較演算子です.
また、私たちはthis コンストラクタ関数の矢印関数とクラス構文を使用します.これらの2つの構文はthis 多くのクリア.クラスメソッドやクラスクラスのメソッドではなく、クラスのメソッドではない関数を使用します.
最後にfor...in ループは、配列と配列のようなオブジェクトをループするために使用されるべきではありません.