ジャバスクリプト — 新しい構文と関数

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
他のプログラミング言語と同様に、JavaScriptはプログラムを読みやすく維持するためにベストプラクティスの独自のリストを持っています.JavaScriptにトリッキーな部分もたくさんあります.我々はJavaScriptコードを読みやすくするために簡単にいくつかのベストプラクティスに従うことができます.
この記事では、IFEをモジュールとブロックに置き換えて、伝統的な関数をクラスメソッドと矢印関数に置き換えて、言語属性をscript タグ、純粋な関数を書いて、引数の長いリストを避けてください.

IFEをモジュールとブロックに置き換える

IFEはすぐに呼び出された関数式を表します.これは、関数を定義し、すぐに呼び出すという構成です.
外部からのアクセスを防ぐためにデータを隔離するのは一般的な方法です.また、それは世界的な範囲から彼らを隠します.
これは、モジュールの標準がなく、グローバルスコープから物事を隠す簡単な方法もありません.
しかし,es 6では新機能としてモジュールを導入する.つまり、以下のように置き換えることができます.

(function() {
  let x = 1;
})()

以下のようにします.

let x = 1;

モジュールの外で利用できないなら、私たちはそれをエクスポートしません.
モジュールを使用すると、別のフォルダにモジュールを置くことができますので、IFIESとの名前空間の必要はありません.
また、ES 6のもう一つの新機能は、ブロックです.次に、外側のスコープから分離されたコードのブロックを、次のように曲線括弧を使用して定義できます.

{
  let x = 1;
  console.log(x);
}

ブロックスコープのキーワードlet or const 変数または定数宣言の場合は、アクセスされないようにする必要はありません.
これで、任意のブロックを定義できませんif 文、ループ、またはIifes.

伝統関数を矢印関数とクラス

また、ES 6では、コンストラクタ関数のクラス構文を持っています.それでは、我々は必要はありませんfunction コンストラクタ関数を作成するキーワード.
それは相続をはるかに容易にしますthis ○○.
加えて、我々の値を変更しない矢印関数がありますthis 関数の内部.
唯一の理由はfunction キーワードはジェネレータ関数で、function* キーワード.
たとえば、次のように書くことで簡単なジェネレータ関数を作成できます.

const generator = function*() {
  yield 1;
  yield 2;
}

ジェネレータ関数はジェネレータを返すことができますので、何も返しません.

スクリプトからの言語属性から

The language 属性は、もはや含まれなければなりませんscript タグ.
例えば、書く代わりに

<script src="[https://code.jquery.com/jquery-2.2.4.min.js](https://code.jquery.com/jquery-2.2.4.min.js)" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous" language='text/javascript'></script>

書き込みます.

<script src="[https://code.jquery.com/jquery-2.2.4.min.js](https://code.jquery.com/jquery-2.2.4.min.js)" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

JavaScriptはブラウザで動作する言語左ですからです.
写真でAmbitious Creative Co. - Rick Barrett をUnsplash

純粋関数を書く

関数を純粋関数として書くべきです.これは、同じ入力で常に同じ出力を与える関数です.
これはテストが容易になるので重要です.また、我々はそれが正確に何をするかを知っています.
純粋な機能を読んで理解しやすいです.フローは決定的で簡単です.したがって、それは予測可能です.
pure関数の例は次のようになります.

const add = (a, b) => a + b;

The add 関数は、同じ結果を出力します.パラメータから結果を計算するので、同じ入力を与えます.それは他の何にも依存しない.
したがって、論理フローは非常に予測可能である.
純粋な関数でない関数の例は、同じ入力が与えられても、異なる出力を返すものである.例えば、我々が年数を得る機能があるならばx 今年の年前

const getYearBefore = (x) => new Date().getFullYear() - x;

これは純粋な機能ではないnew Date() 現在の日付に応じて変更されます.だからgetYearBefore 同じ入力を与えられた現在の日付の年に依存します.
純粋な関数を作るには、代わりに書くことができます.

const getYearBefore = (date, x) => date.getFullYear() - x;

現在の日付は関数に渡されますので、同じ入力を持っていると同じ結果を得ます.パラメータを組み合わせて結果を返すだけです.
また、現在の日付や日付の実装の変更を心配する必要はありません.
関数を拡張する前に、私たちが純粋な関数に変更する前にnew Date() ○○.
さらに、変化new Date() 変更前にプログラムの他の部分を中断します.現在、我々はそれについて心配する必要はありません.
予測不可能性のため、トレースしたりデバッグしたりするのも難しいです.

ロング引数

ES 6の破壊的な構文では、実際に引数をたくさん渡すことができます.
例えば、書く代わりに

const add = (a, b, c, d, e) => a + b + c + d + e;

には5つのパラメータがあります.書くことができます.

const add = ({
  a,
  b,
  c,
  d,
  e
}) => a + b + c + d + e;

この方法では、1つのオブジェクトを関数に渡し、add 関数.
我々は呼び出すことができますadd 次のようになります.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5
}

add(obj);

ネストしたオブジェクトでも動作します.例えば、以下のように書くことができます.

const buildString = ({
  foo: {
    bar,
    baz
  }
}) => `${bar} ${baz}`;

その後、我々は呼び出すことができますbuildString 次のようになります.

const obj = {
  foo: {
    bar: 'bar',
    baz: 'baz'
  }
};

buildString(obj);

データを非公開にするには、モジュールとブロックを使用してIifesを置き換えることができます.関数を定義して呼び出すために余分なコードを必要としません.
また、クラス構文は、特にコンストラクタを定義するのに非常に明確な方法です.値this も明らかです.
純粋な関数を書くことは良い練習です.なぜなら、同じ入力を与えられた同じ出力を常に持っているからです.また、それを読んでテストしやすいです.
破壊的な構文で、オブジェクトの変数への引数をたくさん減らすことができます.すべては、引数として渡すプロパティのキー名と位置を自動的に与えられます.