ECMAscript の新機能の紹介

1. 関数パラメータのデフォルト値

1.1 関数パラメータのデフォルト値の指定

ECMAScript 2015では、パラメータの直後にデフォルト値を記述することで、関数パラメータにデフォルト値を追加できるようになりました。

サンプルコードは次のとおりです。

// 関数パラメータはデフォルト値を指定します function fun(a = 1, b = 2) {
  コンソールにログ出力します。
}
楽しい() // 3

パラメータ変数はデフォルトで宣言されるため、let または const を使用して再度宣言することはできないことに注意してください。そうしないと、例外がスローされます。

また、デフォルトのパラメータはパラメータリストの最後にあります。そうしないと曖昧さが生じ、省略されたパラメータは省略できません。

次のコード例:

// デフォルトのパラメータ位置は末尾にする必要があります function fun(a = 1, b) {
  コンソールにログ出力します。
}
// パラメータを渡して関数を呼び出す fun(20); // 20 undefined

1.2 分離割り当てでの使用

デフォルトのパラメータ値は、デストラクチャリング割り当てのデフォルト値と組み合わせて使用できます。デフォルト値を設定する方法は 2 つあります。サンプルコードは次のとおりです。

関数fun([a, b = 5] = [3]) {
  コンソールにログ出力します。
}
楽しい() // 3 5

1.3 関数パラメータのスコープ

パラメータのデフォルト値が設定されると、関数が宣言され初期化されるときに、パラメータは別のスコープを形成します。初期化が完了すると、スコープは消えます。パラメータのデフォルト値が設定されていない場合、この構文の動作は発生しません。

サンプルコードは次のとおりです。

x = 5とする

関数fun(y = x) {
  x = 10
  コンソールにログ出力します。
}
楽しい() // 5

2.残りのパラメータ

ECMAScript 2015 、関数の冗長パラメータを取得するためにrestパラメータ (...変数名の形式) が導入されたため、arguments オブジェクトを使用する必要はありません。残りのパラメータで使用される変数は、追加のパラメータを含む配列です。

サンプルコードは次のとおりです。

// 引数オブジェクトを使用して渡されたパラメータの最大値を見つけます function max1() {
  Math.max.apply(null, 引数) を返す
}

コンソール.log(max1(1, 5, 6, 33, 65, 35, 15)); // 65

// 残りのパラメータを使用する function max2(...arg) {
  Math.max(...arg) を返します
}
コンソール.log(max2(1, 5, 6, 33, 65, 35, 15)); // 65

3. 矢印関数

3.1 矢印関数とは何か

ECMAScript 2015 、関数式よりも短い構文を持ち、これを語彙的にバインドする矢印関数 (ファット矢印関数とも呼ばれます) が追加されました。矢印関数はほとんどの場合匿名です。

矢印関数の文法構造は次のとおりです。

// 基本的な構文構造 (パラメータ 1、パラメータ 2、...、パラメータ N) => {関数宣言}
(param1, パラメータ2, ..., パラメータN) => 式 (単一)
// 同等: (パラメータ 1、パラメータ 2、...、パラメータ N) => {return 式}

// パラメータが 1 つしかない場合、添え字は省略可能です (パラメータ) => {関数宣言}
// またはパラメータ => {関数宣言}

// パラメータがない場合は、括弧 () を記述する必要があります => {関数宣言}

// 残りのパラメータとデフォルトパラメータ（パラメータ 1、パラメータ 2、...残りのパラメータ）と一緒に使用できます => {関数宣言}
(param1, パラメータ2, ..., パラメータN = デフォルト値N) => {関数宣言}

矢印関数では関数名を定義することもできます。構文構造は次のとおりです。

let funName = (パラメータ 1、パラメータ 2、...、パラメータ N) => {関数宣言}

サンプルコードは次のとおりです。

合計を (a, b) => {とする
  a + bを返す
}
コンソール.log(合計(10, 20)); //30

3.2 矢印関数に関する注意

矢印関数を使用する際には、いくつか注意すべき点があります。

関数本体内のthisオブジェクトは、それが定義されているオブジェクトであり、それが使用されているオブジェクトではありません。

サンプルコードは次のとおりです。

// ES5 記法 let fun1 = function () {
  コンソールにログ出力します。
}
// ES6 矢印関数の書き方 let fun2 = () => {
  コンソールにログ出力します。
}

obj1 = {
  id: 666,
  楽しい: 楽しい1
}
obj2 = {
  id: 666,
  楽しい: 楽しい2
}
obj1.fun() // 666
obj2.fun() // 未定義

コードから、通常の関数のthis呼び出されたときに決定されるのに対し、矢印関数のthisは定義されたときに決定されることがわかります。

コンストラクターとして使用することはできません。つまり、 newコマンドは使用できません。そうでない場合はエラーがスローされます。
argumentsオブジェクトは使用できません。関数本体内に存在しません。使用したい場合は、代わりに rest パラメータを使用できます。

4. 関数末尾呼び出し

末尾呼び出しは関数型プログラミングにおける重要な概念です。非常にシンプルで、一文で説明できます。これは、関数の最後のステップが別の関数を呼び出すことを意味します。

サンプルコードは次のとおりです。

x = (x) => {とする
  2 * xを返す
}

y = 関数 (y) {
  x(y)を返す
}

コンソールログ(y(20)); // 40

ECMAscript の新機能である関数拡張についての記事はこれで終わりです。ECMAscript 関数拡張の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: