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 を統合してリモート展開を実現するための手順

推薦する

JavaScript はクラス宝くじアプレットを実装します

この記事では、クラス抽選アプレットを実装するためのJavaScriptの具体的なコードを参考までに紹...

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...

VMware pro15 インストール macOS10.13 詳細インストール図(画像とテキスト)

編集者は最近、macOS システムを使い始めたかったので、VMware に macOS イメージ シ...

NODE.JS を使用して WEBSERVER を作成する手順

目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...

MySQL DMLステートメントの使用に関する詳細な説明

序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...

Mysql データベースのマスタースレーブ同期構成

目次Mysql マスタースレーブ同期構成1. 2つのmysqlをインストールする2. MySQL設定...

JavaScriptタイマーの詳細な説明

目次簡単な紹介間隔の設定説明するパラメータ戻り値使用法タイムアウトの設定説明するパラメータ使用法:タ...

Dockerのデフォルトネットワークセグメントを変更する実装方法の分析

背景同社のサーバーはすべて Alibaba Cloud ECS ホストを購入しています。デフォルトの...

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...

Windows 上の MySQL バージョン 5.7 でエンコードを UTF-8 に変更する方法

序文MySQLの勉強を始めたばかりで、公式サイトから最新バージョン5.7.14をダウンロードしました...

Vue開発の一般的な手法の詳細な説明

目次$nextTick() $forceUpdate() $セット() .sync——2.3.0 以...

最新の MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

2018 年の最新 MySQL 5.7 の詳細なインストールと設定は 4 つのステップに分かれており...

LinuxでPythonの組み込みバージョンを削除する手順の詳細な説明

大きな落とし穴、Linuxシステムに付属するPythonのバージョンを簡単に削除しないでください1....

VirtualBox に CentOS、JDK、Hadoop をインストールする詳細なチュートリアル

目次1. 前提条件1.1 サポートされているプラ​​ットフォーム1.2 jdk および hadoop...

Vue3 リストインターフェースデータ表示の詳細

目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...