ECMAscript の新機能の紹介

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ECMAScript6 に新しい値比較関数 Object.is が追加されました
  • ECMAScript6 関数の残りパラメータ (Rest Parameters)
  • ECMAScript6 関数のデフォルトパラメータ
  • ECMAScript の関数型
  • ECMAScript6の新機能「アロー関数」の詳しい紹介

<<:  上部の固定divは半透明効果に設定できます

>>:  IDEA が Docker を統合してリモート展開を実現するための手順

推薦する

Web デザインでフラッシュ オーバーレイ ポップアップ レイヤーの z-index プロパティを設定しても機能しない

デフォルトでは、Flash は常にページのトップレベルに表示されます。つまり、ページに DHTML ...

Linux入力サブシステムフレームワーク原理の分析

入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...

MySQL インデックスの設計と最適化の方法

目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...

SQLでEXPLAINコマンドを使用する方法

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

Centos8.3、dockerデプロイメントspringbootプロジェクトの実際のケース分析

導入現在、k8s は非常に人気があり、それについて学ぶために本を購入しました。しかし、k8s では数...

Chrome タブバーを実装するための CSS のヒント

今回は、Google Chrome のタブバーのような、特殊な丸い角を持つナビゲーション バーのレイ...

W3C チュートリアル (10): W3C XQuery アクティビティ

XQuery は、XML ドキュメントからデータを抽出するための言語です。 XQuery は、XML...

MySQL の binlog ログと、binlog ログを使用してデータを回復する方法を説明します。

ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...

Linux のタイムドログ削除を実装する簡単な方法

導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...

各グループの最新データを取得するためにMySQLベースのグループを実装する

序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...

よく使用される Linux コマンドの完全なリスト (推奨コレクション)

目次1. システム情報2. シャットダウン(システムのシャットダウン、再起動、ログアウト) 3. フ...