[ freecodecamp ] ES 6 -矢印関数、RESTパラメータ、拡張演算子

ヘヤフェローズ!ここで、現在のJavaScript環境で広く使用されているいくつかの素晴らしいES 6機能をカバーする別のJavaScriptポストがあります.これは私のJavaScriptの学習の続きですfreeCodeCamp .
この投稿はあなたのブックマークになります.だから、ちょうど読書を開始します.

匿名関数
JavaScriptでは、関数に名前を付ける必要は必ずしもありません.名前のない関数を匿名関数と呼びます.これらは、それらを再利用する必要がないときにしばしば使用されます.
として匿名関数を書くことができます

const myFunc = function() {
  const myVar = "value";
  return myVar;
}

矢印関数
ES 6は、矢印機能の助けを借りて匿名の関数を書くために、清潔で簡潔な方法を提供します.上記の関数定義は

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

それは同じように見えますか?フォーカス・オン=> アロー() その前に.
これは、機能体がなく、1つの戻り値のみが1つのライナーに書き込まれることができる.矢印関数構文を省略することができますreturn この場合、ステートメントとコードを囲むブラケット.
上記の関数は変数を宣言し、その変数を返すだけです.上記の関数は

const myFunc = () => "value";

これは"value" デフォルトでは.いいんじゃない?

パラメータ付き矢印関数
他の正規関数と同様に、引数を矢印関数に渡すこともできます.パラメータは括弧内に

const adder = (num) => num++;

上記のメソッドは引数num , に1を加え、更新された値を返します.忘れずに、暗黙のリターンが既にあります.
ヒント関数:矢印関数が単一の引数を必要とする場合は、パラメータの周りの括弧を削除できます.
また、

const adder = num => num++;

これは、複数の引数を矢印関数に渡すことはできません.必要に応じて多くの引数を渡すことができます.

const multiplier = (a, b) => a * b;

デフォルトパラメータ
ES 6は、関数をデフォルトのパラメータを使用してより柔軟にすることができます.引数が指定されていないとき、つまりパラメータの値がundefined .
これは、例を理解しやすくなります

const greeting = (name = "Anonymous") => "Hello" + name;

console.log(greeting("Prashant")); // Hello Prashant;
console.log(greeting());  // Hello Anonymous;

私が議論をしたとき、あなたは見ることができます"Prashant" , the name パラメータはその値を使用します.しかし、引数なしで関数を呼び出したとき、デフォルト値が使用されます.

関数の残りのパラメータ
残りのパラメータの助けを借りて関数に引数の数を指定することができます.与えられた引数は、関数の内部から操作できる配列に格納されます.
フレコデコのレッスンからこのコードを考えてみましょう

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}

console.log(howMany(0, 1, 2)); // You have passed 3 arguments.

console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments

残りのパラメータは3つのドットを使用して定義されます....args はRESTパラメータです.

拡がり演算子
ES 6はスプレッド演算子を提供します.これにより、配列を適切に展開できます.
広げられた演算子の利点とそれらを使用する方法を理解しましょう.
探索-配列の最大値を見つける
何かの前にMath.max() 関数.これにより、関数に与えられた要素の最大値を返すことが推測できます.

Math.max(1, 2, 3, 4);  // returns 4 as it is the maximum

これは完全に動作します.ただし、この関数は配列ではなくカンマ区切り引数をとります.要素を配列に格納し、この関数を使用しようとするなら

const arr = [1, 2, 3, 4];
Math.max(arr);  // returns NaN

この関数は認識しないのでarr を返します.出力は意味をなす.
ES 5では、配列内に存在する要素の最大値を見つける場合、Math.max.apply() 関数として

Math.max.apply(null, arr); // returns 4

ここで、配列の値をそれぞれの配列値を別々の引数として明示的に提供することなく、配列に存在する最大数を得ることができますMath.max() .
スプレッド演算子を使用すると、配列を使用することができますapply() , これは、コードをより読みやすく、維持しやすくなります.

const arr = [1, 2, 3, 4];
Math.max(...arr);  // returns 4 now

ここで何が起こったのですか....arr 拡張arr 配列の要素を展開します.これは、スプレッド演算子を使用して配列を展開する方法です.したがって

Math.max(...arr) ≡ Math.max(1, 2, 3, 4)

残りのパラメータとまったく同じように見えるかもしれません.はい、構文は賢明です.ただし、値を配列に収集する必要がある場合は、RESTパラメーター(引数経由で渡された値を収集)を使用し、値を広げる必要がある場合(配列に値を再割り当て)、スプレッド演算子を使用します.別の操作のための別の名前として表示することがあります.
配列の値は、スプレッド演算子の助けを借りて代入されます.
別の例
もう一つの使用例を考えましょう

const ar1 = [1, 2, 3, 4]
const arr2 = [5, 6, 7, 8]

これらの2つの配列を1つにマージする場合は、

const arr3 = [...arr1, ...arr2];

ここで、arr1 and arr2 場所に広がっている.今、たとえあなたが価値観を変えたとしてもarr1 or arr2 , the arr3 は常に対応する更新された配列を返す.別の素晴らしい機能ではありませんか?
注意-あなたは、スプレッド演算子が場所でのみ動作することを知っておくべきです.例えば、関数に対する引数や配列リテラルである.次のコードは動作しません

const spreaded = ...arr3;   // throws an error

結論
このポストは、いくつかの大きなES 6機能をカバーしました.矢印関数の使用は非常に最近では、残りのパラメータとスプレッド演算子と一緒に使用すると、何か本当に素晴らしいものになります.

参考文献

Introduction to the ES6 Challenges

私はこのポストは、いくつかの他のjs素晴らしい機能を理解するのに役立ちます願っています.さて、それはさよならを言う時間です!次のポストでお会いしましょう.それまで好奇心旺盛で、学習を続ける.呼ばれる