Es6-quick-guide

提供：Dev Guides
移動先:案内、検索

ES6-概要

ECMAScript（ES）は、ECMAScript Internationalによって標準化されたスクリプト言語仕様です。 クライアント側のスクリプトを有効にするために、アプリケーションによって使用されます。 仕様は、Self、Perl、Python、Javaなどのプログラミング言語の影響を受けます。 JavaScript、Jscript、ActionScriptなどの言語は、この仕様に準拠しています。

このチュートリアルでは、JavaScriptでのES6実装を紹介します。

JavaScript

JavaScriptは、1995年にNetscape Communications Corporationの開発者であるBrendan Eichによって開発されました。 これは、ブラウザによって実行されるスクリプト言語です。 クライアント側で。 レスポンシブWebページを開発するためにHTMLと組み合わせて使用​​されます。

ここで説明するECMA Script6の実装は、次の新機能を対象としています-

  • 定数のサポート
  • ブロックスコープ
  • 矢印関数
  • 拡張パラメータ処理
  • テンプレートリテラル
  • 拡張リテラル
  • 拡張されたオブジェクトプロパティ
  • 構造化解除の割り当て
  • モジュール
  • クラス
  • イテレータ
  • ジェネレータ
  • コレクション
  • さまざまなクラスの新しい組み込みメソッド
  • 約束

ECMAScriptのバージョン

ECMA-262には次の9つのエディションがあります-

Edition Name Description
1 ECMAScript 1 First Edition released in 1997
2 ECMAScript 2 Second Edition released in 1998, minor changes to meet ISO/IEC 16262 standard
3 ECMAScript 3 Third Edition released in 1999 with language enhancements
4 ECMAScript 4 Fourth Edition release plan was dropped, few features added later in ES6 & other complex features dropped
5 ECMAScript 5 Fifth Edition released in 2009
5.1 ECMAScript 5.1 5.1 Edition released in 2011, minor changes to meet ISO/IEC 16262:2011 standard
6 ECMAScript 2015/ES6 Sixth Edition released in 2015, see ES6 chapters for new features
7 ECMAScript 2016/ES7 Seventh Edition released in 2016, see ES7 chapters for new features
8 ECMAScript 2017/ES8 Eight Edition released in 2017, see ES8 chapters for new features
9 ECMAScript 2018/ES9 Ninth Edition released in 2018, see ES9 chapters for new features

ES6-環境

この章では、ES6の環境設定について説明します。

ローカル環境のセットアップ

JavaScriptは、任意のブラウザー、任意のホスト、および任意のOSで実行できます。 JavaScriptプログラム標準を作成およびテストするには、次のものが必要です-

テキストエディタ

テキストエディタは、ソースコードの記述に役立ちます。 いくつかのエディターの例には、Windows Notepad、Notepad ++、Emacs、vim、viなどが含まれます。 使用されるエディターは、オペレーティングシステムによって異なる場合があります。 ソースファイルは通常、 extension.js で名前が付けられます

Node.jsのインストール

*Node.js* は、サーバーサイドJavaScript用のオープンソースのクロスプラットフォームランタイム環境です。 ブラウザをサポートせずにJavaScriptを実行するには、Node.jsが必要です。 Google V8 JavaScriptエンジンを使用してコードを実行します。 Node.jsソースコードまたはプラットフォーム用のビルド済みインストーラーをダウンロードできます。 Nodeはhttps://nodejs.org/en/download/[https://nodejs.org/en/download]で入手できます

Windowsへのインストール

Node用の* .msiインストーラー*をダウンロードして実行します

MSIインストーラー

インストールが成功したかどうかを確認するには、ターミナルウィンドウでコマンド node –v を入力します。

ノード-v

Mac OS Xでのインストール

OS Xにnode.jsをインストールするには、プリコンパイルされたバイナリパッケージをダウンロードして、簡単にインストールできます。 www.nodejs.orgに移動し、インストールボタンをクリックして最新のパッケージをダウンロードします。

最新のパッケージ 

*node* と *npm* の両方をインストールするインストールウィザードに従って、*。dmg *からパッケージをインストールします。 npmはNode.jsの追加パッケージのインストールを容易にするノードパッケージマネージャーです。

ノードのインストール

Linuxへのインストール

Node.jsとnpmをインストールする前に、多くの*依存関係*をインストールする必要があります。

  • Ruby および GCC 。 Ruby 1.8.6以降およびGCC 4.2以降が必要です。
  • * Homebrew。* Homebrewは元々Mac向けのパッケージマネージャーですが、LinuxbrewとしてLinuxに移植されています。 Homebrewの詳細については、http：//brew.sh/のhttp://brew.sh/linuxbrewをご覧ください。

統合開発環境（IDE）のサポート

JavaScriptは、Visual Studio、Sublime Text 2、WebStorm/PHPStorm、Eclipse、Bracketsなどの多数の開発環境で構築できます。 このセクションでは、Visual StudioコードとブラケットIDEについて説明します。 ここで使用する開発環境はVisual Studio Code（Windowsプラットフォーム）です。

Visual Studioコード

これはVisual StudioのオープンソースIDEです。 Mac OS X、Linux、およびWindowsプラットフォームで使用できます。 VScodeはhttps://code.visualstudio.com/?utm_expid=101350005-31.YsqwCVJESWmc4UCMDLsNRw.0[https://code.visualstudio.com]で入手できます。

Windowsへのインストール

Windows用Visual Studio Codeをダウンロードします。

Visual Studio Code for Windows

VSCodeSetup.exe VSCodeSetupをダブルクリックして、セットアッププロセスを起動します。 これには数分しかかかりません。

セットアップウィザード

以下はIDEのスクリーンショットです。

IDEのスクリーンショット

ファイルを右クリックし、コマンドプロンプトで開くことにより、ファイルのパスに直接移動できます。 同様に、[エクスプローラで表示]オプションは、ファイルエクスプローラにファイルを表示します。

エクスプローラーで公開

Mac OS Xでのインストール

Visual Studio CodeのMac OS X固有のインストールガイドは、https://code.visualstudio.com/docs/setup/setup-overviewにあります。

Linuxへのインストール

Visual Studio CodeのLinux固有のインストールガイドは、https://code.visualstudio.com/docs/setup/setup-overview [https://code.visualstudio.com/Docs/editor/setup]にあります。

ブラケット

Bracketsは、Adobe Systemsが作成したWeb開発用の無料のオープンソースエディターです。 Linux、Windows、Mac OS Xで利用可能です。 ブラケットはhttp://brackets.io/[http://brackets.io]で入手できます。

ブラケット

1つ以上の拡張Brackets Shellを追加して、Brackets内でDOSプロンプト/シェルを実行できます。

プロンプトシェル

インストールすると、エディターの右側にシェルのアイコンが表示されますEditor Icon。 アイコンをクリックすると、次のスクリーンショットに示すようなシェルウィンドウが表示されます。

シェル

準備万端です！！！

ES6-構文

  • 構文*は、プログラムを記述するための一連の規則を定義します。 すべての言語仕様は独自の構文を定義しています。

JavaScriptプログラムはで構成することができます-

  • 変数-プログラムの値を保存できる名前付きメモリブロックを表します。
  • リテラル-定数/固定値を表します。
  • 演算子-オペランドの処理方法を定義する記号。
  • キーワード-言語のコンテキストで特別な意味を持つ単語。

次の表に、JavaScriptのいくつかのキーワードを示します。 一般的に使用されるキーワードの一部を次の表にリストします。

break as any Switch
case if throw Else
var number string Get
module type instanceof Typeof
finally for enum Export
while void this New
null super Catch let
static return True False
  • モジュール-さまざまなプログラム/スクリプトで再利用できるコードブロックを表します。
  • コメント-コードの読みやすさを改善するために使用されます。 これらはJavaScriptエンジンによって無視されます。
  • 識別子-これらは、変数、関数などのようなプログラム内の要素に与えられた名前です。 識別子のルールは-
  • 識別子には、文字と数字の両方を含めることができます。 ただし、識別子を数字で始めることはできません。
  • 識別子には、アンダースコア（_）またはドル記号（$）以外の特殊記号を含めることはできません。
  • 識別子をキーワードにすることはできません。 それらは一意でなければなりません。
  • 識別子は大文字と小文字が区別されます。 識別子にスペースを含めることはできません。

次の表に、有効な識別子と無効な識別子を示します。

Examples of valid identifiers Examples of invalid identifiers

firstName

ファーストネーム

num1

結果$

a

Var＃

ファーストネーム

ファーストネーム

1番号

空白と改行

ES6は、プログラムに表示されるスペース、タブ、改行を無視します。 プログラムでは、スペース、タブ、改行を自由に使用できます。また、コードを読みやすく理解しやすくするために、プログラムをきちんと一貫した方法で自由にフォーマットおよびインデントできます。

JavaScriptは大文字と小文字を区別します

JavaScriptは大文字と小文字を区別します。 これは、JavaScriptが大文字と小文字を区別することを意味します。

セミコロンはオプションです

命令の各行は*ステートメント*と呼ばれます。 JavaScriptではセミコロンはオプションです。

例

console.log("hello world")
console.log("We are learning ES6")

1行に複数のステートメントを含めることができます。 ただし、これらのステートメントはセミコロンで区切る必要があります。

JavaScriptのコメント

  • コメント*は、プログラムの読みやすさを改善する方法です。 コメントを使用して、コードの作成者などのプログラムに関する追加情報、関数/構造体に関するヒントなどを含めることができます。 コメントはコンパイラによって無視されます。

JavaScriptはコメントの次のタイプをサポートしています-

  • 単一行コメント（//）-//から行末までのテキストはコメントとして扱われます。
  • 複数行コメント（/ /）-これらのコメントは複数行にわたる場合があります。

例

//this is single line comment
/* This is a
Multi-line comment
*/

初めてのJavaScriptコード

従来の「Hello World」の例から始めましょう」。 

var message = "Hello World"
console.log(message)

プログラムは次のように分析することができます-

  • 1行目は、名前メッセージによって変数を宣言しています。 変数は、プログラムに値を保存するメカニズムです。
  • 行2は、変数の値をプロンプトに出力します。 ここで、コンソールはターミナルウィンドウを指します。 関数ログ（）は、画面にテキストを表示するために使用されます。

コードの実行

Node.jsを使用してコードを実行します。

  • *ステップ1 *-ファイルをTest.jsとして保存します
  • *ステップ2 *-Visual Studio Codeのプロジェクトエクスプローラーウィンドウで、作業ファイルオプションの下のTest.jsファイルを右クリックします。
  • *ステップ3 *-[コマンドプロンプトで開く]オプションを選択します。
  • *ステップ4 *-ノードのターミナルウィンドウで次のコマンドを入力します。
node Test.js

ファイルが正常に実行されると、次の出力が表示されます。 

Hello World

Node.jsおよびJS/ES6

ECMAScript 2015（ES6）機能は3つのグループに分類されます-

  • 発送-これらは、V8が安定していると見なす機能です。
  • Staged Features -これらはほぼ完成した機能ですが、V8チームによって安定しているとは見なされません。
  • 進行中-これらの機能はテスト目的でのみ使用してください。

機能の最初のカテゴリは完全にサポートされており、ノードによってデフォルトでオンになっています。 ステージングされた機能を実行するには、ランタイムハーモニーフラグが必要です。

Node.jsのコンポーネント固有のCLIフラグのリストは、https://nodejs.org/api/clilにあります。

厳格モード

ECMAScript仕様の第5版では、厳密モードが導入されました。 厳格モードは、JavaScriptに制約のレイヤーを課します。 通常のJavaScriptセマンティクスにいくつかの変更を加えます。

コードは、以下を含めることにより、厳格モードで動作するように移行することができます- 

//Whole-script strict mode syntax
"use strict";
 v = "Hi!  I'm a strict mode script!"; //ERROR: Variable v is not declared

上記のスニペットでは、コード全体がJavaScriptの制約付きバリアントとして実行されます。

JavaScriptでは、ブロックのスコープ内の厳密モードを関数のスコープとして制限することもできます。 これは次のように示されています- 

v = 15
function f1() {
   "use strict";
   var v = "Hi!  I'm a strict mode script!";
}

上記のスニペットでは、関数外のコードは非厳密モードで実行されます。 関数内のすべてのステートメントは、厳密モードで実行されます。

ES6と巻き上げ

JavaScriptエンジンは、デフォルトで宣言を最上部に移動します。 この機能は*ホイスト*と呼ばれます。 この機能は変数と関数に適用されます。 ホイストにより、JavaScriptはコンポーネントを宣言する前に使用できます。 ただし、ホイストの概念は、厳密モードで実行されるスクリプトには適用されません。

可変巻き上げと機能巻き上げについては、以降の章で説明します。

ES6-変数

定義により、変数*は、値を格納する「メモリ内の名前付きスペース」です。 つまり、プログラムの値のコンテナとして機能します。 変数名は *identifiers と呼ばれます。 以下は、識別子の命名規則です-

  • 識別子をキーワードにすることはできません。
  • 識別子にはアルファベットと数字を含めることができます。
  • アンダースコア（_）とドル（$）記号を除いて、識別子にスペースと特殊文字を含めることはできません。
  • 変数名は数字で始めることはできません。

型の構文

変数は、使用する前に宣言する必要があります。 ES5構文は var キーワードを使用して同じことを達成しました。 変数を宣言するためのES5構文は次のとおりです。 

//Declaration using var keyword
var  variable_name

ES6は、次の変数宣言構文を導入します-

  • letを使用します。
  • constの使用。
  • 変数の初期化*は、変数に値を保存するプロセスを指します。 変数は、宣言時または後の時点で初期化できます。

変数を宣言して初期化するための従来のES5タイプの構文は次のとおりです- 

//Declaration using var keyword
var variable_name = value

例：変数の使用

var name = "Tom"
console.log("The value in the variable is: "+name)

上記の例は変数を宣言し、その値を出力します。

正常に実行されると、次の出力が表示されます。 

The value in the variable is Tom

JavaScriptと動的入力

JavaScriptは型付けされていない言語です。 これは、JavaScript変数が任意のデータ型の値を保持できることを意味します。 他の多くの言語とは異なり、変数の宣言中にJavaScriptに変数が保持する値のタイプを伝える必要はありません。 変数の値の型はプログラムの実行中に変更される可能性があり、JavaScriptが自動的に処理します。 この機能は「動的タイピング」と呼ばれます。

JavaScriptVariableスコープ

変数の範囲は、それが定義されているプログラムの領域です。 伝統的に、JavaScriptはグローバルとローカルの2つのスコープのみを定義します。

  • グローバルスコープ-グローバルスコープの変数には、JavaScriptコードの任意の部分からアクセスできます。
  • ローカルスコープ-ローカルスコープを持つ変数は、宣言されている関数内からアクセスできます。

例：グローバルvs. ローカル変数

次の例では、名前 num で2つの変数を宣言しています。1つは関数の外側（グローバルスコープ）で、もう1つは関数内（ローカルスコープ）です。 

var num = 10
function test() {
   var num = 100
   console.log("value of num in test() "+num)
}
console.log("value of num outside test() "+num)
test()

関数内で変数が参照されると、ローカルスコープの変数の値が表示されます。 ただし、関数の外部からアクセスされると、変数 num はグローバルスコープのインスタンスを返します。

正常に実行されると、次の出力が表示されます。 

value of num outside test() 10
value of num in test() 100

ES6は、新しい変数スコープ-ブロックスコープを定義します。

LetおよびBlockスコープ

ブロックスコープは、変数が宣言されているブロックへの変数のアクセスを制限します。 var キーワードは、関数スコープを変数に割り当てます。 varキーワードとは異なり、 let キーワードを使用すると、スクリプトは変数へのアクセスを最も近い囲みブロックに制限できます。 

"use strict"
function test() {
   var num = 100
   console.log("value of num in test() "+num) {
      console.log("Inner Block begins")
      let num = 200
      console.log("value of num : "+num)
   }
}
test()

スクリプトは、関数のローカルスコープ内で変数 num を宣言し、letキーワードを使用してブロック内で変数を再宣言します。 ローカルスコープ変数の値は、変数が内部ブロックの外部でアクセスされるときに出力されますが、ブロックスコープ変数は内部ブロック内で参照されます。

注-strictモードは、JavaScriptの制限されたバリアントをオプトインする方法です。

正常に実行されると、次の出力が表示されます。 

value of num in test() 100
Inner Block begins
value of num : 200

例：v/s var

var no = 10;
var no = 20;
console.log(no);

上記のコードが正常に実行されると、次の出力が表示されます。 

20
*let* キーワードを使用して同じコードを書き直しましょう。
let no = 10;
let no = 20;
console.log(no);

上記のコードはエラーをスローします：識別子 'no’は既に宣言されています。 letキーワードを使用して宣言された変数には、ブロックスコープが割り当てられます。

レベルの安全を許可および遮断する

同じブロック内で let 変数を2回宣言しようとすると、エラーがスローされます。 次の例を考慮してください- 

<script>
   let balance = 5000//number type
   console.log(typeof balance)
   let balance = {message:"hello"}//changing number to object type
   console.log(typeof balance)
</script>

上記のコードは、次のエラーになります- 

Uncaught SyntaxError: Identifier 'balance' has already been declared

レットと複数のブロック

ただし、同じ let 変数を、構文エラーなしで異なるブロックレベルのスコープで使用できます。

例

<script>
   let count = 100
   for (let count = 1;count <= 10;count++){
     //inside for loop brackets ,count value starts from 1
      console.log("count value inside loop is ",count);
   }
  //outside for loop brackets ,count value is 100
   console.log("count value after loop is",count);

   if(count == 100){
     //inside if brackets ,count value is 50
      let count = 50;
      console.log("count inside if block",count);
   }
   console.log(count);
</script>

上記のコードの出力は次のようになります- 

count value inside loop is 1
count value inside loop is 2
count value inside loop is 3
count value inside loop is 4
count value inside loop is 5
count value inside loop is 6
count value inside loop is 7
count value inside loop is 8
count value inside loop is 9
count value inside loop is 10
count value after loop is 100
count inside if block 50
100

const

*const* 宣言は、値への読み取り専用参照を作成します。 それが保持する値が不変であることを意味するのではなく、単に変数識別子が再割り当てできないということです。 定数は、letステートメントを使用して定義された変数のように、ブロックスコープです。 定数の値は再割り当てによって変更することはできず、再宣言することもできません。

次のルールは、 const キーワードを使用して宣言された変数に当てはまります-

  • 定数に値を再割り当てすることはできません。
  • 定数は再宣言できません。
  • 定数には初期化子が必要です。 つまり、定数は宣言時に初期化する必要があります。
  • const 変数に割り当てられる値は変更可能です。

例

const x = 10
x = 12//will result in an error!!

上記のコードは、定数に値を再割り当てできないため、エラーを返します。 定数変数は不変です。

定数は不変です

*let* キーワードを使用して宣言された変数とは異なり、*定数*は不変です。 つまり、その値は変更できません。 たとえば、定数変数の値を変更しようとすると、エラーが表示されます。
<script>
   let income = 100000
   const INTEREST_RATE = 0.08
   income += 50000//mutable
   console.log("changed income value is ",income)
   INTEREST_RATE += 0.01
   console.log("changed rate is ",INTEREST_RATE)//Error: not mutable
</script>

上記のコードの出力は次のようになります- 

changed income value is 150000
Uncaught TypeError: Assignment to constant variable

constと配列

次の例は、不変の配列を作成する方法を示しています。 新しい要素を配列に追加できます。 ただし、配列を再初期化すると、以下に示すようなエラーが発生します- 

<script>
   const DEPT_NOS = [10,20,30,50]
   DEPT_NOS.push(40)
   console.log('dept numbers is ',DEPT_NOS)

   const EMP_IDS = [1001,1002,1003]
   console.log('employee ids',EMP_IDS)
  //re assigning variable employee ids
   EMP_IDS = [2001,2002,2003]
   console.log('employee ids after changing',EMP_IDS)
</script>

上記のコードの出力は以下のようになります- 

dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.

varキーワード

ES6より前は、 var キーワードを使用してJavaScriptで変数を宣言していました。 var を使用して宣言された変数は、ブロックレベルのスコープをサポートしていません。 これは、変数がループまたは* ifブロック*で宣言されている場合、ループの外部または* ifブロック*からアクセスできることを意味します。 これは、 var キーワードを使用して宣言された変数がホイストをサポートするためです。

varと巻き上げ

変数ホイスト*を使用すると、宣言する前でも、JavaScriptプログラムで変数を使用できます。 このような変数は、デフォルトで*未定義*に初期化されます。 JavaScriptランタイムは変数宣言をスキャンして、関数またはスクリプトの先頭に配置します。 *var キーワードで宣言された変数は先頭に移動します。 次の例を考慮してください- 

<script>
   variable company is hoisted to top , var company = undefined
   console.log(company);//using variable before declaring
   var company = "finddevguides";//declare and initialized here
   console.log(company);
</script>

上記のコードの出力は以下のようになります- 

undefined
finddevguides

varおよびblockスコープ

ブロックスコープ*は、変数が宣言されているブロックへの変数のアクセスを制限します。 *var キーワードは、関数スコープを変数に割り当てます。 var キーワードを使用して宣言された変数には、ブロックスコープがありません。 次の例を考慮してください- 

<script>
  //hoisted to top ; var i = undefined
   for (var i = 1;i <= 5;i++){
      console.log(i);
   }
   console.log("after the loop i value is "+i);
</script>

上記のコードの出力は次のようになります- 

1
2
3
4
5
after the loop i value is 6

変数 i は、 var キーワードを使用してforループ内で宣言されます。 変数iはループの外からアクセスできます。 ただし、ブロック内の変数のアクセスを制限する必要がある場合もあります。 このシナリオでは var キーワードを使用できません。 ES6では、この制限を克服するために let キーワードが導入されています。

varおよびblockレベルの安全性

ブロック内で* varキーワード*を使用して同じ*変数*を2回宣言しても、コンパイラーはエラーをスローしません。 ただし、これにより、実行時に予期しない論理エラーが発生する可能性があります。 

<script>
   var balance = 5000
   console.log(typeof balance)
   var balance = {message:"hello"}
   console.log(typeof balance)
</script>

上記のコードの出力は以下のとおりです- 

number
object

ES6-オペレーター

*expression* は、値に評価される特別な種類のステートメントです。 すべての式はで構成されています-
  • Operands -データを表します。
  • 演算子-値を生成するためにオペランドを処理する方法を定義します。

次の式2 + 3を検討してください。 この式では、2と3はオペランドであり、記号+（プラス）は演算子です。 JavaScriptは、演算子の次のタイプをサポートしています-

  • 算術演算子
  • 論理演算子
  • 関係演算子
  • ビットごとの演算子
  • 割り当て演算子
  • 三項/条件演算​​子
  • 文字列演算子
  • タイプ演算子
  • void演算子

算術演算子

変数 a および b の値がそれぞれ10および5であると仮定します。

リンク：/es6/es6_arithmetic_operators_examples [例を表示]

Operator Function Example
+

Addition

オペランドの合計を返します。

a + b is 15
-

Subtraction

値の差を返します。

a-b is 5
*a
  • Multiplication*

値の積を返します。

a*b is 50
/a

Division

除算を実行し、商を返します。

a/b is 2
%

Modulus

除算を実行し、剰余を返します。

a%b is 0
++

Increment

変数の値を1つ増やします。

a++ is 11
 — 

Decrement

変数の値を1減らします。

a-- is 9

関係演算子

関係演算子は、2つのエンティティ間の関係の種類をテストまたは定義します。 関係演算子はブール値、つまり 正誤。

Aの値が10で、Bが20であると仮定します。

リンク：/es6/es6_relational_operators_examples [例を表示]

Operators Description Example
> Greater than (A > B) is False
< Lesser than (A < B) is True
>= Greater than or equal to (A >= B) is False
⇐ Lesser than or equal to (A ⇐ B) is True
== Equality (A == B) is False
!= Not Equal (A!= B) is True

論理演算子

論理演算子は、2つ以上の条件を結合するために使用されます。 論理演算子もブール値を返します。 変数Aの値が10で、Bが20であると仮定します。

link：/es6/es6_logical_operators_examples [例を表示]。

Operators Description Example
&&

And

指定されたすべての式がtrueを返す場合にのみ、演算子はtrueを返します。

(A > 10 && B > 10) is False

Or

指定された式の少なくとも1つがtrueを返す場合、演算子はtrueを返します。

(A > 10
B > 10) is True !

Not

演算子は、式の結果の逆を返します。 例：！（7> 5）はfalseを返します。

ビット演算子

JavaScriptは、以下のビット演算子をサポートしています。 次の表は、JavaScriptのビット演算子をまとめたものです。

リンク：/es6/es6_bitwise_operators_examples [例を表示]。

Operators Usage Description
Bitwise AND a & b Returns a one in each bit position for which the corresponding bits of both operands are ones
Bitwise OR a b
Returns a one in each bit position for which the corresponding bits of either or both operands are ones Bitwise XOR a^b
Returns a one in each bit position for which the corresponding bits of either but not both operands are ones Bitwise NOT ~ a
Inverts the bits of its operand Left shift a << b
Shifts a in binary representation b (< 32) bits to the left, shifting in zeroes from the right Sign-propagating right shift a >> b
Shifts a in binary representation b (< 32) bits to the right, discarding bits shifted off Zero-fill right shift a >>> b

割り当て演算子

次の表は、割り当て演算子をまとめたものです。

link：/es6/es6_assignment_operators_examples [例を表示]。

Sr.No Operator & Description
1

= (Simple Assignment)

右側のオペランドから左側のオペランドに値を割り当てます。

例-C = A + Bは、A + Bの値をCに割り当てます

2

+= (Add and Assignment)

右オペランドを左オペランドに追加し、結果を左オペランドに割り当てます。

例-C + = AはC = C + Aと同等

3

-= (Subtract and Assignment)

左のオペランドから右のオペランドを減算し、結果を左のオペランドに割り当てます。

  • 例 *C-= AはC = C-Aと同等
4
  • = (Multiply and Assignment)

右オペランドと左オペランドを乗算し、結果を左オペランドに割り当てます。

例 *C = AはC = C *Aと同等

5

/= (Divide and Assignment)

左のオペランドを右のオペランドで除算し、結果を左のオペランドに割り当てます。

注意-ビット単位演算子にも同じ論理が適用されるため、それらは<< =、>> =、>> =、＆=、| =および^ =になります。

その他の演算子

以下はその他の演算子の一部です。

否定演算子（-）

値の符号を変更します。 次のプログラムは同じ例です。 

var x = 4
var y = -x;
console.log("value of x: ",x);//outputs 4
console.log("value of y: ",y);//outputs -4

上記のプログラムが正常に実行されると、次の出力が表示されます。 

value of x: 4
value of y: -4

文字列演算子：連結演算子（+）

+演算子を文字列に適用すると、2番目の文字列が最初の文字列に追加されます。 次のプログラムは、この概念を理解するのに役立ちます。 

var msg = "hello"+"world"
console.log(msg)

上記のプログラムが正常に実行されると、次の出力が表示されます。 

helloworld

連結操作は、文字列間にスペースを追加しません。 1つのステートメントで複数の文字列を連結できます。

条件演算子（？）

この演算子は、条件式を表すために使用されます。 条件演算子は、三項演算子とも呼ばれます。 構文は次のとおりです。 

Test ? expr1 : expr2

どこで、

テスト-条件式を参照 

*expr1* -条件が真の場合に返される値
*expr2* -条件が偽の場合に返される値

例 

var num = -2
var result = num > 0 ?"positive":"non-positive"
console.log(result)

行2は、変数numの値がゼロより大きいかどうかを確認します。 numがゼロより大きい値に設定されている場合、文字列「positive」を返します。それ以外の場合、「non-positive」文字列が返されます。

上記のプログラムが正常に実行されると、次の出力が表示されます。 

non-positive

typeof演算子

これは単項演算子です。 この演算子は、オペランドのデータ型を返します。 次の表に、JavaScriptの typeof 演算子によって返されるデータ型と値を示します。

Type String Returned by typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"

次のコード例は、数値を出力として表示します。 

var num = 12
console.log(typeof num);//output: number

上記のコードが正常に実行されると、次の出力が表示されます。 

number

スプレッドオペレーター

*ES6* は* spreadオペレーター*と呼ばれる新しいオペレーターを提供します。 スプレッド演算子は、3つのドット「...」で表されます。 スプレッド演算子は、配列を個々の配列要素に変換します。

スプレッド演算子と関数

次の例は、関数でのスプレッド演算子の使用を示しています 

<script>
   function addThreeNumbers(a,b,c){
      return a+b+c;
   }
   const arr = [10,20,30]
   console.log('sum is :',addThreeNumbers(...arr))
   console.log('sum is ',addThreeNumbers(...[1,2,3]))
</script>

上記のコードの出力は以下のようになります- 

sum is : 60
sum is 6

スプレッド演算子と配列のコピーと連結

スプレッド演算子を使用して、ある配列を別の配列にコピーできます。 2つ以上の配列を連結するためにも使用できます。 これは以下の例に示されています-

例

<script>
  //copy array using spread operator
   let source_arr = [10,20,30]
   let dest_arr = [...source_arr]
   console.log(dest_arr)

  //concatenate two arrays
   let arr1 = [10,20,30]
   let arr2 =[40,50,60]
   let arr3 = [...arr1,...arr2]
   console.log(arr3)
</script>

上記のコードの出力は以下のようになります- 

[10, 20, 30]
[10, 20, 30, 40, 50, 60]

スプレッドオペレーターとオブジェクトのコピーと連結

スプレッド演算子は、あるオブジェクトを別のオブジェクトにコピーするために使用できます。 2つ以上のオブジェクトを連結するためにも使用できます。 これは以下の例に示されています- 

<script>
  //copy object
   let student1 ={firstName:'Mohtashim',company:'finddevguides'}
   let student2 ={...student1}
   console.log(student2)
  //concatenate objects
   let student3 = {lastName:'Mohammad'}
   let student4 = {...student1,...student3}
   console.log(student4)
</script>

上記のコードの出力は以下のようになります- 

{firstName: "Mohtashim", company: "finddevguides"}
{firstName: "Mohtashim", company: "finddevguides", lastName: "Mohammad"}

ES6-意思決定

条件付き/意思決定構造は、命令が実行される前に条件を評価します。

意思決定

JavaScriptの条件構造は、次の表に分類されます。

Sr.No Statement & Description
1

if Statement

「if」ステートメントは、ブール式とそれに続く1つ以上のステートメントで構成されます。

2

if…else Statement

「if」ステートメントの後にオプションの「else」ステートメントを続けることができます。これは、ブール式が偽の場合に実行されます。

3

The else.. if ladder/nested if statements

else…ifラダーは、複数の条件をテストするのに役立ちます。 以下は同じ構文です。

4

switch…case Statement

switchステートメントは式を評価し、式の値をcase句に一致させ、そのケースに関連付けられたステートメントを実行します。

ES6-ループ

時々、特定の命令は繰り返し実行する必要があります。 ループは同じことを行う理想的な方法です。 ループは、繰り返す必要がある一連の命令を表します。 ループのコンテキストでは、繰り返しは*反復*と呼ばれます。

次の図は、ループの分類を示しています-

ループ

確定ループ

反復回数が確定/固定されているループは、確定ループ*と呼ばれます。 「forループ」は、 *definite loop の実装です。 

for (initial_count_value; termination-condition; step) {
  //statements
}
Sr.No Definite Loop & Description
1

The ‘for’ loop

forループは、指定された回数だけコードブロックを実行します。

2

The for…in loop

for …​ inループは、オブジェクトのプロパティをループするために使用されます。

3

The for…of loop

for…ofループは、オブジェクトリテラルの代わりに反復可能オブジェクトを反復するために使用されます。

不定ループ

不定ループは、ループ内の反復回数が不確定または不明な場合に使用されます。

を使用して無限ループを実装することができます-

Sr.No Indefinite Loop & Description
1

The while loop

whileループは、指定された条件がtrueと評価されるたびに命令を実行します。

2

The do…while loop

do …​ whileループは、do …​ whileループがループの最初の実行時に条件を評価しないことを除いて、whileループに似ています。

ループ制御ステートメント

Sr.No Loop Control Statements & Description
1

The break statement

breakステートメントは、構造から制御を取り出すために使用されます。

2

The continue statement

continueステートメントは、現在の反復で後続のステートメントをスキップし、制御をループの先頭に戻します。

ラベルを使用してフローを制御する

ラベル*は、ステートメントまたはコードブロックに適用されるコロン（:)が後に続く単なる識別子です。 ラベルを *break および continue とともに使用して、フローをより正確に制御できます。 

*'continue'* または *'break'* ステートメントとそのラベル名の間で改行することはできません。 また、ラベル名と関連するループの間に他のステートメントがあってはなりません
Sr.No Label & Description
1

Label with Break

ラベルをブレークとともに使用して、フローをより正確に制御し続けることができます。

2

Label with Continue

「continue」または「break」ステートメントとそのラベル名の間で改行することはできません。

ES6-機能

  • 関数*は、読み取り可能、保守可能、および再利用可能なコードの構成要素です。 関数は、functionキーワードを使用して定義されます。 以下は、標準関数を定義するための構文です。
function function_name() {
  //function body
}

関数の実行を強制するには、呼び出す必要があります。 これは関数呼び出しと呼ばれます。 以下は、関数を呼び出すための構文です。 

function_name()

例：単純な関数定義

//define a  function
function test() {
   console.log("function called")
}
//call the function
test()

この例では、関数test（）を定義しています。 区切り文字のペア（\ {}）は、関数の本体を定義します。 *関数スコープ*とも呼ばれます。 強制的に実行するには、関数を呼び出す必要があります。

上記のコードが正常に実行されると、次の出力が表示されます。 

function called

機能の分類

関数は、 Returning および Parameterized 関数に分類できます。

関数を返す

関数は、制御とともに値を呼び出し元に戻すこともできます。 このような関数は、戻り関数として呼び出されます。

以下は、返される関数の構文です。 

function function_name() {
  //statements
   return value;
}
  • 戻り関数はreturnステートメントで終了する必要があります。
  • 関数は最大で1つの値を返すことができます。 つまり、関数ごとに1つのreturnステートメントのみが存在できます。
  • returnステートメントは、関数の最後のステートメントでなければなりません。

次のコードスニペットは、関数を返す例です- 

function retStr() {
   return "hello world!!!"
}
var val = retStr()
console.log(val)

上記の例では、文字列「hello world !!!」を呼び出し元に返す関数を定義しています。 上記のコードが正常に実行されると、次の出力が表示されます。 

hello world!!!

パラメータ化された関数

パラメータは、値を関数に渡すメカニズムです。 パラメータは、関数の署名の一部を形成します。 パラメーター値は、呼び出し中に関数に渡されます。 明示的に指定されない限り、関数に渡される値の数は、定義されたパラメーターの数と一致する必要があります。

以下は、パラメーター化された関数を定義する構文です。 

function func_name( param1,param2 ,…..paramN) {
   ......
   ......
}

例-パラメータ化された関数

この例では、2つのパラメーター n1 および n2 を受け入れ、それらの合計を出力する関数addを定義しています。 パラメーター値は、呼び出されたときに関数に渡されます。 

function add( n1,n2) {
   var sum = n1 + n2
   console.log("The sum of the values entered "+sum)
}
add(12,13)

上記のコードが正常に実行されると、次の出力が表示されます。 

The sum of the values entered 25

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

ES6では、値が渡されない場合、または定義されていない場合、関数を使用してパラメーターをデフォルト値で初期化できます。 同じことが次のコードに示されています。 

function add(a, b = 1) {
   return a+b;
}
console.log(add(4))

上記の関数は、bの値をデフォルトで1に設定します。 関数は、値が明示的に渡されていない限り、常にパラメーターbが値1を持っていると見なします。 上記のコードが正常に実行されると、次の出力が表示されます。 

5

関数が値を明示的に渡すと、パラメーターのデフォルト値が上書きされます。 

function add(a, b = 1) {
   return a + b;
}
console.log(add(4,2))

上記のコードは、パラメータbの値を明示的に2に設定し、それによりデフォルト値を上書きします。 上記のコードが正常に実行されると、次の出力が表示されます。 

6

よりよく理解するために、以下の例を考えてみましょう。

例1

次の例は、2つのパラメーターを取り、それらの合計を返す関数を示しています。 2番目のパラメーターのデフォルト値は10です。 つまり、2番目のパラメーターに値が渡されない場合、その値は10になります。 

<script>
   function addTwoNumbers(first,second = 10){
      console.log('first parameter is :',first)
      console.log('second parameter is :',second)
      return first+second;
   }

   console.log("case 1 sum:",addTwoNumbers(20))//no value
   console.log("case 2 sum:",addTwoNumbers(2,3))
   console.log("case 3 sum:",addTwoNumbers())
   console.log("case 4 sum",addTwoNumbers(1,null))//null passed
   console.log("case 5 sum",addTwoNumbers(3,undefined))
</script>

上記のコードの出力は以下のようになります- 

first parameter is : 20
second parameter is : 10
case 1 sum: 30
first parameter is : 2
second parameter is : 3
case 2 sum: 5
first parameter is : undefined
second parameter is : 10
case 3 sum: NaN
first parameter is : 1
second parameter is : null
case 4 sum 1
first parameter is : 3
second parameter is : 10
case 5 sum 13

例2

<script>
   let DEFAULT_VAL = 30
      function addTwoNumbers(first,second = DEFAULT_VAL){
         console.log('first parameter is :',first)
         console.log('second parameter is :',second)
         return first+second;
      }
      console.log("case 1 sum",addTwoNumbers(1))
      console.log("case 2 sum",addTwoNumbers(3,undefined))
</script>

上記のコードの出力は以下のようになります- 

first parameter is : 1
second parameter is : 30
case 1 sum 31
first parameter is : 3
second parameter is : 30
case 2 sum 33

レストパラメーター

レストパラメータは、Javaの変数引数に似ています。 残りのパラメーターは、関数に渡すことができる値の数を制限しません。 ただし、渡される値はすべて同じタイプでなければなりません。 つまり、残りのパラメーターは、同じ型の複数の引数のプレースホルダーとして機能します。

残りのパラメーターを宣言するために、パラメーター名の前に3つのピリオド（スプレッド演算子）が付けられます。 次の例は同じことを示しています。 

function fun1(...params) {
   console.log(params.length);
}
fun1();
fun1(5);
fun1(5, 6, 7);

上記のコードが正常に実行されると、次の出力が表示されます。 

0
1
3

注-残りのパラメーターは、関数のパラメーターリストの最後にする必要があります。

無名関数

識別子（関数名）にバインドされていない関数は、匿名関数と呼ばれます。 これらの関数は、実行時に動的に宣言されます。 無名関数は、標準関数と同様に、入力を受け入れて出力を返すことができます。 通常、匿名関数は最初の作成後はアクセスできません。

変数には匿名関数を割り当てることができます。 このような式は*関数式*と呼ばれます。

以下は、無名関数の構文です。 

var res = function( [arguments] ) { ... }

例-無名関数 

var f = function(){ return "hello"}
console.log(f())

上記のコードが正常に実行されると、次の出力が表示されます。 

hello

例-匿名のパラメーター化された関数 

var func = function(x,y){ return x*y };
function product() {
   var result;
   result = func(10,20);
   console.log("The product : "+result)
}
product()

上記のコードが正常に実行されると、次の出力が表示されます。 

The product : 200

関数コンストラクター

関数ステートメントは、新しい関数を定義する唯一の方法ではありません。 Function（）コンストラクターとnew演算子を使用して、関数を動的に定義できます。

次に、Function（）コンストラクターとnew演算子を使用して関数を作成する構文を示します。 

var variablename = new Function(Arg1, Arg2..., "Function Body");

Function（）コンストラクターは、任意の数の文字列引数を必要とします。 最後の引数は関数の本体です。セミコロンで区切られた任意のJavaScriptステートメントを含めることができます。

Function（）コンストラクターには、作成する関数の名前を指定する引数は渡されません。

例-関数コンストラクター 

var func = new Function("x", "y", "return x*y;");
function product() {
   var result;
   result = func(10,20);
   console.log("The product : "+result)
}
product()

上記の例では、Function（）コンストラクターが匿名関数を定義するために使用されます。 この関数は2つのパラメーターを受け入れ、その積を返します。

上記のコードが正常に実行されると、次の出力が表示されます。 

The product : 200

再帰およびJavaScript関数

再帰とは、結果に到達するまで関数自体を繰り返し呼び出すことにより、操作を反復する手法です。 再帰は、ループ内から異なるパラメーターを使用して同じ関数を繰り返し呼び出す必要がある場合に最適です。

  • 例-再帰 *
function factorial(num) {
   if(num <= 0) {
      return 1;
   } else {
      return (num* factorial(num-1)  )
   }
}
console.log(factorial(6))

上記の例では、関数はそれ自体を呼び出します。 上記のコードが正常に実行されると、次の出力が表示されます。 

720

例-匿名の再帰関数 

(function() {
   var msg = "Hello World"
   console.log(msg)
})()

関数は、括弧のペア（）を使用して自分自身を呼び出します。 上記のコードが正常に実行されると、次の出力が表示されます。 

Hello World

ラムダ関数

Lambdaは、プログラミングにおける匿名関数を指します。 Lambda関数は、匿名関数を表す簡潔なメカニズムです。 これらの関数は、*矢印関数*とも呼ばれます。

ラムダ関数-解剖学

ラムダ関数には3つの部分があります-

  • パラメータ-関数はオプションでパラメータを持つことができます。
  • 太い矢印表記/ラムダ表記（⇒）：行き先演算子としても呼ばれます。
  • ステートメント-関数の命令セットを表します。

ヒント-慣例により、コンパクトで正確な関数宣言のために、1文字のパラメーターの使用が推奨されます。

ラムダ式

これは、1行のコードを指す匿名関数式です。 以下は同じ構文です。 

([param1, parma2,…param n] )=>statement;

例-ラムダ式 

var foo = (x)=>10+x
console.log(foo(10))

例では、ラムダ式関数を宣言しています。 関数は、10と渡された引数の合計を返します。

上記のコードが正常に実行されると、次の出力が表示されます。 

20

ラムダ声明

コードのブロックを指す匿名関数宣言です。 この構文は、関数の本体が複数行にわたる場合に使用されます。 以下は同じ構文です。 

( [param1, parma2,…param n] )=> {
  //code block
}

例-ラムダステートメント 

var msg = ()=> {
   console.log("function invoked")
}
msg()

関数の参照が返され、変数msgに保存されます。 上記のコードが正常に実行されると、次の出力が表示されます。 

function  invoked

構文のバリエーション

単一パラメーターのオプションの括弧。 

var msg = x=> {
   console.log(x)
}
msg(10)

単一のステートメントのオプションの中括弧。 パラメーターなしの空の括弧。 

var disp = ()=>console.log("Hello World")
disp();

関数式と関数宣言

関数式と関数宣言は同義ではありません。 関数式とは異なり、関数宣言は関数名によってバインドされます。

2つの基本的な違いは、関数宣言が実行前に解析されることです。 一方、関数式は、実行中にスクリプトエンジンが検出した場合にのみ解析されます。

JavaScriptパーサーは、メインコードフローで関数を検出すると、関数宣言を想定します。 関数がステートメントの一部として来るとき、それは関数式です。

機能巻き上げ

変数と同様に、関数も巻き上げることができます。 変数とは異なり、関数宣言では、関数名を上げるだけでなく、関数宣言を上げたときに関数定義を上げます。

次のコードスニペットは、JavaScriptでの関数の巻き上げを示しています。 

hoist_function();
function hoist_function() {
   console.log("foo");
}

上記のコードが正常に実行されると、次の出力が表示されます。 

foo

ただし、関数式はホイストできません。 次のコードスニペットは同じことを示しています。 

hoist_function();//TypeError: hoist_function() is not a function
var hoist_function() = function() {
   console.log("bar");
};

すぐに呼び出される関数式

即時呼び出し関数式（IIFE）を使用して、ブロック内からの変数の巻き上げを回避できます。 関数内で定義された変数のプライバシーを保持しながら、メソッドへのパブリックアクセスを許可します。 このパターンは、自己実行の匿名関数と呼ばれます。 次の2つの例は、この概念をよりよく説明しています。

例1：IIFE

var main = function() {
   var loop = function() {
      for(var x = 0;x<5;x++) {
         console.log(x);
      }
   }();
   console.log("x can not be accessed outside the block scope x value is :"+x);
}
main();

例2：IIFE

var main = function() {
   (function() {
      for(var x = 0;x<5;x++) {
         console.log(x);
      }
   })();
   console.log("x can not be accessed outside the block scope x value is :"+x);
}
main();

どちらの例でも、次の出力がレンダリングされます。 

0
1
2
3
4
Uncaught ReferenceError: x is not define

ジェネレーター関数

通常の関数が呼び出されると、制御は戻るまで呼び出された関数にとどまります。 ES6のジェネレーターでは、呼び出し元の関数が呼び出された関数の実行を制御できるようになりました。 ジェネレータは、以下を除いて通常の関数に似ています-

  • この関数は、いつでも呼び出し元に制御を戻すことができます。
  • ジェネレーターを呼び出すと、すぐには実行されません。 代わりに、イテレータを取得します。 この関数は、イテレーターのnextメソッドを呼び出すと実行されます。

ジェネレータは、機能キーワードの末尾にアスタリスクを付けることで示されます。それ以外の場合、それらの構文は通常の関数と同じです。

次の例は同じことを示しています。 

"use strict"
function* rainbow() {
  //the asterisk marks this as a generator
   yield 'red';
   yield 'orange';
   yield 'yellow';
   yield 'green';
   yield 'blue';
   yield 'indigo';
   yield 'violet';
}
for(let color of rainbow()) {
   console.log(color);
}

ジェネレーターは、呼び出し元と呼び出された関数の間の双方向通信を可能にします。 これは、 yield キーワードを使用して実現されます。

次の例を考慮してください- 

function* ask() {
   const name = yield "What is your name?";
   const sport = yield "What is your favorite sport?";
   return `${name}'s favorite sport is ${sport}`;
}
const it = ask();
console.log(it.next());
console.log(it.next('Ethan'));
console.log(it.next('Cricket'));

ジェネレーター関数のシーケンスは次のとおりです-

  • ジェネレーターは一時停止状態で起動しました。イテレータが返されます。
  • it.next（）は、「あなたの名前は何ですか」を生成します。 ジェネレータは一時停止しています。 これはyieldキーワードによって行われます。
  • it.next（ "Ethan"）を呼び出すと、値Ethanが変数名に割り当てられ、「お好きなスポーツは何ですか？」が生成されます。再びジェネレーターが一時停止します。
  • it.next（“ Cricket”）の呼び出しは、値Cricketを変数sportに割り当て、後続のreturnステートメントを実行します。

したがって、上記のコードの出力は次のようになります- 

{
   value: 'What is your name?', done: false
}
{
   value: 'What is your favorite sport?', done: false
}
{
   value: 'Ethan\'s favorite sport is Cricket', done: true
}

注意-ジェネレーター関数は、矢印関数を使用して表すことはできません。

矢印関数

ESで導入された矢印関数は、JavaScriptで関数を簡潔に記述するのに役立ちます。 これについて詳しく見てみましょう。

ES5と無名関数

JavaScriptは*無名関数*を多用しています。 無名関数は、名前が付けられていない関数です。 匿名関数は*関数コールバック*中に使用されます。 次の例は、ES5での無名関数の使用を示しています- 

<script>
   setTimeout(function(){
      console.log('Learning at finddevguides is fun!!')
   },1000)
</script>

上記の例では、事前定義された* setTimeout（）関数*にパラメーターとして無名関数を渡します。 setTimeout（）関数は、1秒後に無名関数をコールバックします。

次の出力は、1秒後に表示されます- 

Learning at finddevguides is fun!!

矢印関数の構文

ES6では、*無名関数*の使用を簡略化する*矢印関数*の概念が導入されています。 アロー関数には次の3つの部分があります-

  • パラメータ-矢印関数はオプションでパラメータを持つことができます
  • 太い矢印表記（⇒）-これは、gos to演算子としても呼び出されます
  • ステートメント-関数の命令セットを表します

ヒント-コンパクトで正確な矢印関数の宣言では、慣例により、1文字のパラメーターを使用することをお勧めします。

構文

//Arrow function that points to a single line of code
()=>some_expression

OR

//Arrow function that points to a block of code
()=> {//some statements }`

OR

//Arrow function with parameters
(param1,param2)=>{//some statement}

例：ES6の矢印関数

次の例では、矢印関数を使用して2つの関数式 add および isEven を定義しています 

<script>
   const add = (n1,n2) => n1+n2
   console.log(add(10,20))

   const isEven = (n1) => {
      if(n1%2 == 0)
         return true;
      else
         return false;
   }
   console.log(isEven(10))
</script>

上記のコードの出力は以下のようになります- 

30
true

Array.prototype.map（）と矢印関数

次の例では、矢印関数がパラメーターとして* Array.prototype.map（）関数に渡されます。map（）関数は、配列内の各要素に対して矢印関数を実行します。 この場合、矢印関数は、配列の各要素とそのインデックスを表示します。 

<script>
   const names = ['finddevguides','Mohtashim','Bhargavi','Raja']
   names.map((element,index)=> {
      console.log('inside arrow function')
      console.log('index is '+index+' element value is :'+element)
   })
</script>

上記のコードの出力は以下のようになります- 

inside arrow function
index is 0 element value is :finddevguides
inside arrow function
index is 1 element value is :Mohtashim
inside arrow function
index is 2 element value is :Bhargavi
inside arrow function
index is 3 element value is :Raja

例：window.setTimeout（）およびarrow関数

次の例では、矢印関数をパラメーターとして事前定義された* setTimeout（）関数*に渡します。 * setTimeout（）*関数は、1秒後に矢印関数をコールバックします。 

<script>
   setTimeout(()=>{
      console.log('Learning at finddevguides is fun!!')
   },1000)
</script>

次の出力は、1秒後に表示されます- 

Learning at finddevguides is fun!!

アロー機能と「これ」

  • thisポインター*を使用する場合、矢印関数の内部では、囲み字句スコープを指します。 これは、矢印関数が呼び出されるたびに新しい* thisポインター*インスタンスを作成しないことを意味します。 矢印関数は、その囲みスコープを利用します。 これを理解するために、例を見てみましょう。
<script>
  //constructor function
   function Student(rollno,firstName,lastName) {
      this.rollno = rollno;
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullNameUsingAnonymous = function(){
         setTimeout(function(){
           //creates a new instance of this ,hides outer scope of this
            console.log(this.firstName+ " "+this.lastName)
         },2000)
      }
      this.fullNameUsingArrow = function(){
         setTimeout(()=>{
           //uses this instance of outer scope
            console.log(this.firstName+ " "+this.lastName)
         },3000)
      }
   }
   const s1 = new Student(101,'Mohammad','Mohtashim')
   s1.fullNameUsingAnonymous();
   s1.fullNameUsingArrow();
</script>
  • setTimeout（）で匿名関数を使用すると、関数は2000ミリ秒後に呼び出されます。 *「this」*の新しいインスタンスが作成され、Student関数のインスタンスがシャドウされます。 したがって、 *this.firstName および this.lastName の値は undefined になります。 関数は、字句スコープまたは現在の実行のコンテキストを使用しません。 この問題は、*矢印関数*を使用して解決できます。

上記のコードの出力は次のようになります- 

undefined undefined
Mohammad Mohtashim

ES6-イベント

JavaScriptは、ページにインタラクティブ機能を追加するためのものです。 JavaScriptは、イベントを使用するメカニズムを使用してこれを行います。 *イベント*はDocument Object Model（DOM）レベル3の一部であり、すべてのHTML要素にはJavaScriptコードをトリガーできる一連のイベントが含まれています。

イベントは、ソフトウェアによって認識されるアクションまたは発生です。 ユーザーまたはシステムによってトリガーできます。 イベントの一般的な例には、ユーザーがボタンをクリックする、Webページを読み込む、ハイパーリンクをクリックするなどがあります。 一般的なHTMLイベントの一部を次に示します。

イベントハンドラ

イベントが発生すると、アプリケーションは一連の関連タスクを実行します。 この目的を達成するコードブロックは、 eventhandler と呼ばれます。 すべてのHTML要素には、関連するイベントのセットがあります。 イベントハンドラを使用して、JavaScriptでイベントを処理する方法を定義できます。

onclickイベントタイプ

これは、ユーザーがマウスの左ボタンをクリックしたときに発生する最も頻繁に使用されるイベントタイプです。 検証、警告などを入力できます。 このイベントタイプに対して。

例

<html>
   <head>
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello World")
         }
      </script>
   </head>

   <body>
      <p> Click the following button and see result</p>
      <input type = "button" onclick = "sayHello()" value = "Say Hello"/>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Onclickイベントタイプ

onsubmitEventタイプ

*onsubmit* は、フォームを送信しようとしたときに発生するイベントです。 このイベントタイプに対してフォーム検証を行うことができます。

次の例は、 onsubmit の使用方法を示しています。 ここでは、フォームデータをウェブサーバーに送信する前にvalidate（）関数を呼び出しています。 validate（）関数がtrueを返す場合、フォームが送信されます。それ以外の場合、データは送信されません。

例

<html>
   <head>
      <script type = "text/javascript">
         function validation() {
            all validation goes here
            .........
            return either true or false
         }
      </script>
   </head>

   <body>
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit"/>
      </form>
   </body>
</html>

onmouseoverとonmouseout

これらの2つのイベントタイプは、画像やテキストでも素敵な効果を作成するのに役立ちます。 onmouseover イベントは、要素の上にマウスを移動したときにトリガーされ、 onmouseout はその要素からマウスを移動したときにトリガーされます。

例

<html>
   <head>
      <script type = "text/javascript">
         function over() {
            document.write ("Mouse Over");
         }
         function out() {
            document.write ("Mouse Out");
         }
      </script>
   </head>

   <body>
      <p>Bring your mouse inside the division to see the result:</p>
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Onmouseover Onmouseout

HTML 5標準イベント

参考のために、標準のHTML 5イベントを次の表にリストします。 スクリプトは、そのイベントに対して実行されるJavaScript関数を示します。

Attribute Value Description
offline script Triggers when the document goes offline
onabort script Triggers on an abort event
onafterprint script Triggers after the document is printed
onbeforeonload script Triggers before the document load
onbeforeprint script Triggers before the document is printed
onblur script Triggers when the window loses focus
oncanplay script Triggers when the media can start play, but might have to stop for buffering
oncanplaythrough script Triggers when the media can be played to the end, without stopping for buffering
onchange script Triggers when an element changes
onclick script Triggers on a mouse click
oncontextmenu script Triggers when a context menu is triggered
ondblclick script Triggers on a mouse double-click
ondrag script Triggers when an element is dragged
ondragend script Triggers at the end of a drag operation
ondragenter script Triggers when an element has been dragged to a valid drop target
ondragleave script Triggers when an element leaves a valid drop target
ondragover script Triggers when an element is being dragged over a valid drop target
ondragstart script Triggers at the start of a drag operation
ondrop script Triggers when the dragged element is being dropped
ondurationchange script Triggers when the length of the media is changed
onemptied script Triggers when a media resource element suddenly becomes empty
onended script Triggers when the media has reached the end
onerror script Triggers when an error occurs
onfocus script Triggers when the window gets focus
onformchange script Triggers when a form changes
onforminput script Triggers when a form gets user input
onhaschange script Triggers when the document has changed
oninput script Triggers when an element gets user input
oninvalid script Triggers when an element is invalid
onkeydown script Triggers when a key is pressed
onkeypress script Triggers when a key is pressed and released
onkeyup script Triggers when a key is released
onload script Triggers when the document loads
onloadeddata script Triggers when media data is loaded
onloadedmetadata script Triggers when the duration and other media data of a media element is loaded
onloadstart script Triggers when the browser starts to load the media data
onmessage script Triggers when the message is triggered
onmousedown script Triggers when a mouse button is pressed
onmousemove script Triggers when the mouse pointer moves
onmouseout script Triggers when the mouse pointer moves out of an element
onmouseover script Triggers when the mouse pointer moves over an element
onmouseup script Triggers when a mouse button is released
onmousewheel script Triggers when the mouse wheel is being rotated
onoffline script Triggers when the document goes offline
ononline script Triggers when the document comes online
onpagehide script Triggers when the window is hidden
onpageshow script Triggers when the window becomes visible
onpause script Triggers when the media data is paused
onplay script Triggers when the media data is going to start playing
onplaying script Triggers when the media data has start playing
onpopstate script Triggers when the window’s history changes
onprogress script Triggers when the browser is fetching the media data
onratechange script Triggers when the media data’s playing rate has changed
onreadystatechange script Triggers when the ready-state changes
onredo script Triggers when the document performs a redo
onresize script Triggers when the window is resized
onscroll script Triggers when an element’s scrollbar is being scrolled
onseeked script Triggers when a media element’s seeking attribute is no longer true, and the seeking has ended
onseeking script Triggers when a media element’s seeking attribute is true, and the seeking has begun
onselect script Triggers when an element is selected
onstalled script Triggers when there is an error in fetching media data
onstorage script Triggers when a document loads
onsubmit script Triggers when a form is submitted
onsuspend script Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate script Triggers when the media changes its playing position
onundo script Triggers when a document performs an undo
onunload script Triggers when the user leaves the document
onvolumechange script Triggers when the media changes the volume, also when the volume is set to "mute"
onwaiting script Triggers when the media has stopped playing, but is expected to resume

ES6-クッキー

Webブラウザとサーバーは、HTTPプロトコルを使用して通信します。 HTTPはステートレスプロトコルです。つまり、クライアントが行った複数のリクエストにわたってクライアントのデータを保持しません。 クライアントとサーバー間のこの完全な要求/応答サイクルは、*セッション*として定義されます。 Cookieは、ブラウザがユーザーのセッションに関連するデータを保存するために使用するデフォルトのメカニズムです。

使い方？

サーバーは、Cookieの形式で訪問者のブラウザにデータを送信します。 ブラウザはCookieを受け入れる場合があります。 存在する場合、訪問者のハードドライブにプレーンテキストレコードとして保存されます。 これで、訪問者がサイトの別のページに到達すると、ブラウザは同じCookieをサーバーに送信して取得します。 取得すると、サーバーは以前に保存されたものを認識または記憶します。

Cookieは、5つの可変長フィールドのプレーンテキストデータレコードです。

  • 有効期限-Cookieの有効期限が切れる日付。 これが空白の場合、訪問者がブラウザを終了すると、Cookieは期限切れになります。
  • ドメイン-サイトのドメイン名。
  • Path -Cookieを設定するディレクトリまたはWebページへのパス。 任意のディレクトリまたはページからCookieを取得する場合、これは空白になる場合があります。
  • Secure -このフィールドに「secure」という単語が含まれている場合、Cookieはセキュアサーバーでのみ取得できます。 このフィールドが空白の場合、そのような制限はありません。
  • 名前=値-Cookieはキーと値のペアの形式で設定および取得されます。

クッキーはもともとCGIプログラミング用に設計されました。 Cookieに含まれるデータは、WebブラウザーとWebサーバー間で自動的に送信されるため、サーバー上のCGIスクリプトは、クライアント側に保存されているCookie値を読み書きできます。

JavaScriptは、Documentオブジェクトのcookieプロパティを使用してcookieを操作することもできます。 JavaScriptは、現在のWebページに適用されるCookieを読み取り、作成、変更、および削除できます。

クッキーの保存

Cookieを作成する最も簡単な方法は、次のような document.cookie オブジェクトに文字列値を割り当てることです。 

"document.cookie = "key1 = value1; key2 = value2; expires = date";

ここでは、「expires」属性はオプションです。 この属性に有効な日付または時刻を指定すると、指定された日付または時刻にCookieの有効期限が切れ、その後、Cookieの値にアクセスできなくなります。

注意-Cookieの値には、セミコロン、コンマ、または空白を含めることはできません。 このため、Cookieに保存する前にJavaScript * escape（）関数を使用して値をエンコードすることができます。 これを行う場合は、Cookie値を読み取るときに、対応する unescape（）*関数も使用する必要があります。

例

<html>
   <head>
      <script type = "text/javascript">
         function WriteCookie() {
            if( document.myform.customer.value == "" ){
               alert ("Enter some value!");
               return;
            }
            cookievalue =  escape(document.myform.customer.value) + ";";
            document.cookie = "name = " + cookievalue;
            document.write ("Setting Cookies : " + "name = " + cookievalue );
         }
      </script>
   </head>

   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set" onclick = "WriteCookie();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Cookies

これで、マシンにはnameというCookieがあります。 複数のkey = valueのペアをコンマで区切って使用して、複数のCookieを設定できます。

クッキーを読む

cookieの読み取りは、 document.cookie オブジェクトの値がcookieであるため、書き込みと同じくらい簡単です。 そのため、Cookieにアクセスするときはいつでもこの文字列を使用できます。 document.cookie 文字列は、名前がCookieの名前で、値がその文字列値であるセミコロンで区切られたname = valueのペアのリストを保持します。

次の例に示すように、ストリングの* split（）*関数を使用して、ストリングをキーと値に分割できます。

例

<html>
   <head>
      <script type = "text/javascript">
         function ReadCookie() {
            var allcookies  =  document.cookie;
            document.write ("All Cookies : " + allcookies );
         }
        //Get all the cookies pairs in an array
         cookiearray = allcookies.split(';');

        //Now take key value pair out of this array
         for(var i = 0; i<cookiearray.length; i++) {
            name  =  cookiearray[i].split('=')[0];
            value = cookiearray[i].split('=')[1];
            document.write ("Key is : " + name + " and Value is : " + value);
         }
      </script>
   </head>

   <body>
      <form name = "myform" action = "">
         <p> click the following button and see the result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>
   </body>
</html>

注意-ここで、lengthは配列の長さを返すArrayクラスのメソッドです。

マシンにはすでに他のCookieが設定されている場合があります。 上記のコードは、マシンに設定されているすべてのCookieを表示します。

上記のコードが正常に実行されると、次の出力が表示されます。

Cookieの読み取り

Cookieの有効期限の設定

有効期限を設定し、Cookie内に有効期限を保存することにより、現在のブラウザセッションを超えてCookieの寿命を延ばすことができます。 これは、「expires」属性に日付と時刻を設定することで実行できます。 次の例は、Cookieの有効期限を1か月延長する方法を示しています。

例

<html>
   <head>
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() + 1 );
            cookievalue = escape(document.myform.customer.value) + ";"
            document.cookie = "name = " + cookievalue;
            document.cookie = "expires = " + now.toUTCString() + ";"
            document.write ("Setting Cookies : " + "name = " + cookievalue );
         }
      </script>
   </head>

   <body>
      <form name = "formname" action = "">
         Enter Cookie Name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Cookieの有効期限

クッキーを削除する

Cookieを削除して、その後にCookieを読み取ろうとしても何も返されないようにする場合があります。 これを行うには、有効期限を過去の時間に設定するだけです。 次の例は、有効期限を現在の日付から1か月遅れて設定することにより、Cookieを削除する方法を示しています。

例

<html>
   <head>
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() - 1 );
            cookievalue = escape(document.myform.customer.value) + ";"
            document.cookie = "name=" + cookievalue;
            document.cookie = "expires = " + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name = " + cookievalue );
         }
      </script>
   </head>

   <body>
      <form name = "formname" action = "">
         Enter Cookie Name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Cookieの削除

ES6-ページのリダイレクト

  • リダイレクト*は、ユーザーと検索エンジンの両方を、最初に要求したURLとは異なるURLに送信する方法です。 ページリダイレクトは、Webページを別のWebページに自動的にリダイレクトする方法です。 多くの場合、リダイレクトされたページは同じWebサイトにありますが、別のWebサイトまたはWebサーバーにある場合もあります。

JavaScriptページのリダイレクト

*window.locationおよびwindow.location.href*

JavaScriptでは、多くのメソッドを使用してWebページを別のページにリダイレクトできます。 ほとんどすべてのメソッドは、Windowオブジェクトのプロパティである window.location オブジェクトに関連しています。 現在のURLアドレス（Webアドレス）を取得し、ブラウザーを新しいページにリダイレクトするために使用できます。 両方の使用法は、動作に関して同じです。 window.location はオブジェクトを返します。 .href が設定されていない場合、 window.location はデフォルトでパラメーター .href を変更します。

例

<!DOCTYPE html>
<html>
   <head>
      <script>
         function newLocation() {
            window.location = "http://www.xyz.com";
         }
      </script>
   </head>

   <body>
      <input type = "button" value = "Go to new location" onclick = "newLocation()">
   </body>
</html>
  • location.replace（）*

他の最も頻繁に使用されるメソッドは、window.locationオブジェクトの* replace（）*メソッドです。現在のドキュメントを新しいものに置き換えます。 replace（）メソッドでは、新しいURLをreplace（）メソッドに渡すと、HTTPリダイレクトが実行されます。

以下は同じ構文です。 

window.location.replace("http://www.abc.com
  • location.assign（）*

location.assign（）メソッドは、ブラウザウィンドウに新しいドキュメントをロードします。

以下は同じ構文です。 

window.location.assign("http://www.abc.org");
  • assign（）vs. replace（）*

assign（）メソッドとreplace（）メソッドの違いは、location.replace（）メソッドがドキュメント履歴から現在のURLを削除するため、元のドキュメントに戻ることができないことです。 この場合、ブラウザの「戻る」ボタンは使用できません。 この状況を回避する場合は、location.assign（）メソッドを使用する必要があります。これは、ブラウザに新しいドキュメントをロードするためです。

  • location.reload（）*

location.reload（）メソッドは、ブラウザウィンドウで現在のドキュメントをリロードします。

以下は同じ構文です。 

window.location.reload("http://www.yahoo.com");
  • window.navigate（）*

window.navigate（）メソッドは、window.location.hrefプロパティに新しい値を割り当てることに似ています。 MS Internet Explorerでのみ使用できるため、クロスブラウザー開発では使用しないでください。

以下は同じ構文です。 

window.navigate("http://www.abc.com");

リダイレクトと検索エンジンの最適化

URLの転送について検索エンジン（SEO）に通知する場合、検索エンジンはリダイレクトを確認するためにJavaScriptを分析しないため、rel = "canonical"メタタグをWebサイトのヘッドパーツに追加する必要があります。

以下は同じ構文です。 

<link rel = "canonical" href = "http://abc.com/"/>

ES6-ダイアログボックス

JavaScriptは、3つの重要なタイプのダイアログボックスをサポートしています。 これらのダイアログボックスを使用して、警告を発したり、入力の確認を取得したり、ユーザーからの入力を取得したりできます。 ここでは、各ダイアログボックスについて1つずつ説明します。

警告ダイアログボックス

警告ダイアログボックスは、主にユーザーに警告メッセージを送信するために使用されます。 たとえば、1つの入力フィールドにテキストを入力する必要があるが、ユーザーが入力を提供しない場合、検証の一部として、警告ボックスを使用して警告メッセージを送信できます。

それでも、わかりやすいメッセージには警告ボックスを使用できます。 警告ボックスには、選択して続行するための「OK」ボタンが1つだけあります。

例

<html>
   <head>
      <script type = "text/javascript">
         function Warn() {
            alert ("This is a warning message!");
            document.write ("This is a warning message!");
         }
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

アラートダイアログボックス

確認ダイアログボックス

確認ダイアログボックスは、ほとんどの場合、オプションについてユーザーの同意を得るために使用されます。 [OK]と[キャンセル]の2つのボタンを持つダイアログボックスが表示されます。

ユーザーが[OK]ボタンをクリックすると、ウィンドウメソッド* confirm（）*はtrueを返します。 ユーザーが[キャンセル]ボタンをクリックすると、confirm（）はfalseを返します。 次の確認ダイアログボックスを使用できます。

例

<html>
   <head>
      <script type = "text/javascript">
         function getConfirmation(){
            var retVal = confirm("Do you want to continue ?");

            if( retVal == true ){
               document.write ("User wants to continue!");
               return true;
            } else {
               Document.write ("User does not want to continue!");
               return false;
            }
         }
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

確認ダイアログボックス

プロンプトダイアログボックス

プロンプトダイアログボックスは、テキストボックスをポップアップしてユーザー入力を取得する場合に非常に便利です。 したがって、ユーザーと対話することができます。 ユーザーはフィールドに入力して、[OK]をクリックする必要があります。

このダイアログボックスは、（i）テキストボックスに表示するラベルと（ii）テキストボックスに表示する既定の文字列の2つのパラメーターを取る* prompt（）*というメソッドを使用して表示されます。

このダイアログボックスには、[OK]と[キャンセル]の2つのボタンがあります。 ユーザーが[OK]ボタンをクリックすると、ウィンドウメソッドprompt（）は入力された値をテキストボックスから返します。 ユーザーが[キャンセル]ボタンをクリックすると、ウィンドウメソッドprompt（）はnullを返します。

例

<html>
   <head>
      <script type = "text/javascript">
         function getValue(){
            var retVal = prompt("Enter your name : ", "your name here");
            document.write("You have entered : " + retVal);
         }
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

プロンプトダイアログボックス

ES6-voidキーワード

*void* はJavaScriptの重要なキーワードであり、任意のタイプの単一のオペランドの前に現れる単項演算子として使用できます。 この演算子は、値を返さずに評価される式を指定します。 演算子は指定された式を評価し、未定義を返します。

以下は同じ構文です。 

void expression

無効および即時に呼び出される関数式

即時に呼び出される関数式を使用する場合、voidを使用して、関数キーワードを宣言ではなく式として強制的に処理できます。

次の例を考慮してください- 

void function iife_void() {
   var msg = function () {console.log("hello world")};
   msg();
}();

上記のコードが正常に実行されると、次の出力が表示されます。 

hello world

VoidおよびJavaScript URI

*JavaScript：URI* は、HTMLページでよく見られる構文です。 ブラウザはURIを評価し、ページのコンテンツを返された値に置き換えます。 返される値が未定義でない限り、これは真です。 この演算子の最も一般的な使用法は、クライアント側の *JavaScript：URL* であり、評価された式の値をブラウザーに表示せずに、式の副作用を評価できます。

次のコードスニペットを考慮してください- 

<a href = "javascript:void(javascript:alert('hello world!!'))">
  Click here to do nothing
</a>
<br/><br/><br/>
<a href = "javascript:alert('hello');">Click here for an alert</a>

上記のファイルをHTMLドキュメントとして保存し、ブラウザで開きます。 最初のハイパーリンクをクリックすると、javascript：alert（“ hello”）が評価され、void（）演算子に渡されます。 ただし、void演算子はundefinedを返すため、結果はページに表示されません。

一方、2番目のハイパーリンクをクリックすると、警告ダイアログが表示されます。

ES6-ページ印刷

多くの場合、Webページにボタンを配置して、そのWebページのコンテンツを実際のプリンターで印刷します。 JavaScriptは、ウィンドウオブジェクトの印刷機能を使用してこの機能を実装するのに役立ちます。

JavaScript印刷関数* window.print（）*は、実行時に現在のWebページを印刷します。 次の例に示すように、onclickイベントを使用してこの関数を直接呼び出すことができます。

例

<html>
   <body>
      <form>
         <input type = "button" value = "Print" onclick = "window.print()"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

ページ印刷

ES6-オブジェクト

JavaScriptはデータ型の拡張をサポートしています。 JavaScriptオブジェクトは、カスタムデータ型を定義する優れた方法です。

  • オブジェクト*は、キーと値のペアのセットを含むインスタンスです。 プリミティブデータ型とは異なり、オブジェクトは複数の値または複雑な値を表すことができ、ライフタイムにわたって変化することがあります。 値は、スカラー値または関数、または他のオブジェクトの配列です。

オブジェクトを定義するための構文のバリエーションについては、さらに説明します。

オブジェクト初期化子

プリミティブ型と同様に、オブジェクトにはリテラル構文があります：*中括弧v *（\ {and}）。 以下は、オブジェクトを定義するための構文です。 

var identifier = {
   Key1:value, Key2: function () {
     //functions
   },
   Key3: [“content1”,” content2”]
}

オブジェクトの内容は properties （またはメンバー）と呼ばれ、プロパティは name （またはキー）と value で構成されます。 プロパティ名は文字列または記号である必要があり、値は任意のタイプ（他のオブジェクトを含む）にできます。

すべてのJavaScript変数と同様に、オブジェクト名（通常の変数の場合もあります）とプロパティ名の両方で大文字と小文字が区別されます。 オブジェクトのプロパティにアクセスするには、単純なドット表記を使用します。

以下は、オブジェクトプロパティにアクセスするための構文です。 

objectName.propertyName

例：オブジェクト初期化子

var person = {
   firstname:"Tom",
   lastname:"Hanks",
   func:function(){return "Hello!!"},
};
//access the object values
console.log(person.firstname)
console.log(person.lastname)
console.log(person.func())

上記の例では、オブジェクトpersonを定義しています。 オブジェクトには3つのプロパティがあります。 3番目のプロパティは関数を参照します。

上記のコードが正常に実行されると、次の出力が表示されます。 

Tom
Hanks
Hello!!

ES6では、プロパティ名と一致するプロパティ値を割り当てるときに、プロパティ値を省略できます。

例

var foo = 'bar'
var baz = { foo }
console.log(baz.foo)

上記のコードスニペットは、オブジェクト baz を定義しています。 オブジェクトにはプロパティ foo があります。 ES6はオブジェクトのキーfooに変数fooの値を暗黙的に割り当てるため、プロパティ値はここでは省略されます。

以下は、上記のコードに相当するES5です。 

var foo = 'bar'
var baz = { foo:foo }
console.log(baz.foo)

上記のコードが正常に実行されると、次の出力が表示されます。 

bar

この略記構文を使用して、JSエンジンは、同じ名前を持つ変数のスコープを調べます。 見つかった場合、その変数の値がプロパティに割り当てられます。 見つからない場合、参照エラーがスローされます。

Object（）コンストラクター

JavaScriptは、オブジェクトを作成するための* Object（）*という特別なコンストラクター関数を提供します。 new演算子は、オブジェクトのインスタンスを作成するために使用されます。 オブジェクトを作成するには、new演算子の後にコンストラクターメソッドが続きます。

以下は、オブジェクトを定義するための構文です。 

var obj_name = new Object();
obj_name.property = value;
OR
obj_name["key"] = value

以下は、プロパティにアクセスするための構文です。 

Object_name.property_key
OR
Object_name["property_key"]

例

var myCar = new Object();
myCar.make = "Ford";//define an object
myCar.model = "Mustang";
myCar.year = 1987;

console.log(myCar["make"])//access the object property
console.log(myCar["model"])
console.log(myCar["year"])

上記のコードが正常に実行されると、次の出力が表示されます。 

Ford
Mustang
1987

オブジェクトの割り当てられていないプロパティは未定義です。

例

var myCar = new Object();
myCar.make = "Ford";
console.log(myCar["model"])

上記のコードが正常に実行されると、次の出力が表示されます。 

undefined

注-オブジェクトプロパティ名には、任意の有効なJavaScript文字列、または空の文字列を含む文字列に変換できるものを指定できます。 ただし、有効なJavaScript識別子ではないプロパティ名（たとえば、スペースやハイフンを持つ、または数字で始まるプロパティ名）には、角括弧表記を使用してのみアクセスできます。

プロパティには、変数に格納されている文字列値を使用してアクセスすることもできます。 つまり、オブジェクトのプロパティキーは動的な値にすることができます。 例：変数。 この概念を次の例に示します。

例

var myCar = new Object()
var propertyName = "make";
myCar[propertyName] = "Ford";
console.log(myCar.make)

上記のコードが正常に実行されると、次の出力が表示されます。 

Ford

コンストラクター関数

オブジェクトは、次の2つのステップを使用して作成することができます-

  • ステップ1 *-コンストラクター関数を記述して、オブジェクトタイプを定義します。

以下は同じ構文です。 

function function_name() {
   this.property_name = value
}

「this」キーワードは、現在使用中のオブジェクトを参照し、オブジェクトのプロパティを定義します。

  • ステップ2 *-新しい構文でオブジェクトのインスタンスを作成します。
var Object_name= new function_name()
//Access the property value

Object_name.property_name

新しいキーワードは、関数コンストラクターを呼び出し、関数のプロパティキーを初期化します。

例-関数コンストラクターの使用 

function Car() {
   this.make = "Ford"
   this.model = "F123"
}
var obj = new Car()
console.log(obj.make)
console.log(obj.model)

上記の例では、関数コンストラクターを使用してオブジェクトを定義しています。

上記のコードが正常に実行されると、次の出力が表示されます。 

Ford
F123

新しいプロパティは、以前に定義したオブジェクトにいつでも追加できます。 たとえば、次のコードスニペットを考慮してください- 

function Car() {
   this.make = "Ford"
}
var obj = new Car()
obj.model = "F123"
console.log(obj.make)
console.log(obj.model)

上記のコードが正常に実行されると、次の出力が表示されます。 

Ford
F123

Object.createメソッド

オブジェクトは* Object.create（）*メソッドを使用して作成することもできます。 コンストラクター関数を定義せずに、目的のオブジェクトのプロトタイプを作成できます。

例

var roles = {
   type: "Admin",//Default value of properties
   displayType : function() {
     //Method which will display type of role
      console.log(this.type);
   }
}
//Create new role type called super_role
var super_role = Object.create(roles);
super_role.displayType();//Output:Admin

//Create new role type called Guest
var guest_role = Object.create(roles);
guest_role.type = "Guest";
guest_role.displayType();//Output:Guest

上記の例では、オブジェクト-rolesを定義し、プロパティのデフォルト値を設定します。 オブジェクトのデフォルトのプロパティ値を上書きする2つの新しいインスタンスが作成されます。

上記のコードが正常に実行されると、次の出力が表示されます。 

Admin
Guest

Object.assign（）関数

  • Object.assign（）*メソッドは、列挙可能なすべてのプロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。 ターゲットオブジェクトを返します。

以下は同じ構文です。 

Object.assign(target, ...sources)

例-オブジェクトの複製 

"use strict"
var det = { name:"Tom", ID:"E1001" };
var copy = Object.assign({}, det);
console.log(copy);
for (let val in copy) {
   console.log(copy[val])
}

上記のコードが正常に実行されると、次の出力が表示されます。 

Tom
E1001

例-オブジェクトのマージ 

var o1 = { a: 10 };
var o2 = { b: 20 };
var o3 = { c: 30 };
var obj = Object.assign(o1, o2, o3);
console.log(obj);
console.log(o1);

上記のコードが正常に実行されると、次の出力が表示されます。 

{ a: 10, b: 20, c: 30 }
{ a: 10, b: 20, c: 30 }

注-オブジェクトのコピーとは異なり、オブジェクトがマージされると、大きなオブジェクトはプロパティの新しいコピーを保持しません。 むしろ、元のオブジェクトに含まれるプロパティへの参照を保持します。 次の例でこの概念を説明します。 

var o1 = { a: 10 };
var obj = Object.assign(o1);
obj.a++
console.log("Value of 'a' in the Merged object after increment  ")
console.log(obj.a);
console.log("value of 'a' in the Original Object after increment ")
console.log(o1.a);

上記のコードが正常に実行されると、次の出力が表示されます。 

Value of 'a' in the Merged object after increment
11
value of 'a' in the Original Object after increment
11

プロパティを削除する

delete演算子を使用して、プロパティを削除できます。 次のコードは、プロパティを削除する方法を示しています。

例

//Creates a new object, myobj, with two properties, a and b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

//Removes the ‘a’ property
delete myobj.a;
console.log ("a" in myobj)//yields "false"

上記のコードが正常に実行されると、次の出力が表示されます。 

false

コードスニペットは、オブジェクトからプロパティを削除します。 in演算子がオブジェクト内でプロパティを見つけられないため、この例はfalseを出力します。

オブジェクトの比較

JavaScriptでは、オブジェクトは参照型です。 2つの異なるオブジェクトは、同じプロパティを持っている場合でも決して等しくなりません。 これは、完全に異なるメモリアドレスを指しているためです。 共通の参照を共有するオブジェクトのみが比較でtrueになります。

例1-異なるオブジェクト参照 

var val1 = {name: "Tom"};
var val2 = {name: "Tom"};
console.log(val1 == val2) //return false
console.log(val1 === val2) //return false

上記の例では、 val1 と val2 は2つの異なるメモリアドレスを参照する2つの異なるオブジェクトです。 したがって、等しいかどうかを比較すると、演算子はfalseを返します。

例2-単一オブジェクト参照 

var val1 = {name: "Tom"};
var val2 = val1

console.log(val1 == val2)//return true
console.log(val1 === val2)//return true

上記の例では、val1のコンテンツはval2に割り当てられます。 val1のプロパティの参照はval2と共有されます。 オブジェクトはプロパティへの参照を共有するようになったため、等価演算子は、2つの異なるメモリアドレスを参照する2つの異なるオブジェクトに対してtrueを返します。 したがって、等しいかどうかを比較すると、演算子はfalseを返します。

オブジェクトの非構造化

「破壊」という用語は、エンティティの構造を分割することを指します。 JavaScriptの構造化代入構文により、配列またはオブジェクトからデータを個別の変数に抽出できます。 同じことが次の例に示されています。

例

var emp = { name: 'John', Id: 3 }
var {name, Id} = emp
console.log(name)
console.log(Id)

上記のコードが正常に実行されると、次の出力が表示されます。 

John
3

注意-破壊を有効にするには、 _ nodeのファイルをノードとして実行します– harmony_destructuring file_name_

ES6-番号

Numberオブジェクトは、整数または浮動小数点数の数値日付を表します。 通常、ブラウザは数値リテラルを数値クラスのインスタンスに自動的に変換するため、Numberオブジェクトについて心配する必要はありません。

以下は、数値オブジェクトを作成するための構文です。 

var val = new Number(number);
*number* の場所で、数値以外の引数を指定すると、引数を *number* に変換できず、NaN（Not-a-Number）が返されます。

数値のプロパティ

Sr.No Property & Description
1

Number.EPSILON

2つの表現可能な数値間の最小間隔。

2

Number.MAX_SAFE_INTEGER

JavaScriptの最大安全整数（2 ^ 53-1）。

3

Number.MAX_VALUE

表現可能な最大の正の数。

4

MIN_SAFE_INTEGER

JavaScriptの最小安全整数（-（2 ^ 53-1））。

5

Number.MIN_VALUE

表現可能な最小の正の数-つまり、ゼロに最も近い正の数（実際にはゼロではない）

6

Number.Nan

特別な「数値ではない」値

7

Number.NEGATIVE_INFINITY

負の無限大を表す特別な値。オーバーフローで返された

8

Number.POSITIVE_INFINITY

無限を表す特別な値。オーバーフローで返された

9

Number.prototype

無限を表す特別な値。オーバーフローで返された

数値メソッド

Sr.No Method & Description
1

Number.isNaN()

渡された値がNaNかどうかを決定します。

2

Number.isFinite()

渡された値が有限数かどうかを判断します。

3

Number.isInteger()

渡された値が整数かどうかを判別します。

4

Number.isSafeInteger()

渡された値が安全な整数（-（253-1）〜253-1の数値）かどうかを判別します

5

Number.parseFloat()

値は、グローバルオブジェクトのparseFloat（）と同じです

6

Number.parseInt()

値は、グローバルオブジェクトのparseInt（）と同じです

インスタンス番号メソッド

Numberオブジェクトには、すべてのオブジェクトの定義の一部であるデフォルトメソッドのみが含まれます。

Sr.No Instance Method & Description
1

toExponential()

指数表記の数値を表す文字列を返します

2

toFixed()

固定小数点表記の数値を表す文字列を返します

3

toLocaleString()

この番号の言語依存表現を含む文字列を返します

4

toPrecision()

固定小数点または指数表記で指定された精度の数値を表す文字列を返します

5

toString()

指定した基数（ベース）で指定したオブジェクトを表す文字列を返します

6

valueOf()

指定されたオブジェクトのプリミティブ値を返します。

バイナリおよびオクタルリテラル

ES6以前では、整数のバイナリまたは8進表現に関しては、基数を指定してparseInt（）に渡すだけでした。 ES6では、0bおよび0oプレフィックスを使用して、それぞれバイナリおよび8進整数リテラルを表すことができました。 同様に、16進値を表すには、 0x プレフィックスを使用します。

プレフィックスは大文字でも小文字でも書くことができます。 ただし、小文字バージョンに固執することをお勧めします。

例-バイナリ表現 

console.log(0b001)
console.log(0b010)
console.log(0b011)
console.log(0b100)

上記のコードが正常に実行されると、次の出力が表示されます。 

1
2
3
4

例-オクタル表現 

console.log(0x010)
console.log(0x100)

上記のコードが正常に実行されると、次の出力が表示されます。 

16
256

例-16進数表現 

console.log(0x010)
console.log(0x100)

上記のコードが正常に実行されると、次の出力が表示されます。 

16
256

ES6-ブール

ブールオブジェクトは、 "true" または "false" の2つの値を表します。 valueパラメーターが省略されているか、0、-0、null、false、NaN、undefined、または空の文字列（ ""）の場合、オブジェクトの初期値はfalseです。

次の構文を使用して* booleanオブジェクト*を作成します。 

var val = new Boolean(value);

ブールプロパティ

以下は、ブールオブジェクトのプロパティのリストです。

Sr.No Property & Description
1

constructor

オブジェクトを作成したブール関数への参照を返します。

2

prototype

prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます。

ブールメソッド

以下は、ブールオブジェクトのメソッドとその説明のリストです。

Sr.No Method & Description
1

toSource()

ブールオブジェクトのソースを含む文字列を返します。この文字列を使用して、同等のオブジェクトを作成できます。

2

toString()

オブジェクトの値に応じて、「true」または「false」の文字列を返します。

3

valueOf()

ブールオブジェクトのプリミティブ値を返します。

次のセクションでは、いくつかの例を見て、ブールメソッドの使用方法を示します。

ES6-ストリング

Stringオブジェクトを使用すると、一連の文字を操作できます。 JavaScriptの文字列プリミティブデータ型をいくつかのヘルパーメソッドでラップします。

JavaScriptは文字列プリミティブとStringオブジェクトの間で自動的に変換するため、文字列プリミティブでStringオブジェクトのヘルパーメソッドを呼び出すことができます。

次の構文を使用して、Stringオブジェクトを作成します。 

var val = new String(string);

文字列パラメーターは、適切にエンコードされた一連の文字です。 文字列

文字列のプロパティ

以下は、Stringオブジェクトのプロパティとその説明のリストです。

Sr.No Property & Description
1

constructor

オブジェクトを作成したString関数への参照を返します。

2

length

文字列の長さを返します。

3

Prototype

prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます。

文字列メソッド

以下に、Stringオブジェクトで使用可能なメソッドとその説明のリストを示します。

Sr.No Method & Description
1

charAt()

指定されたインデックスにある文字を返します。

2

charCodeAt()

指定されたインデックスにある文字のUnicode値を示す数値を返します。

3

concat()

2つの文字列のテキストを結合し、新しい文字列を返します。

4

indexOf()

指定した値の最初の出現の呼び出し元Stringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

5

lastIndexOf()

指定した値が最後に出現する呼び出し元のStringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

6

localeCompare()

参照文字列がソート順で指定された文字列の前にあるか後にあるか、または同じかを示す数値を返します。

7

match()

正規表現を文字列と照合するために使用されます。

8

replace()

正規表現と文字列の一致を検出し、一致した部分文字列を新しい部分文字列で置き換えるために使用されます。

9

search()

正規表現と指定された文字列の一致の検索を実行します。

10

slice()

文字列のセクションを抽出し、新しい文字列を返します。

11

split()

文字列を部分文字列に分離することにより、文字列オブジェクトを文字列の配列に分割します。

12

substr()

指定した位置から指定した文字数までの文字列内の文字を返します。

13

substring()

2つのインデックス間の文字列内の文字を文字列に返します。

14

toLocaleLowerCase()

文字列内の文字は、現在のロケールを尊重しながら小文字に変換されます。

15

toLocaleupperCase()

文字列内の文字は、現在のロケールを考慮しながら大文字に変換されます。

16

toLowerCase()

呼び出し文字列値を小文字に変換して返します。

17

toString()

指定されたオブジェクトを表す文字列を返します。

18

toUpperCase()

呼び出し文字列値を大文字に変換して返します。

19

valueOf()

指定されたオブジェクトのプリミティブ値を返します。

ES6-シンボル

シンボルの紹介

ES6では、シンボルと呼ばれる新しいプリミティブ型が導入されています。 JavaScriptプログラムにメタプログラミングを実装するのに役立ちます。

構文

const mySymbol = Symbol()
const mySymbol = Symbol(stringDescription)

シンボルは、データを格納できるメモリの一部です。 各シンボルは異なるメモリ位置を指します。 Symbol（）コンストラクターによって返される値は一意で不変です。

例

例を通してこれを理解しましょう。 最初は、説明のない2つのシンボルを作成し、その後に同じ説明のシンボルを作成しました。 どちらの場合も、シンボルを比較すると、等価演算子はfalseを返します。 

<script>
   const s1 = Symbol();
   const s2 = Symbol();
   console.log(typeof s1)
   console.log(s1===s2)
   const s3 = Symbol("hello");//description
   const s4 = Symbol("hello");
   console.log(s3)
   console.log(s4)
   console.log(s3==s4)
</script>

上記のコードの出力は以下のようになります- 

symbol
false
Symbol(hello)
Symbol(hello)
false
Sr.No Property & Description
1

Symbol.for(key)

指定されたキーでシンボルレジストリ内の既存のシンボルを検索し、見つかった場合はそれを返します。 それ以外の場合、新しいキーはこのキーを使用してグローバルシンボルレジストリに作成されます。

2

Symbol.keyFor(sym)

指定されたシンボルのグローバルシンボルレジストリから共有シンボルキーを取得します。

シンボルとクラス

シンボルをクラスで使用して、クラスのプロパティを定義できます。 利点は、以下に示すようにプロパティがシンボルの場合、シンボル名がわかっている場合にのみ、パッケージの外部からプロパティにアクセスできることです。 したがって、シンボルをプロパティとして使用すると、データは非常にカプセル化されます。

例

<script>
   const COLOR = Symbol()
   const MODEL = Symbol()
   const MAKE = Symbol()
   class Bike {
      constructor(color ,make,model){
      this[COLOR] = color;
      this[MAKE] = make;
      this[MODEL] = model;
   }
}
let bike = new Bike('red','honda','cbr')
console.log(bike)
//property can be accessed ony if symbol name is known
console.log(bike[COLOR])
</script>

上記のコードの出力は以下のようになります- 

Bike {Symbol(): "red", Symbol(): "honda", Symbol(): "cbr"}
red

ES6-新しい文字列メソッド

以下は、メソッドとその説明のリストです。

Sr.No Method & Description
1

String.prototype.startsWith(searchString

受信者がsearchStringで始まる場合、trueを返します。位置により、チェックする文字列の開始位置を指定できます。

2

String.prototype.endsWith(searchString

受信者がsearchStringで始まる場合、trueを返します。位置により、チェックする文字列の開始位置を指定できます。

3

String.prototype.includes(searchString

受信者にsearchStringが含まれている場合、trueを返します。 positionを使用すると、検索する文字列の開始位置を指定できます。

4

String.prototype.repeat(count)

count回連結されたレシーバーを返します。

テンプレートリテラル

  • テンプレートリテラル*は、埋め込み式を許可する文字列リテラルです。 *テンプレート文字列*では、一重引用符または二重引用符ではなくバックティック（ ``）を使用します。 したがって、テンプレート文字列は次のように書くことができます-
var greeting = `Hello World!`;

文字列補間とテンプレートリテラル

示されているように、テンプレート文字列は、$ \ {}構文を使用した文字列置換にプレースホルダーを使用できます。

例1 

var name = "Brendan";
console.log('Hello, ${name}!');

上記のコードが正常に実行されると、次の出力が表示されます。 

Hello, Brendan!

例2：テンプレートリテラルと式 

var a = 10;
var b = 10;
console.log(`The sum of ${a} and ${b} is  ${a+b} `);

上記のコードが正常に実行されると、次の出力が表示されます。 

The sum of 10 and 10 is 20

例3：テンプレートリテラルと関数式 

function fn() { return "Hello World"; }
console.log(`Message: ${fn()} !!`);

上記のコードが正常に実行されると、次の出力が表示されます。 

Message: Hello World !!

複数行の文字列とテンプレートリテラル

テンプレート文字列には複数の行を含めることができます。

  • 例 *
var multiLine = `
   This is
   a string
   with multiple
   lines`;
console.log(multiLine)

上記のコードが正常に実行されると、次の出力が表示されます。 

This is
a string
with multiple
line

String.raw（）

ES6には、バックスラッシュが特別な意味を持たない生の文字列用のタグ関数String.rawが含まれています。* String.raw *を使用すると、正規表現リテラルの場合と同様にバックスラッシュを記述できます。 次の例を考えてください。 

var text =`Hello \n World`
console.log(text)

var raw_text = String.raw`Hello \n World `
console.log(raw_text)

上記のコードが正常に実行されると、次の出力が表示されます。 

Hello
World
Hello \n World

String.fromCodePoint（）

静的なString。* fromCodePoint（）*メソッドは、指定されたUnicodeコードポイントのシーケンスを使用して作成された文字列を返します。 無効なコードポイントが渡されると、関数はRangeErrorをスローします。 

console.log(String.fromCodePoint(42))
console.log(String.fromCodePoint(65, 90))

上記のコードが正常に実行されると、次の出力が表示されます。 

*
AZ

ES6-配列

変数を使用して値を保存するには、次の制限があります-

  • 変数は本質的にスカラーです。 つまり、変数宣言には一度に1つの変数宣言しか含めることができません。 つまり、プログラムにn個の値を格納するには、n個の変数宣言が必要になります。 したがって、値のより大きなコレクションを格納する必要がある場合、変数の使用は実行できません。
  • プログラム内の変数には、ランダムな順序でメモリが割り当てられるため、宣言の順序で値を取得または読み取ることが難しくなります。

JavaScriptは、これに取り組むために配列の概念を導入しています。

配列は、値の同種のコレクションです。 簡単にするために、配列は同じデータ型の値のコレクションです。 これはユーザー定義型です。

配列の機能

  • 配列宣言は、シーケンシャルメモリブロックを割り当てます。
  • 配列は静的です。 これは、一度初期化された配列のサイズを変更できないことを意味します。
  • 各メモリブロックは配列要素を表します。
  • 配列要素は、要素の添え字/インデックスと呼ばれる一意の整数によって識別されます。
  • 変数などの配列も、使用する前に宣言する必要があります。
  • 配列の初期化とは、配列要素にデータを設定することです。
  • 配列要素の値は更新または変更できますが、削除することはできません。

配列の宣言と初期化

JavaScriptで配列を宣言して初期化するには、次の構文を使用します- 

var array_name;//declaration
array_name = [val1,val2,valn..]  //initialization
OR
var array_name = [val1,val2…valn]

注-[]のペアは、配列の次元と呼ばれます。

たとえば、次のような宣言： var numlist = [2,4,6,8] は、次の図に示すように配列を作成します。

配列の初期化

配列要素へのアクセス

添え字が後に続く配列名は、配列要素を参照するために使用されます。

以下は同じ構文です。 

array_name[subscript]

例：単純な配列

var alphas;
alphas = ["1","2","3","4"]
console.log(alphas[0]);
console.log(alphas[1]);

上記のコードが正常に実行されると、次の出力が表示されます。 

1
2

例：単一ステートメントの宣言と初期化

var nums = [1,2,3,3]
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);

上記のコードが正常に実行されると、次の出力が表示されます。 

1
2
3
3

配列オブジェクト

Arrayオブジェクトを使用して配列を作成することもできます。 配列コンストラクターとして渡すことができます-

  • 配列のサイズを表す数値または。 *コンマ区切り値のリスト。

次の例では、このメソッドを使用して配列を作成します。

例

var arr_names = new Array(4)
for(var i = 0;i<arr_names.length;i++) {
   arr_names[i] = i* 2
   console.log(arr_names[i])
}

上記のコードが正常に実行されると、次の出力が表示されます。 

0
2
4
6

例：配列コンストラクターはコンマ区切り値を受け入れます

var names = new Array("Mary","Tom","Jack","Jill")
for(var i = 0;i<names.length;i++) {
   console.log(names[i])
}

上記のコードが正常に実行されると、次の出力が表示されます。 

Mary
Tom
Jack
Jill

配列メソッド

以下は、Arrayオブジェクトのメソッドとその説明のリストです。

Sr.No Method & Description
1

concat()

この配列を他の配列や値と結合した新しい配列を返します

2

every()

この配列のすべての要素が提供されたテスト関数を満たす場合、trueを返します。

3

filter()

指定されたフィルタリング関数がtrueを返すこの配列のすべての要素を使用して、新しい配列を作成します。

4

forEach()

配列内の各要素に対して関数を呼び出します。

5

indexOf()

指定された値に等しい配列内の要素の最初の（最小の）インデックスを返します。見つからない場合は-1を返します。

6

join()

配列のすべての要素を文字列に結合します。

7

lastIndexOf()

指定された値に等しい配列内の要素の最後の（最大の）インデックスを返します。見つからない場合は-1を返します。

8

map()

この配列のすべての要素で提供された関数を呼び出した結果で新しい配列を作成します。

9

pop()

配列から最後の要素を削除し、その要素を返します。

10

push()

配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。

11

reduce()

配列の2つの値（左から右）に対して関数を同時に適用して、単一の値に減らします。

12

reduceRight()

配列の2つの値に対して（右から左に）関数を同時に適用して、単一の値に減らします。

13

reverse()

配列の要素の順序を逆にします-最初が最後になり、最後が最初になります。

14

shift()

配列から最初の要素を削除し、その要素のスライスを返します。

15

slice()

配列のセクションを抽出し、新しい配列を返します。

16

some()

この配列の少なくとも1つの要素が提供されたテスト関数を満たす場合、trueを返します。

17

toSource()

オブジェクトのソースコードを表します。

18

sort()

配列の要素を並べ替えます。

19

splice()

配列に要素を追加または削除します。

20

toString()

配列とその要素を表す文字列を返します。

21

unshift()

配列の前に1つ以上の要素を追加し、配列の新しい長さを返します。

ES6-配列メソッド

以下は、ES6で導入された新しい配列メソッドです。

Array.prototype.find

*find* を使用すると、配列を反復処理して、指定されたコールバック関数がtrueを返す最初の要素を取得できます。 要素が見つかると、関数はすぐに戻ります。 特定の条件に一致する最初のアイテムだけを取得する効率的な方法です。

例 

var numbers = [1, 2, 3];
var oddNumber = numbers.find((x) => x % 2 == 1);
console.log(oddNumber);//1

上記のコードが正常に実行されると、次の出力が表示されます。 

1

注意-ES5 * filter（）*とES6 * find（）*は同義ではありません。 Filterは常に一致の配列を返し（複数の一致を返す）、findは常に実際の要素を返します。

Array.prototype.findIndex

*findIndex* はfindと同様に動作しますが、一致した要素を返す代わりに、その要素のインデックスを返します。
var numbers = [1, 2, 3];
var oddNumber = numbers.findIndex((x) => x % 2 == 1);
console.log(oddNumber);//0

上記の例は、値1（0）のインデックスを出力として返します。

Array.prototype.entries

*entries* は、配列のキーと値をループするために使用できる配列イテレータを返す関数です。 エントリは配列の配列を返します。各子配列は[index、value]の配列です。
var numbers = [1, 2, 3];
var val = numbers.entries();
console.log(val.next().value);
console.log(val.next().value);
console.log(val.next().value);

上記のコードが正常に実行されると、次の出力が表示されます。 

[0,1]
[1.2]
[2,3]

または、スプレッド演算子を使用して、エントリの配列を一度に取得することもできます。 

var numbers = [1, 2, 3];
var val= numbers.entries();
console.log([...val]);

上記のコードが正常に実行されると、次の出力が表示されます。 

[[Array.from

*Array.from()* enables the creation of a new array from an array like object. The basic functionality of Array.from() is to convert two kinds of values to Arrays −

* Array-like values.
* Iterable values like Set and Map.

*Example*

[source,prettyprint,notranslate,tryit]

（Array.from（ 'hello'）のiを許可）{console.log（i）}に「strictを使用」 

The following output is displayed on successful execution of the above code.

[source,result,notranslate]

こんにちは

Array.prototype.keys()

This function returns the array indexes.

Example 

console.log（Array.from（['a'、 'b']。keys（）））

The following output is displayed on successful execution of the above code. 

[ 0, 1 ]

Array Traversal using for…in loop

One can use the for… in loop to traverse through an array. 

「厳密な使用」var nums = [1001,1002,1003,1004] for（let j in nums）{console.log（nums [j]）}

The loop performs an index-based array traversal. The following output is displayed on successful execution of the above code. 

1001 1002 1003 1004

Arrays in JavaScript

JavaScript supports the following concepts about Arrays −

Sr.No Concept & Description
1

Multi-dimensional arrays

JavaScript supports multidimensional arrays. The simplest form of the multidimensional array is the two-dimensional array

2

Passing arrays to functions

You can pass to the function a pointer to an array by specifying the array’s name without an index.

3

Return array from functions

Allows a function to return an array.

Array De-structuring

JavaScript supports de-structuring in the context of an array.

Example

var arr = [12,13] var [x、y] = arr console.log（x）console.log（y）

The following output is displayed on successful execution of the above code. 

12 13

ES6-日付

  • Dateオブジェクト*は、JavaScript言語に組み込まれたデータ型です。 日付オブジェクトは、次の構文に示すように、新しい* Date（）*で作成されます。

Dateオブジェクトが作成されると、いくつかのメソッドを使用して操作できます。 ほとんどのメソッドでは、ローカル時間またはUTC（ユニバーサル、またはGMT）時間を使用して、オブジェクトの年、月、日、時間、分、秒、ミリ秒のフィールドを取得および設定することができます。

ECMAScript標準では、1970年1月1日前後の1億日以内に、Dateオブジェクトが任意の日付と時刻をミリ秒の精度で表現できる必要があります。 これは、プラスマイナス273,785年の範囲なので、JavaScriptは275755年までの日付と時刻を表すことができます。

次の構文のいずれかを使用して、* Date（）コンストラクター*を使用してDateオブジェクトを作成できます。 

new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])

注意-括弧内のパラメーターは常にオプションです。

日付のプロパティ

以下に、Dateオブジェクトのプロパティとその説明のリストを示します。

Sr.No Property & Description
1

constructor

オブジェクトのプロトタイプを作成する関数を指定します

2

prototype

prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます

日付メソッド

以下は、さまざまな日付メソッドのリストと説明です。

Sr.No Method & Description
1

Date()

今日の日付と時刻を返します

2

getDate()

現地時間に従って、指定された日付の月の日を返します

3

getDay()

現地時間に従って、指定された日付の曜日を返します

4

getFullYear()

現地時間に従って指定された日付の年を返します

5

getHours()

現地時間に従って、指定された日付の時間を返します

6

getMilliseconds()

現地時間に従って、指定された日付のミリ秒を返します

7

getMinutes()

現地時間に従って、指定された日付の分を返します

8

getMonth()

現地時間に従って指定された日付の月を返します

9

getSeconds()

現地時間に従って、指定された日付の秒を返します

10

getTime()

1970年1月1日00:00:00 UTCからのミリ秒数として、指定された日付の数値を返します

11

getTimezoneOffset()

現在のロケールの時間帯オフセットを分単位で返します

12

getUTCDate()

世界時に基づき、指定された日付の月の日（日付）を返します

13

getUTCDay()

世界時に基づき、指定された日付の曜日を返します

14

getUTCFullYear()

世界時に基づき、指定された日付の年を返します

15

getutcHours()

世界時に基づき、指定された日付の時間を返します

16

getUTCMilliseconds()

世界時に基づき、指定された日付のミリ秒を返します

17

getUTCMinutes()

世界時に基づき、指定された日付の分を返します

18

getUTCMonth()

世界時に基づき、指定された日付の月を返します

19

getUTCSeconds()

世界時に基づき、指定された日付の秒を返します

20

setDate()

現地時間に従って、指定された日付の月の日を設定します

21

setFullYear()

現地時間に従って、指定された日付の通年を設定します

22

setHours()

現地時間に従って指定された日付の時間を設定します

23

setMilliseconds()

現地時間に従って、指定された日付のミリ秒を設定します

24

setMinutes()

現地時間に従って指定された日付の分を設定します

25

setMonth()

現地時間に従って指定された日付の月を設定します

26

setSeconds()

現地時間に従って指定された日付の秒を設定します

27

setTime()

Dateオブジェクトを、1970年1月1日00:00:00 UTCからのミリ秒数で表される時間に設定します

28

setUTCDate()

Dateオブジェクトを、1970年1月1日00:00:00 UTCからのミリ秒数で表される時間に設定します

29

setUTCFullYear()

世界時に基づき、指定された日付の通年を設定します

30

setUTCHours()

世界時に基づき、指定された日付の時間を設定します

31

setUTCMilliseconds()

世界時に基づき、指定された日付のミリ秒を設定します

32

setUTCMinutes()

世界時に基づき、指定された日付の分を設定します

33

setUTCMonth()

世界時に基づき、指定された日付の月を設定します

34

setUTCSeconds()

世界時に基づき、指定された日付の秒を設定します

35

todatestring()

日付の「日付」部分を人間が読める文字列として返します

36

toLocaleDateString()

現在のロケールの規則を使用して、日付の「日付」部分を文字列として返します

37

toLocaleString()

現在のロケールの規則を使用して、日付を文字列に変換します

38

toLocaleTimeString()

現在のロケールの規則を使用して、日付の「時刻」部分を文字列として返します

39

toString()

指定されたDateオブジェクトを表す文字列を返します

40

toTimeString()

日付の「時刻」部分を人間が読める文字列として返します

41

toUTCString()

世界時の規則を使用して、日付を文字列に変換します

42

valueOf()

Dateオブジェクトのプリミティブ値を返します

ES6-数学

mathオブジェクトは、数学定数と関数のプロパティとメソッドを提供します。 他のグローバルオブジェクトとは異なり、 Math はコンストラクタではありません。 Mathのすべてのプロパティとメソッドは静的であり、Mathを作成せずにオブジェクトとして使用して呼び出すことができます。

数学のプロパティ

以下は、すべてのMathプロパティとその説明のリストです。

Sr.No Property & Description
1

E

オイラー定数と自然対数の底、約2.718

2

LN2

2の自然対数、約0.693

3

LN10

10の自然対数、約2.302

4

LOG2E

Eの2を底とする対数、約1.442

5

LOG10E

Eの10を底とする対数、約0.434

6

PI

円の円周と直径の比、約3.14159

7

SQRT1_2

1/2の平方根。同様に、1は2の平方根に約0.707

8

SQRT2

2の平方根、約1.414

指数関数

基本的な指数関数は* Math.pow（）*であり、次の表に示すように、平方根、立方根、eのべき乗に便利な関数があります。

Sr.No Function & Description
1

Math.pow(x, y)

  • x* の累乗 *y* を返します
2

Math.sqrt(x)

数値の平方根を返します x

3

Math.cbrt(x)

このメソッドは、数値の立方根を返します x

4

Math.exp(x)

Math.pow（Math.E、x）と同等

5

Math.expm1(x)

Math.exp（x）– 1と同等

6

Math.hypot(x1, x2,…​)

引数の合計の平方根を返します

対数関数

基本的な自然対数関数は* Math.log（）*です。 JavaScriptでは、「ログ」は「自然対数」を意味します。便宜上、ES6はMath.log10を導入しました。

Sr.No Function & Description
1

Math.log(x)

  • x* の自然対数
2

Math.log10(x)

  • x* の10を底とする対数
3

Math.log2(x)

  • x* の底2の対数
4

Math.log1p(x)

  • 1 + x* の自然対数

その他の代数関数

以下は、その他の代数関数とその説明のリストです。

Sr.No Function & Description
1

Math.abs(x)

xの絶対値

2

Math.sign(x)

xの符号：xが負の場合、–1。 xが正の場合、1; xが0の場合、0

3

Math.ceil(x)

xの上限：x以上の最小整数

4

Math.floor(x)

xの下限：x以下の最大整数

5

Math.trunc(x)

xの整数部（小数部はすべて削除されます）

6

Math.round(x)

xを最も近い整数に丸めた

7

Math.min(x1, x2,…​)

最小引数を返します

8

Math.max((x1, x2,…​)

最小引数を返します

三角関数

Mathライブラリのすべての三角関数は、度ではなくラジアンで動作します。

Sr.No Function & Description
1

Math.sin(x)

xラジアンのサイン

2

Math.cos(x)

xラジアンのコサイン

3

Math.tan(x)

xラジアンの正接

4

Math.asin(x)

xの逆正弦（arcsin）（結果はラジアン）

5

Math.acos(x)

xの逆余弦（arccos）（結果はラジアン）

6

Math.atan(x)

xの逆正接（arctan）（結果はラジアン）

7

Math.atan2(y, x0)

x軸からポイント（x、y）までの反時計回りの角度（ラジアン単位）

Math.random（）

  • Math.random（）*関数は、0（包括的）から1（排他的）の間の擬似乱数を返します。

例：擬似乱数生成（PRNG）

var value1 = Math.random();
console.log("First Test Value : " + value1 );

var value2 = Math.random();
console.log("Second Test Value : " + value2 );

var value3 = Math.random();
console.log("Third Test Value : " + value3 );

var value4 = Math.random();
console.log("Fourth Test Value : " + value4 );

出力

First Test Value : 0.5782922627404332
Second Test Value : 0.5624510529451072
Third Test Value : 0.9336334094405174
Fourth Test Value : 0.4002739654388279

ES6-RegExp

正規表現は、文字のパターンを記述するオブジェクトです。 正規表現は、多くの場合「 regex 」または「 regexp 」と省略されます。

JavaScript RegExp クラスは正規表現を表し、StringとRegExpの両方は、正規表現を使用してテキストで強力なパターンマッチングおよび検索と置換機能を実行するメソッドを定義します。

正規表現は次のように定義できます- 

var pattern = new RegExp(pattern, attributes);
OR
var pattern =/pattern/attributes;

属性には、次の値の任意の組み合わせを指定できます。

Sr.No Attribute & Description
1

G

グローバルマッチ

2

I

ケースを無視

3

M

マルチライン;開始文字と終了文字（^および$）を複数行にわたって機能するものとして扱います（つまり、入力文字列全体の最初または最後だけでなく、各行の先頭または末尾に一致します（\ nまたは\ rで区切られます）。 ）

4

U

Unicode;パターンをUnicodeコードポイントのシーケンスとして扱う

5

Y

粘着性;ターゲット文字列内のこの正規表現のlastIndexプロパティで示されたインデックスからのみ一致します（以降のインデックスからは一致しません）

正規表現の構築

ブラケット

ブラケット（[]）は、正規表現のコンテキストで使用される場合、特別な意味を持ちます。 文字の範囲を見つけるために使用されます。

Sr.No Expression & Description
1

[…​]

大括弧の間の任意の1文字

2

[^…​]

大括弧の間にない任意の1文字

3

[0-9]

0〜9の任意の10進数と一致します

4

[a-z]

小文字 a から小文字 z までの任意の文字に一致します

5

[A-Z]

大文字の A から大文字のZまでの任意の文字に一致します

6

[a-Z]

小文字の a から大文字のZまでの任意の文字に一致します

上記の範囲は一般的なものです。また、範囲[0-3]を使用して0〜3の範囲の10進数を一致させることも、範囲[b-v]を使用してb〜vの範囲の小文字を一致させることもできます。

数量詞

括弧で囲まれた文字シーケンスと単一文字の頻度または位置は、特殊文字で示すことができます。 各特殊文字には特定の意味があります。 * +、、？、、および $ フラグはすべて文字シーケンスに従います。

Sr.No Expression & Description
1

p+

少なくとも1つの p を含む文字列に一致します。

2

p*

0個以上の p’s を含む任意の文字列に一致します

3

p?

1つ以上の p を含む任意の文字列に一致します

4

p{N}

  • N p's* のシーケンスを含む任意の文字列に一致します
5

p\{2,3}

2つまたは3つの p のシーケンスを含む任意の文字列に一致します

6

p\{2, }

少なくとも2つの p のシーケンスを含む任意の文字列に一致します

7

p$

末尾が p の文字列に一致します

8

^p

先頭が p の文字列に一致します

9

[^a-zA-Z]

  • a* から *z* および *A* から *Z* の範囲の文字を含まない文字列に一致します。
10

p.p

  • p* の後に任意の文字が続き、さらに別の *p* が続く文字列に一致します。
11

^.{2}$

正確に2文字を含む任意の文字列に一致します

12

<b>(.)</b>*

<b>および</b>で囲まれた任意の文字列に一致します

13

p(hp)*

  • p* の後に0個以上のシーケンス *hp* のインスタンスが続く文字列に一致します。

リテラル文字

Sr.No Character & Description
1

Alphanumeric

自体

2

\0

NULL文字（\ u0000）

3

\t

タブ（\ u0009）

4

\n

改行（\ u000A）

5

\v

垂直タブ（\ u000B）

6

\f

フォームフィード（\ u000C）

7

\r

キャリッジリターン（\ u000D）

8

\xnn

16進数 nn; で指定されるラテン文字。たとえば、\ x0Aは \ n と同じです。

9

\uxxxx

16進数 xxxx で指定されたUnicode文字。たとえば、\ u0009は \ t と同じです

10

\cX

制御文字^ X;たとえば、\ cJは改行文字 \ n と同等です

メタ文字

  • メタ文字*は、組み合わせに特別な意味を与えるように作用するバックスラッシュが前に付いた単純なアルファベット文字です。

たとえば、 '\ d' メタ文字を使用して多額のお金を検索できます：/（[\ d] +）000/。 ここで、 \ d は数字の文字列を検索します。

次の表に、PERLスタイルの正規表現で使用できるメタ文字のセットを示します。

Sr.No Character & Description
1

.

単一のキャラクター

2

\s

空白文字（スペース、タブ、改行）

3

\S

非空白文字

4

\d

数字（0-9）

5

\D

数字以外

6

\w

単語文字（a-z、A-Z、0-9、_）

7

\W

単語以外の文字

8

[\b]

リテラルバックスペース（特別な場合）

9

[aeiou]

指定されたセット内の単一の文字に一致します

10

[^aeiou]

指定されたセットの外側の1文字に一致します

11 *(foo
bar

baz)*

指定された選択肢のいずれかに一致

RegExpプロパティ

Sr.No Properties & Description
1

RegExp.prototype.flags

RegExpオブジェクトのフラグを含む文字列

2

RegExp.prototype.global

正規表現を文字列内の可能なすべての一致に対してテストするか、最初の一致に対してのみテストするか

3

RegExp.prototype.ignoreCase

文字列の一致を試みているときに大文字と小文字を無視するかどうか

4

RegExp.prototype.lastIndex

RegExpオブジェクトの読み取り/書き込みプロパティかどうか。

5

RegExp.prototype.multiline

複数行にわたって文字列を検索するかどうか

6

RegExp.prototype.source

パターンのテキスト

RegExpメソッド

Sr.No Method & Description
1

RegExp.prototype.exec()

文字列パラメーターで一致するものを検索します

2

RegExp.prototype.test()

文字列パラメーターの一致をテストします

3

RegExp.prototype.match()

指定された文字列との一致を実行し、一致結果を返します

4

RegExp.prototype.replace()

指定された文字列の一致を新しい部分文字列で置き換えます

5

RegExp.prototype.search()

指定された文字列で一致を検索し、文字列で見つかったパターンのインデックスを返します

6

RegExp.prototype.split()

文字列を部分文字列に分割することにより、指定された文字列を配列に分割します

7

RegExp.prototype.toString()

指定されたオブジェクトを表す文字列を返します。 theObject.prototype.toString（）メソッドをオーバーライドします

ES6-HTML DOM

すべてのWebページは、ブラウザウィンドウ内にあり、オブジェクトと見なすことができます。

  • ドキュメントオブジェクト*は、そのウィンドウに表示されるHTMLドキュメントを表します。 ドキュメントオブジェクトには、ドキュメントコンテンツへのアクセスと変更を許可する他のオブジェクトを参照するさまざまなプロパティがあります。

ドキュメントのコンテンツにアクセスして変更する方法は、ドキュメントオブジェクトモデル*または *DOM と呼ばれます。 オブジェクトは階層構造になっています。 この階層構造は、Webドキュメント内のオブジェクトの組織に適用されます。

以下は、いくつかの重要なオブジェクトの単純な階層です-

HTML DOM

いくつかのDOMが存在します。 以下のセクションでは、これらの各DOMを詳細に説明し、それらを使用してドキュメントコンテンツにアクセスして変更する方法を説明します。

  • *レガシーDOM *-これは、JavaScript言語の初期バージョンで導入されたモデルです。 すべてのブラウザで十分にサポートされていますが、フォーム、フォーム要素、画像など、ドキュメントの特定の重要な部分にのみアクセスできます。
  • The W3C DOM -このドキュメントオブジェクトモデルは、すべてのドキュメントコンテンツへのアクセスと変更を可能にし、World Wide Web Consortium（W3C）によって標準化されています。 このモデルは、ほとんどすべての最新ブラウザーでサポートされています。
  • IE4 DOM -このドキュメントオブジェクトモデルは、MicrosoftのInternet Explorerブラウザのバージョン4で導入されました。 IE 5以降のバージョンには、ほとんどの基本的なW3C DOM機能のサポートが含まれています。

レガシーDOM

これは、初期バージョンのJavaScript言語で導入されたモデルです。 すべてのブラウザで十分にサポートされていますが、フォーム、フォーム要素、画像など、ドキュメントの特定の重要な部分にのみアクセスできます。

このモデルは、タイトル、URL、lastModifiedなどのいくつかの読み取り専用プロパティを提供し、ドキュメント全体に関する情報を提供します。 それとは別に、ドキュメントのプロパティ値を設定および取得するために使用できるこのモデルによって提供されるさまざまなメソッドがあります。

レガシーDOMのドキュメントプロパティ

以下は、レガシーDOMを使用してアクセスできるドキュメントプロパティのリストです。

シニア

プロパティと説明

1 

*alinkColor*

非推奨-アクティブ化されたリンクの色を指定する文字列。

例：document.alinkColor

2

  • アンカー[] *

アンカーオブジェクトの配列。ドキュメントに表示されるアンカーごとに1つ。

例：document.anchors [0]、document.anchors [1]など

3 

*applets []*

アプレットオブジェクトの配列。ドキュメントに表示されるアプレットごとに1つ。

例：document.applets [0]、document.applets [1]など

4 

*bgColor*

非推奨-ドキュメントの背景色を指定する文字列。

例：document.bgColor

5

クッキー

このドキュメントに関連付けられたCookieを照会および設定できる特別な動作を持つ文字列値のプロパティ。

例：document.cookie

6

ドメイン

ドキュメントのインターネットドメインを指定する文字列。 セキュリティ目的で使用されます。

例：document.domain

7 

*embeds []*

<embed>タグを使用してドキュメントに埋め込まれたデータを表すオブジェクトの配列。 プラグインの同義語[]。 一部のプラグインとActiveXコントロールは、JavaScriptコードで制御できます。

例：document.embeds [0]、document.embeds [1]など

8 

*fgColor*

ドキュメントのデフォルトのテキスト色を指定する文字列。

例：document.fgColor

9

  • フォーム[] *

文書に表示される各HTMLフォームに1つずつあるフォームオブジェクトの配列。

例：document.forms [0]、document.forms [1]など

10

  • 画像[] *

フォームオブジェクトの配列。HTML<img>タグでドキュメントに表示される各HTMLフォームに1つ。

例：document.forms [0]、document.forms [1]など

11

最終更新日

ドキュメントへの最新の変更の日付を指定する読み取り専用の文字列。

例：document.lastModified

12 

*linkColor*

非推奨-未訪問リンクの色を指定する文字列。

例：document.linkColor

13

  • リンク[] *

これはドキュメントリンク配列です。

例：document.links [0]、document.links [1]など

14

ロケーション

ドキュメントのURL。 URLプロパティを支持して廃止されました。

例：document.location

15

  • プラグイン[] *

埋め込みの同義語[]

例：document.plugins [0]、document.plugins [1]など

16

参照者

現在のドキュメントのリンク元のドキュメントがある場合は、そのURLを含む読み取り専用の文字列。

例：document.referrer

17

タイトル

<title>タグのテキストコンテンツ。

例：document.title

18 

*URL*

ドキュメントのURLを指定する読み取り専用の文字列。

例：document.URL

19 

*vlinkColor*

非推奨-訪問したリンクの色を指定する文字列。

例：document.vlinkColor

レガシーDOMのドキュメントメソッド

以下は、レガシーDOMでサポートされるメソッドのリストです。

Sr.No Property & Description
1

clear( )

非推奨-ドキュメントの内容を消去し、何も返しません。

例：document.clear（）

2

close( )

open（）メソッドで開かれたドキュメントストリームを閉じ、何も返しません。

3

open( )

既存のドキュメントコンテンツを削除し、新しいドキュメントコンテンツが書き込まれる可能性のあるストリームを開きます。 何も返しません。

例：document.open（）

4

write( value, …​)

指定した文字列を現在解析中のドキュメントに挿入するか、open（）で開いたドキュメントに追加します。 何も返しません。

例：document.write（value、…​）

5

writeln( value, …​)

write（）と同じですが、出力に改行文字を追加します。 何も返しません。

例：document.writeln（value、…​）

HTML DOMを使用して、HTMLドキュメント内のHTML要素を見つけることができます。 たとえば、Webドキュメントにフォーム要素が含まれている場合、JavaScriptを使用して、それをdocument.forms [0]と呼ぶことができます。 Webドキュメントに2つのフォーム要素が含まれる場合、最初のフォームはdocument.forms [0]と呼ばれ、2番目のフォームはdocument.forms [1]と呼ばれます。

上記の階層とプロパティを使用して、document.forms [0] .elements [0]などを使用して最初のフォーム要素にアクセスできます。

例

以下は、レガシーDOMメソッドを使用してドキュメントプロパティにアクセスする例です。 

<html>
   <head>
      <title> Document Title </title>

      <script type = "text/javascript">
         <!--
            function myFunc() {
               var ret = document.title;
               alert("Document Title : " + ret );
               var ret = document.URL;
               alert("Document URL : " + ret );
               var ret = document.forms[0];
               alert("Document First Form : " + ret );
               var ret = document.forms[0].elements[1];
               alert("Second element : " + ret );
            }//
         -->
      </script>
   </head>

   <body>
      <h1 id = "title">This is main title</h1>
      <p>Click the following to see the result:</p>

      <form name = "FirstForm">
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
         <input type = "button" value = "Cancel">
      </form>

      <form name = "SecondForm">
         <input type = "button" value = "Don't ClickMe"/>
      </form>
   </body>

</html>

出力

上記のコードが正常に実行されると、次の出力が表示されます。

レガシーdomメソッド

注-この例は、フォームと要素のオブジェクトを返します。 このチュートリアルでは説明していないオブジェクトプロパティを使用して、それらの値にアクセスする必要があります。

ES6-イテレーター

イテレーターの紹介

イテレータは、オブジェクトのコレクションに一度に1つずつアクセスできるようにするオブジェクトです。

次の組み込み型はデフォルトで反復可能です-

  • ひも
  • アレイ
  • Map
  • Set

キーが [Symbol.iterator] である関数を実装し、イテレーターを返す場合、オブジェクトは*反復可能*と見なされます。 for …​ ofループを使用して、コレクションを反復できます。

例

次の例では、 for..of ループを使用して、配列を宣言し、マークを付けて繰り返し処理します。 

<script>
   let marks = [10,20,30]
  //check iterable using for..of
   for(let m of marks){
      console.log(m);
   }
</script>

上記のコードの出力は以下のようになります- 

10
20
30

例

次の例では、配列を宣言し、イテレータオブジェクトをマークして取得します。 * [Symbol.iterator]（）を使用して、イテレーターオブジェクトを取得できます。 イテレータのnext（）メソッドは、 *'value' および 'done' プロパティを持つオブジェクトを返します。 'done’はブール値であり、コレクション内のすべてのアイテムを読み取った後にtrueを返します。 

<script>
   let marks = [10,20,30]
   let iter = marks[Symbol.iterator]();
   console.log(iter.next())
   console.log(iter.next())
   console.log(iter.next())
   console.log(iter.next())
</script>

上記のコードの出力は以下のようになります- 

{value: 10, done: false}
{value: 20, done: false}
{value: 30, done: false}
{value: undefined, done: true}

カスタム反復可能

JavaScriptの特定のタイプは反復可能です（例： 配列、マップなど）が他の場合はありません（例： クラス）。 デフォルトで反復可能でないJavaScriptタイプは、反復可能プロトコルを使用して反復できます。

次の例では、複数の顧客オブジェクトを配列として格納する CustomerList という名前のクラスを定義しています。 各顧客オブジェクトには、firstNameプロパティとlastNameプロパティがあります。

このクラスを反復可能にするには、クラスが* [Symbol.iterator]（）関数を実装する必要があります。 この関数は、反復子オブジェクトを返します。 イテレータオブジェクトには、オブジェクト *\ {value： 'customer'、done：true/false} を返す関数 next があります。 

<script>
  //user defined iterable
   class CustomerList {
      constructor(customers){
        //adding customer objects to an array
         this.customers = [].concat(customers)
      }
     //implement iterator function
      [Symbol.iterator](){
         let count=0;
         let customers = this.customers
         return {
            next:function(){
           //retrieving a customer object from the array
               let customerVal = customers[count];
               count+=1;
               if(count<=customers.length){
                  return {
                     value:customerVal,
                     done:false
                  }
               }
              //return true if all customer objects are iterated
               return {done:true}
            }
         }
      }
   }
  //create customer objects
   let c1={
      firstName:'Sachin',
      lastName:'Tendulkar'
   }
   let c2={
      firstName:'Rahul',
      lastName:'Dravid'
   }
  //define a customer array and initialize it let customers=[c1,c2]
  //pass customers to the class' constructor
   let customersObj = new CustomerList(customers);
  //iterating using for..of
   for(let c of customersObj){
      console.log(c)
   }
  //iterating using the next() method
   let iter = customersObj[Symbol.iterator]();
   console.log(iter.next())
   console.log(iter.next())
   console.log(iter.next())
</script>

上記のコードの出力は次のようになります- 

{firstName: "Sachin", lastName: "Tendulkar"}
{firstName: "Rahul", lastName: "Dravid"}
{
   done: false
   value: {
      firstName: "Sachin",
      lastName: "Tendulkar"
   }
}
{
   done: false
   value: {
      firstName: "Rahul",
      lastName: "Dravid"
   }
}
{done: true}

ジェネレータ

ES6より前は、JavaScriptの関数は実行完了モデルに従っていました。 ES6には、途中で停止し、停止したところから続行できるジェネレーターと呼ばれる機能が導入されています。

ジェネレーターは、関数名の前にアスタリスク*文字を付け、1つ以上の yield ステートメントを含みます。 yield キーワードはイテレーターオブジェクトを返します。

構文

function * generator_name() {
   yield value1
   ...
   yield valueN
}

例

この例では、3つのyieldステートメントでジェネレーター関数 getMarks を定義しています。 通常の関数とは異なり、* generator関数getMarks（）*は、呼び出されても関数を実行しませんが、ジェネレーター関数内のコードの実行に役立つイテレーターオブジェクトを返します。

  • markIter.next（）の最初の呼び出しで、最初の操作が実行され、yieldステートメントがジェネレーターの実行を一時停止します。 * markIter.next（）*への後続の呼び出しは、次の *yield 式までジェネレーター関数を再開します。
<script>
  //define generator function
   function * getMarks(){
      console.log("Step 1")
      yield 10
      console.log("Step 2")
      yield 20
      console.log("Step 3")
      yield 30
      console.log("End of function")
   }
  //return an iterator object
      let markIter = getMarks()
  //invoke statements until first yield
      console.log(markIter.next())
  //resume execution after the last yield until second yield expression
      console.log(markIter.next())
  //resume execution after last yield until third yield expression
      console.log(markIter.next())
      console.log(markIter.next())//iteration is completed;no value is returned
</script>

上記のコードの出力は以下のようになります- 

Step 1
{value: 10, done: false}
Step 2
{value: 20, done: false}
Step 3
{value: 30, done: false}
End of function
{value: undefined, done: true}

例

次の例では、

  • evenNumberGeneratorジェネレーター関数。

以下に示すように、* next（）または *for of ループを使用して、すべての偶数を反復処理できます。 

<script>
   function * evenNumberGenerator(){
      let num = 0;
      while(true){
         num+=2
         yield num
      }
   }
  //display first two elements
   let iter = evenNumberGenerator();
   console.log(iter.next())
   console.log(iter.next())
  //using for of to iterate till 12
   for(let n of evenNumberGenerator()){
      if(n==12)break;
      console.log(n);
   }
</script>

上記のコードの出力は次のようになります- 

{value: 2, done: false}
{value: 4, done: false}
2
4
6
8
10

ES6-コレクション

ES6では、マップとセットという2つの新しいデータ構造が導入されています。

  • マップ-このデータ構造により、キーを値にマッピングできます。
  • セット-セットは配列に似ています。 ただし、セットは重複を推奨しません。

Maps

Mapオブジェクトは、単純なキー/値のペアです。 マップ内のキーと値は、プリミティブまたはオブジェクトの場合があります。

以下は同じ構文です。 

new Map([iterable])

パラメータiterableは、要素がキー/値のペアで構成される反復可能なオブジェクトを表します。 マップは順序付けられています。 挿入順に要素を走査します。

地図のプロパティ

Sr.No Property & Description
1

Map.prototype.size

このプロパティは、Mapオブジェクトのキー/値ペアの数を返します。

基本的なマップ操作を理解する

set（）関数は、Mapオブジェクトのキーの値を設定します。 set（）関数は、キーとその値という2つのパラメーターを取ります。 この関数は、Mapオブジェクトを返します。

has（）関数は、指定されたキーがMapオブジェクトで見つかったかどうかを示すブール値を返します。 この関数はパラメーターとしてキーを取ります。 

var map = new Map();
map.set('name','Tutorial Point');
map.get('name');//Tutorial point

上記の例は、マップオブジェクトを作成します。 マップには要素が1つしかありません。 要素キーは name で示されます。 キーは値 Tutorial point にマップされます。

注-マップは類似した値を区別しますが、データ型は異なります。 つまり、*整数キー1 *は*文字列キー「1」*とは異なると見なされます。 この概念をよりよく理解するには、次の例を検討してください 

var map = new Map();
map.set(1,true);
console.log(map.has("1"));//false
map.set("1",true);
console.log(map.has("1"));//true

出力

false
true
  • set（）*メソッドもチェーン可能です。 次の例を考えてください。
var roles = new Map();
roles.set('r1', 'User')
.set('r2', 'Guest')
.set('r3', 'Admin');
console.log(roles.has('r1'))

出力

True

上記の例では、マップオブジェクトを定義しています。 この例では、set（）関数をチェーンしてキー/値のペアを定義します。

  • get（）*関数は、指定されたキーに対応する値を取得するために使用されます。

Mapコンストラクターには配列を渡すこともできます。 さらに、マップは、配列を表すためのスプレッド演算子の使用もサポートしています。

例

var roles = new Map([
   ['r1', 'User'],
   ['r2', 'Guest'],
   ['r3', 'Admin'],
]);
console.log(roles.get('r2'))

上記のコードが正常に実行されると、次の出力が表示されます。 

Guest

注-指定されたキーがマップに存在しない場合、get（）関数はundefinedを返します。

キーがマップに既に存在する場合、set（）はキーの値を置き換えます。 次の例を考えてください。 

var roles = new Map([
   ['r1', 'User'],
   ['r2', 'Guest'],
   ['r3', 'Admin'],
]);
console.log(`value of key r1 before set(): ${roles.get('r1')}`)
roles.set('r1','superUser')
console.log(`value of key r1 after set(): ${roles.get('r1')}`)

上記のコードが正常に実行されると、次の出力が表示されます。 

value of key r1 before set(): User
value of key r1 after set(): superUser

マップ方法

Sr.No Method & Description
1

Map.prototype.clear()

Mapオブジェクトからすべてのキー/値のペアを削除します。

2

Map.prototype.delete(key)

キーに関連付けられている値を削除し、Map.prototype.has（key）が以前に返した値を返します。

Map.prototype.has（key）はその後falseを返します。

3

Map.prototype.entries()

挿入順序でMapオブジェクトの各要素の* [キー、値]の配列を含む新しいIteratorオブジェクトを返します。

4

Map.prototype.forEach(callbackFn[, thisArg)]

Mapオブジェクトに存在する各キーと値のペアに対して、挿入順に callbackFn を1回呼び出します。 thisErgパラメータがforEachに提供される場合、各コールバックの「this」値として使用されます。

5

Map.prototype.keys()

Mapオブジェクトの各要素の keys を挿入順序で含む新しいIteratorオブジェクトを返します。

6

Map.prototype.values()

挿入順序でMapオブジェクトの各要素の* [キー、値]の配列を含む新しいIteratorオブジェクトを返します。

for…ofループ

次の例は、for…ofループを使用してマップを走査する方法を示しています。 

'use strict'
var roles = new Map([
   ['r1', 'User'],
   ['r2', 'Guest'],
   ['r3', 'Admin'],
]);
for(let r of roles.entries())
console.log(`${r[0]}: ${r[1]}`);

上記のコードが正常に実行されると、次の出力が表示されます。 

r1: User
r2: Guest
r3: Admin

弱いマップ

弱いマップは、次の例外を除いてマップと同一です-

  • そのキーはオブジェクトでなければなりません。 弱いマップのキーはガベージコレクションできます。 ごみ収集*は、プログラム内の参照されていないオブジェクトが占有しているメモリをクリアするプロセスです。
  • 弱いマップは反復またはクリアできません。

例：弱いマップ

'use strict'
let weakMap = new WeakMap();
let obj = {};
console.log(weakMap.set(obj,"hello"));
console.log(weakMap.has(obj));//true

上記のコードが正常に実行されると、次の出力が表示されます。 

WeakMap {}
true

Sets

セットはES6データ構造です。 重複を含むことができないことを除いて、配列に似ています。 つまり、一意の値を保存できます。 セットは、プリミティブ値とオブジェクト参照の両方をサポートします。

マップと同様に、セットも注文されます。 要素は挿入順に繰り返されます。 セットは、次の構文を使用して初期化できます。

プロパティを設定する

Sr.No Property & Description
1

Set.prototype.size

Setオブジェクトの値の数を返します。

セットメソッド

Sr.No Method & Description
1

Set.prototype.add(value)

指定された値を持つ新しい要素をSetオブジェクトに追加します。 Setオブジェクトを返します。

2

Set.prototype.clear()

Setオブジェクトからすべての要素を削除します。

3

Set.prototype.delete(value)

値に関連付けられている要素を削除します。

4

Set.prototype.entries()

Setオブジェクトの各要素の*配列[*、value]を含む新しいIteratorオブジェクトを挿入順に返します。 これはMapオブジェクトと同様に保たれるため、各エントリのキーと値は同じ値になります。

5

Set.prototype.forEach(callbackFn[, thisArg)]

Setオブジェクトに存在する値ごとに、挿入順に callbackFn を1回呼び出します。 athisArg パラメーターがforEachに提供される場合、各コールバックの「this」値として使用されます。

6

Set.prototype.has(value)

Setオブジェクトに指定された値を持つ要素が存在するかどうかをアサートするブール値を返します。

7

Set.prototype.values()

Setオブジェクトの各要素の*値*を挿入順に含む新しいIteratorオブジェクトを返します。

弱いセット

弱いセットにはオブジェクトのみを含めることができ、含まれるオブジェクトはガベージコレクションされる場合があります。 弱いマップのように、弱いセットは反復できません。

例：弱いセットの使用

'use strict'
   let weakSet = new WeakSet();
   let obj = {msg:"hello"};
   weakSet.add(obj);
   console.log(weakSet.has(obj));
   weakSet.delete(obj);
   console.log(weakSet.has(obj));

上記のコードが正常に実行されると、次の出力が表示されます。 

true
false

イテレータ

イテレータは、オブジェクトのコレクションに一度に1つずつアクセスできるオブジェクトです。 setとmapの両方に、反復子を返すメソッドがあります。

イテレータは、* next（）メソッドを持つオブジェクトです。 next（）メソッドが呼び出されると、 *'value' および 'done' プロパティを持つオブジェクトを返します。 'done’はブール値で、コレクション内のすべてのアイテムを読み取った後にtrueを返します

例1：セットとイテレーター

var  set = new Set(['a','b','c','d','e']);
var iterator = set.entries();
console.log(iterator.next())

上記のコードが正常に実行されると、次の出力が表示されます。 

{ value: [ 'a', 'a' ], done: false }

セットにはキー/値が格納されないため、値配列には同様のキーと値が含まれます。 読み込む要素がさらにあるため、doneはfalseになります。

例2：セットとイテレーター

var  set = new Set(['a','b','c','d','e']);
var iterator = set.values();
console.log(iterator.next());

上記のコードが正常に実行されると、次の出力が表示されます。 

{ value: 'a', done: false }

例3：セットとイテレーター

var  set = new Set(['a','b','c','d','e']);
var iterator = set.keys();
console.log(iterator.next());

上記のコードが正常に実行されると、次の出力が表示されます。 

{ value: 'a', done: false }

例4：マップとイテレーター

var map = new Map([[one'],[2,'two'],[3,'three']]);
var iterator = map.entries();
console.log(iterator.next());

上記のコードが正常に実行されると、次の出力が表示されます。 

{ value: [ 1, 'one' ], done: false }

例5：マップとイテレーター

var map = new Map([[one'],[2,'two'],[3,'three']]);
var iterator = map.values();
console.log(iterator.next());

上記のコードが正常に実行されると、次の出力が表示されます。 

{value: "one", done: false}

例6：マップとイテレーター

var map = new Map([[one'],[2,'two'],[3,'three']]);
var iterator = map.keys();
console.log(iterator.next());

上記のコードが正常に実行されると、次の出力が表示されます。 

{value: 1, done: false}

ES6-クラス

オブジェクト指向*は、実世界のモデリングに従うソフトウェア開発パラダイムです。 オブジェクト指向では、プログラムを *methods と呼ばれるメカニズムを介して互いに通信するオブジェクトのコレクションと見なします。 ES6は、これらのオブジェクト指向コンポーネントもサポートしています。

オブジェクト指向プログラミングの概念

まず、理解してみましょう

  • オブジェクト-オブジェクトは、エンティティのリアルタイム表現です。 Grady Broochによると、すべてのオブジェクトは3つの特徴を持っていると言われています-
  • 状態-オブジェクトの属性によって記述されます。
  • 動作-オブジェクトの動作方法を説明します。
  • Identity -オブジェクトを類似のそのようなオブジェクトのセットから区別する一意の値。
  • クラス-OOPの観点でのクラスは、オブジェクトを作成するための青写真です。 クラスは、オブジェクトのデータをカプセル化します。
  • メソッド-メソッドはオブジェクト間の通信を容易にします。

これらのオブジェクト指向の概念を現実の概念に翻訳しましょう。 例：車は、データ（メーカー、モデル、ドアの数、車両番号など）と機能（加速、シフト、ドアを開く、ヘッドライトをオンにするなど）を持つオブジェクトです。

ES6より前は、クラスを作成するのは面倒でした。 クラスは、ES6のclassキーワードを使用して作成できます。

クラスを宣言するか、クラス式を使用して、クラスをコードに含めることができます。

構文：クラスの宣言

class Class_name {
}

構文：クラス式

var var_name = new Class_name {
}

classキーワードの後に​​クラス名が続きます。 クラスに名前を付けるときは、識別子のルール（既に説明した）を考慮する必要があります。

クラス定義には、次のものを含めることができます-

  • コンストラクタ-クラスのオブジェクトにメモリを割り当てる責任があります。
  • 関数-関数はオブジェクトが実行できるアクションを表します。 また、メソッドと呼ばれることもあります。

これらのコンポーネントをまとめて、クラスのデータメンバーと呼びます。

注-クラス本体にはメソッドのみを含めることができますが、データプロパティは含めることができません。

例：クラスの宣言

class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

例：クラス式

var Polygon = class {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

上記のコードスニペットは、名前のないクラス式を表しています。 名前付きクラス式は次のように記述できます。 

var Polygon = class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

注意-変数や関数とは異なり、クラスを持ち上げることはできません。

オブジェクトを作成する

クラスのインスタンスを作成するには、newキーワードの後に​​クラス名を使用します。 以下は同じ構文です。 

var object_name= new class_name([ arguments ])

どこで、

  • 新しいキーワードはインスタンス化を担当します。
  • 式の右側は、コンストラクターを呼び出します。 パラメーター化されている場合、コンストラクターに値を渡す必要があります。

例：クラスのインスタンス化

var obj = new Polygon(10,12)

機能へのアクセス

クラスの属性と機能は、オブジェクトを介してアクセスできます。 クラスのデータメンバーにアクセスするには、「。」*ドット表記法（ピリオドと呼ばれる）を使用します。 

//accessing a function
obj.function_name()

例：それらをまとめる

'use strict'
class Polygon {
   constructor(height, width) {
      this.h = height;
      this.w = width;
   }
   test() {
      console.log("The height of the polygon: ", this.h)
      console.log("The width of the polygon: ",this. w)
   }
}

//creating an instance
var polyObj = new Polygon(10,20);
polyObj.test();

上記の例では、クラス「Polygon」を宣言しています。 クラスのコンストラクターは、それぞれ高さと幅の2つの引数を取ります。 「this」*キーワードは、クラスの現在のインスタンスを指します。 つまり、上記のコンストラクターは、コンストラクターに渡されたパラメーター値で2つの変数hとwを初期化します。 クラスの test（）*関数は、高さと幅の値を出力します。

スクリプトを機能させるために、Polygonクラスのオブジェクトが作成されます。 オブジェクトは polyObj 変数によって参照されます。 次に、このオブジェクトを介して関数が呼び出されます。

上記のコードが正常に実行されると、次の出力が表示されます。 

The height of the polygon:  10
The width of the polygon:  20

静的キーワード

staticキーワードは、クラス内の関数に適用できます。 静的メンバーはクラス名によって参照されます。

例

'use strict'
class StaticMem {
   static disp() {
      console.log("Static Function called")
   }
}
StaticMem.disp()//invoke the static metho

注意-コンストラクター定義を含めることは必須ではありません。 デフォルトでは、すべてのクラスにデフォルトでコンストラクターがあります。

上記のコードが正常に実行されると、次の出力が表示されます。 

Static Function called

instanceof演算子

オブジェクトが指定されたタイプに属する場合、instanceof演算子はtrueを返します。

例

'use strict'
class Person{ }
var obj = new Person()
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

上記のコードが正常に実行されると、次の出力が表示されます。 

obj is an instance of Person True

クラスの継承

ES6は*継承*の概念をサポートしています。 継承とは、既存のエンティティ（ここではクラス）から新しいエンティティを作成するプログラムの機能です。 新しいクラスを作成するために拡張されたクラスは、親クラス/スーパークラス*と呼ばれます。 新しく作成されたクラスは child/subクラス*と呼ばれます。

クラスは、「extends」キーワードを使用して別のクラスから継承します。 子クラスは、親クラスのコンストラクターを除くすべてのプロパティとメソッドを継承します。

以下は同じ構文です。 

class child_class_name extends parent_class_name

例：クラスの継承

'use strict'
class Shape {
   constructor(a) {
      this.Area = a
   }
}
class Circle extends Shape {
   disp() {
      console.log("Area of the circle:  "+this.Area)
   }
}
var obj = new Circle(223);
obj.disp()

上記の例では、クラスShapeを宣言しています。 クラスはCircleクラスによって拡張されます。 クラス、つまり子クラスの間には継承関係があるため、クラスCircleは親クラス属性、つまりareaへの暗黙的なアクセスを取得します。

上記のコードが正常に実行されると、次の出力が表示されます。 

Area of Circle: 223

継承は次のように分類できます-

  • Single -すべてのクラスは、1つの親クラスから最大で拡張できます。
  • Multiple -クラスは複数のクラスから継承できます。 ES6は多重継承をサポートしていません。
  • マルチレベル-次の例を検討してください。
'use strict'
class Root {
   test() {
      console.log("call from parent class")
   }
}
class Child extends Root {}
class Leaf extends Child

//indirectly inherits from Root by virtue of inheritance {}
var obj = new Leaf();
obj.test()

クラスLeafは、マルチレベルの継承により、RootクラスとChildクラスから属性を派生します。

上記のコードが正常に実行されると、次の出力が表示されます。 

call from parent class

クラスの継承とメソッドのオーバーライド

  • メソッドのオーバーライド*は、子クラスがスーパークラスメソッドを再定義するメカニズムです。 次の例は同じことを示しています-
'use strict' ;
class PrinterClass {
   doPrint() {
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass {
   doPrint() {
      console.log("doPrint() is printing a string…");
   }
}
var obj = new StringPrinter();
obj.doPrint();

上記の例では、子クラスがスーパークラス関数の実装を変更しています。

上記のコードが正常に実行されると、次の出力が表示されます。 

doPrint() is printing a string…

スーパーキーワード

ES6では、子クラスが親クラスのデータメンバーを呼び出すことができます。 これは、 super キーワードを使用して実現されます。 superキーワードは、クラスの直接の親を参照するために使用されます。

次の例を考慮してください- 

'use strict'
class PrinterClass {
   doPrint() {
      console.log("doPrint() from Parent called…")
   }
}
class StringPrinter extends PrinterClass {
   doPrint() {
      super.doPrint()
      console.log("doPrint() is printing a string…")
   }
}
var obj = new StringPrinter()
obj.doPrint()

クラスStringWriterの* doPrint（）*再定義は、親クラスバージョンへの呼び出しを発行します。 つまり、superキーワードを使用して、親クラスであるPrinterClassのdoPrint（）関数定義を呼び出します。

上記のコードが正常に実行されると、次の出力が表示されます。 

doPrint() from Parent called.
doPrint() is printing a string.

ES6-マップとセット

ES6では、 maps と sets という2つの新しいデータ構造が導入されています。 それらについて詳しく学びましょう。

Maps

マップは、*キーと値のペア*の順序付けられたコレクションです。 マップはオブジェクトに似ています。 ただし、マップとオブジェクトの間にはいくつかの違いがあります。 これらは以下にリストされています-

Sr.No Object Map
1 Keys cannot be Object type Keys can be any type
2 Keys are not ordered Keys are ordered
3 not iterable iterable

構文

マップの構文は以下のとおりです- 

let map = new Map([iterable])
let map = new Map()

例

次の例は、反復可能なコンストラクタを使用してマップを作成します- 

<script>
   let andy = {ename:"Andrel"},
      varun = {ename:"Varun"},
      prijin = {ename:"Prijin"}
   let empJobs = new Map([
   [andy,'Software Architect'],
   [varun,'Developer']]
   );
   console.log(empJobs)
</script>

上記のコードの出力は以下のとおりです- 

{{…} => "Software Architect", {…} => "Developer"}

=

地図のサイズを確認する

sizeプロパティを使用して、マップに格納される値の数を決定できます。

構文

マップのサイズをチェックするための構文は以下に与えられています- 

map_name.size

例

<script>
   let daysMap = new Map();
   daysMap.set('1', 'Monday');
   daysMap.set('2', 'Tuesday');
   daysMap.set('3', 'Wednesday');
   console.log(daysMap.size);
</script>

上記のコードの出力は以下のとおりです- 

3

以下は、マップを操作するために使用できるいくつかの一般的な方法です-

Sr.No Object & Map
1

set(key,value)

キーと値をマップに追加します

2

get(key)

キーが一致した場合に値を返します

3

has(key)

指定されたキーを持つ要素が存在する場合はtrueを返します。それ以外の場合はfalseを返します

4

keys()

マップオブジェクトの各要素のキーを含むイテレータを返します

5

values()

マップオブジェクトの各要素の値を含むイテレータを返します

6

entries()

マップ内の各要素のキーと値のペアを含むイテレータを返します

7

delete(key)

指定された要素をMapオブジェクトから削除します

WeakMap

WeakMapは小さな*マップのサブセット*です。 キーは弱く参照されるため、非プリミティブのみにすることができます。 オブジェクトキーへの参照がない場合、ガベージコレクションの対象になります。

  • 反復不可能
  • すべてのキーはオブジェクトタイプです

WeakMapは、キーに参照がない場合、ガベージコレクションを許可します。

構文

WeakMapの構文は以下に記載されています- 

new WeakMap([iterable])

例1

<script>
   let emp = new WeakMap();
   emp.set(10,'Sachin');//TypeError as keys should be object
</script>

例2

<script>
   let empMap = new WeakMap();
  //emp.set(10,'Sachin');//Error as keys should be object
   let e1= {ename:'Kiran'},
      e2 = {ename:'Kannan'},
      e3 = {ename:'Mohtashim'}

   empMap.set(e1,1001);
   empMap.set(e2,1002);
   empMap.set(e3,1003);

   console.log(empMap)
   console.log(empMap.get(e2))
   console.log(empMap.has(e2))
   empMap.delete(e1)
   console.log(empMap)
</script>

上記のコードの出力は以下のとおりです- 

{{…} => 1002, {…} => 1003, {…} => 1001}
1002
true
{{…} => 1002, {…} => 1003}

Set

セットは、一意の値の順不同のコレクションです。 このデータ構造には、プリミティブ型とオブジェクト型の値を含めることができます。

構文

セットの構文は以下のとおりです- 

new Set([iterable])
new Set()

例

<script>
   let names = new Set(['A','B','C','D']);
   console.log(names)
</script>

上記のコードの出力は以下のとおりです- 

{"A", "B", "C", "D"}

セットのサイズを確認する

Setオブジェクトのsizeプロパティを使用して、Set内の要素の数を照会できます。

構文

セットのサイズをチェックするための構文は以下に記載されています- 

set.size

例

<script>
   let names = new Set(['A','B','C','D']);
   console.log(names.size)
</script>

上記のコードの出力は以下のとおりです- 

4

セットの反復

*forEach* および *for..of* ループを使用して、セットを反復処理できます。 これは以下の例に示されています-

例

<script>
   let names= new Set(['A','B','C','D']);
  //iterate using forEach
   console.log('forEach')
   names.forEach(n=>console.log(n))

   console.log('for of..')

  //iterate using for..of
   for(let n of names){
      console.log(n)
   }
</script>

上記のコードの出力は以下のとおりです- 

forEach
A
B
C
D
for of..
A
B
C
D

次のメソッドは、セットを操作するために使用できます-

Sr.No Object & Map
1

add(element)

セットに要素を追加します

2

has(element)

要素が見つかった場合はtrueを返します。それ以外の場合はfalseを返します

3

delete(element)

セットから特定の要素を削除する

4

clear()

セットからすべての要素をクリアします

弱いセット

Weaksetはオブジェクトを弱く保持します。つまり、WeakSetに格納されているオブジェクトは、参照されていない場合、ガベージコレクションの対象になります。 WeakSetは反復可能ではなく、 get メソッドがありません。 

<script>

   let e1 = {ename:'A'}
   let e2 ={ename:'B'}
   let e3 ={ename:'C'}

   let emps = new WeakSet();
   emps.add(e1);
   emps.add(e2)
   .add(e3);

   console.log(emps)
   console.log(emps.has(e1))
   emps.delete(e1);
   console.log(emps)
</script>

上記のコードの出力は以下のようになります- 

WeakSet {{…}, {…}, {…}}
true
WeakSet {{…}, {…}}

ES6-約束

約束の構文

*p* はpromiseオブジェクト、 *resolve* はpromiseが正常に実行されたときに呼び出す必要がある関数、 *reject* はpromiseがエラーに遭遇したときに呼び出す必要がある関数です。 。
let p = new Promise(function(resolve,reject){
   let workDone = true;//some time consuming work
      if(workDone){
     //invoke resolve function passed

      resolve('success promise completed')
   }
   else{
      reject('ERROR , work could not be completed')
   }
})

例

以下の例は、2つの数値を非同期的に加算する関数* add_positivenos_async（）*を示しています。 正の値が渡されると、約束は解決されます。 負の値が渡されると、約束は拒否されます。 

<script>
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
           //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
         })
         return p;
   }

   add_positivenos_async(10, 20)
      .then(successHandler)//if promise resolved
      .catch(errorHandler);//if promise rejected

   add_positivenos_async(-10, -20)
      .then(successHandler)//if promise resolved
      .catch(errorHandler);//if promise rejected

   function errorHandler(err) {
      console.log('Handling error', err)
   }
   function successHandler(result) {
      console.log('Handling success', result)
   }

   console.log('end')
</script>

上記のコードの出力は以下のようになります- 

end
Handling success 30
Handling error NOT_Postive_Number_Passed

約束の連鎖

  • Promiseチェーニング*は、一連の*非同期タスク*を次々に実行するときに使用できます。 約束が別の約束の結果に依存する場合、約束は連鎖します。 これは以下の例に示されています

例

以下の例では、* add_positivenos_async（）関数*は2つの数値を非同期的に加算し、負の値が渡された場合は拒否します。 現在の非同期関数呼び出しの結果は、後続の関数呼び出しにパラメーターとして渡されます。 各* then（）*メソッドにはreturnステートメントがあることに注意してください。 

<script>
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
           //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })
      return p;
   }

   add_positivenos_async(10,20)
   .then(function(result){
      console.log("first result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
   console.log("second result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
      console.log("third result",result)
   })

   console.log('end')
</script>

上記のコードの出力は以下のようになります- 

end
first result 30
second result 60
third result 120

promiseオブジェクトのいくつかの一般的に使用されるメソッドについて、以下で詳しく説明します-

promise.all（）

このメソッドは、複数のpromiseの結果を集約するのに役立ちます。

構文

  • promise.all（）メソッドの構文を以下に示します。ここで、 *iterable は反復可能なオブジェクトです。 E.g. アレイ。
Promise.all(iterable);

例

以下の例では、非同期操作の配列を実行します [add_positivenos_async（10,20）、add_positivenos_async（30,40）、add_positivenos_async（50,60）] 。 すべての操作が完了すると、約束は完全に解決されます。 

<script>
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
           //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }
  //Promise.all(iterable)

Promise.all([add_positivenos_async(10,20),add_positivenos_async(30,40),add_positivenos_async(50,60)])
   .then(function(resolveValue){
      console.log(resolveValue[0])
      console.log(resolveValue[1])
      console.log(resolveValue[2])
      console.log('all add operations done')
   })
   .catch(function(err){
      console.log('Error',err)
   })
   console.log('end')
</script>

上記のコードの出力は次のようになります- 

end
30
70
110
all add operations done

promise.race（）

この関数は、約束の配列を取り、解決された最初の約束を返します。

構文

  • promise.race（）*関数の構文を以下に示します。ここで、iterableは反復可能なオブジェクトです。 E.g. アレイ。
Promise.race(iterable)

例

以下の例では、非同期操作の配列 [add_positivenos_async（10,20）、add_positivenos_async（30,40）] を使用しています。

追加操作のいずれかが完了するたびに、promiseが解決されます。 promiseは、他の非同期操作が完了するのを待ちません。 

<script>
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
           //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }

  //Promise.race(iterable)
   Promise.race([add_positivenos_async(10,20),add_positivenos_async(30,40)])
   .then(function(resolveValue){
      console.log('one of them is done')
      console.log(resolveValue)
   }).catch(function(err){
      console.log("Error",err)
   })

   console.log('end')
</script>

上記のコードの出力は次のようになります- 

end
one of them is done
30
*Promises* は、JavaScriptで非同期プログラミングを実装するためのクリーンな方法です（ES6新機能）。 約束の前に、コールバックは非同期プログラミングを実装するために使用されました。 コールバックを使用して、非同期プログラミングとその実装を理解することから始めましょう。

コールバックについて

関数は、パラメーターとして別の関数に渡すことができます。 このメカニズムは*コールバック*と呼ばれます。 コールバックはイベントで役立ちます。

次の例は、この概念をよりよく理解するのに役立ちます。 

<script>
   function notifyAll(fnSms, fnEmail) {
      console.log('starting notification process');
      fnSms();
      fnEmail();
   }
   notifyAll(function() {
      console.log("Sms send ..");
   },
   function() {
      console.log("email send ..");
   });
   console.log("End of script");
  //executes last or blocked by other methods
</script>

上記の* notifyAll（）*メソッドでは、SMSの送信と電子メールの送信によって通知が行われます。 したがって、notifyAllメソッドの呼び出し側は、2つの関数をパラメーターとして渡す必要があります。 各機能は、SMSの送信や電子メールの送信などの単一の責任を負います。

上記のコードが正常に実行されると、次の出力が表示されます。 

starting notification process
Sms send ..
Email send ..
End of script

上記のコードでは、関数呼び出しは同期的です。 これは、UIスレッドが通知プロセス全体を完了するのを待っていることを意味します。 同期コールはブロッキングコールになります。 ノンブロッキングまたは非同期呼び出しを理解しましょう。

AsyncCallbackを理解する

上記の例を考えてみましょう。

スクリプトを有効にするには、notifyAll（）メソッドの非同期呼び出しまたは非ブロッキング呼び出しを実行します。 JavaScriptの* setTimeout（）*メソッドを使用します。 このメソッドはデフォルトで非同期です。

setTimeout（）メソッドは2つのパラメータを取ります-

  • コールバック関数。
  • メソッドが呼び出されるまでの秒数。

この場合、通知プロセスはタイムアウトでラップされています。 したがって、コードで設定された2秒の遅延がかかります。 notifyAll（）が呼び出され、メインスレッドは他のメソッドを実行するように進みます。 したがって、通知プロセスはメインのJavaScriptスレッドをブロックしません。 

<script>
   function notifyAll(fnSms, fnEmail) {
      setTimeout(function() {
         console.log('starting notification process');
         fnSms();
         fnEmail();
      }, 2000);
   }
   notifyAll(function() {
      console.log("Sms send ..");
   },
   function() {
      console.log("email send ..");
   });
   console.log("End of script");//executes first or not blocked by others
</script>

上記のコードが正常に実行されると、次の出力が表示されます。 

End of script
starting notification process
Sms send ..
Email send ..

複数のコールバックの場合、コードは恐ろしく見えます。 

<script>
   setTimeout(function() {
      console.log("one");
      setTimeout(function() {
         console.log("two");
         setTimeout(function() {
            console.log("three");
         }, 1000);
      }, 1000);
   }, 1000);
</script>

ES6は、Promiseの概念を導入することにより、あなたを助けます。 プロミスは「継続イベント」であり、複数の非同期操作をよりクリーンなコードスタイルで一緒に実行するのに役立ちます。

例

例でこれを理解しましょう。 以下は同じ構文です。 

var promise = new Promise(function(resolve , reject) {
  //do a thing, possibly async , then..
   if(/*everthing turned out fine */)    resolve("stuff worked");
   else
   reject(Error("It broke"));
});
return promise;
//Give this to someone

promiseを実装するための最初のステップは、promiseを使用するメソッドを作成することです。 この例では、* getSum（）*メソッドは非同期です。つまり、その操作は他のメソッドの実行をブロックしてはいけません。 この操作が完了するとすぐに、呼び出し元に通知します。

次の例（ステップ1）は、Promiseオブジェクト「var promise」を宣言しています。 Promise Constructorは、作業が正常に完了するために最初に機能を使用し、エラーが発生した場合に別の機能を使用します。

promiseは、resolveコールバックを使用して結果を渡すことにより、計算の結果、つまりn1 + n2を返します。

  • ステップ1 *-resolve（n1 + n2）;

getSum（）でエラーまたは予期しない状態が発生した場合、Promiseでリジェクトコールバックメソッドを呼び出し、エラー情報を呼び出し元に渡します。

  • ステップ2 *-reject（Error（ "Negatives not supported"））;

メソッドの実装は、次のコードに記載されています（ステップ1）。 

function getSum(n1, n2) {
   varisAnyNegative = function() {
      return n1 < 0 || n2 < 0;
   }
   var promise = new Promise(function(resolve, reject) {
      if (isAnyNegative()) {
         reject(Error("Negatives not supported"));
      }
      resolve(n1 + n2)
   });
   return promise;
}

2番目のステップでは、呼び出し元の実装について詳しく説明します（ステップ2）。

呼び出し元は「then」メソッドを使用する必要があります。このメソッドは、成功と失敗の2つのコールバックメソッドを取ります。 次のコードに示すように、各メソッドは1つのパラメーターを取ります。 

getSum(5, 6)
.then(function (result) {
   console.log(result);
},
function (error) {
   console.log(error);
});

上記のコードが正常に実行されると、次の出力が表示されます。 

11

getSum（）の戻り値の型はPromiseであるため、実際には複数の「then」ステートメントを使用できます。 最初の「then」にはreturnステートメントがあります。 

getSum(5, 6)
.then(function(result) {
   console.log(result);
   returngetSum(10, 20);
  //this returns another promise
},
function(error) {
   console.log(error);
})
.then(function(result) {
   console.log(result);
},
function(error) {
   console.log(error);
});

上記のコードが正常に実行されると、次の出力が表示されます。 

11
30

次の例では、getSum（）メソッドを使用して3つのthen（）呼び出しを発行します。 

<script>
   function getSum(n1, n2) {
      varisAnyNegative = function() {
         return n1 < 0 || n2 < 0;
      }
      var promise = new Promise(function(resolve, reject) {
         if (isAnyNegative()) {
            reject(Error("Negatives not supported"));
         }
         resolve(n1 + n2);
      });
      return promise;
   }
   getSum(5, 6)
   .then(function(result) {
      console.log(result);
      returngetSum(10, 20);
     //this returns another Promise
   },
   function(error) {
      console.log(error);
   })
   .then(function(result) {
      console.log(result);
      returngetSum(30, 40);
     //this returns another Promise
   },
   function(error) {
      console.log(error);
   })
   .then(function(result) {
      console.log(result);
   },
   function(error) {
      console.log(error);
   });
   console.log("End of script ");
</script>

上記のコードが正常に実行されると、次の出力が表示されます。

プログラムは最初に「スクリプトの終わり」を表示し、次にgetSum（）メソッドを呼び出して結果を1つずつ表示します。 

End of script
11
30
70

これは、getSum（）が非同期スタイルまたは非ブロックスタイルで呼び出されることを示しています。 Promiseは、コールバックに対処するためのすてきできれいな方法を提供します。

ES6-モジュール

前書き

JavaScriptコードの一部を再利用する必要があるシナリオを考えます。 ES6 は、*モジュール*のコンセプトであなたを救います。

モジュールは、JavaScriptコードの関連セットを編成します。 モジュールには、変数と関数を含めることができます。 モジュールは、ファイルに記述されたJavaScriptコードのチャンクにすぎません。 デフォルトでは、モジュールの変数と関数は使用できません。 モジュール内の変数と関数は、他のファイル内からアクセスできるようにエクスポートする必要があります。 ES6のモジュールは* strictモード*でのみ機能します。 これは、モジュールで宣言された変数または関数にグローバルにアクセスできないことを意味します。

モジュールのエクスポート

exportキーワードを使用して、モジュール内のコンポーネントをエクスポートできます。 モジュールのエクスポートは次のように分類できます-

  • 名前付きエクスポート
  • デフォルトのエクスポート

名前付きエクスポート

名前付きエクスポートは名前で区別されます。 モジュールには複数の名前付きエクスポートを含めることができます。 モジュールは、以下に示す構文を使用して、選択したコンポーネントをエクスポートできます-

  • 構文1 *
//using multiple export keyword
export component1
export component2
...
...
export componentN
  • 構文2 *

または、以下のように\ {}バインディング構文で単一のエクスポートキーワードを使用して、モジュールのコンポーネントをエクスポートすることもできます- 

//using single export keyword

export {component1,component2,....,componentN}

デフォルトのエクスポート

単一の値のみをエクスポートする必要があるモジュールは、デフォルトのエクスポートを使用できます。 モジュールごとにデフォルトのエクスポートは1つだけです。

構文 

export default component_name

ただし、モジュールはデフォルトのエクスポートと複数の名前付きエクスポートを同時に持つことができます。

モジュールのインポート

モジュールを使用できるようにするには、* importキーワード*を使用します。 モジュールは複数の*インポートステートメント*を持つことができます。

名前付きエクスポートのインポート

名前付きエクスポートをインポートするとき、対応するコンポーネントの名前は一致する必要があります。

構文 

import {component1,component2..componentN} from module_name

ただし、名前付きエクスポートのインポート中は、asキーワードを使用して名前を変更できます。 以下に示す構文を使用してください- 

import {original_component_name as new_component_name }

すべての名前付きエクスポートは、アスタリスク* *演算子*を使用してオブジェクトにインポートできます。 

import * as variable_name from module_name

デフォルトのエクスポートのインポート

名前付きエクスポートとは異なり、デフォルトのエクスポートは任意の名前でインポートできます。

構文 

import any_variable_name from module_name

例：名前付きエクスポート

  • ステップ1 *-ファイルcompany1.jsを作成し、次のコードを追加します-
let company = "finddevguides"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}
  • ステップ2 *-ファイルcompany2.jsを作成します。 このファイルは、company1.jsファイルで定義されたコンポーネントを使用します。 次のいずれかの方法でモジュールをインポートします。
  • アプローチ1 *
import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())
  • アプローチ2 *
import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())
  • アプローチ3 *
import* as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)
  • ステップ3 *-HTMLファイルを使用してモジュールを実行します

両方のモジュールを実行するには、以下に示すようにhtmlファイルを作成し、これをライブサーバーで実行する必要があります。 スクリプトタグでは attribute type = "module" を使用する必要があることに注意してください。 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

上記のコードの出力は以下のようになります- 

finddevguides
finddevguides

デフォルトのエクスポート

ステップ1 *-ファイル *company1.js を作成し、次のコードを追加します- 

let name = 'finddevguides'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

ステップ2 *- *company2.js ファイルを作成します。 このファイルは、company1.jsファイルで定義されたコンポーネントを使用します。 

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

ステップ3 *- HTMLファイル*を使用して*モジュール*を実行します

両方のモジュールを実行するには、以下に示すようにhtmlファイルを作成し、これをライブサーバーで実行する必要があります。 スクリプトタグでは attribute type = "module" を使用する必要があることに注意してください。 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

上記のコードの出力は以下のようになります- 

finddevguides
Google Inc

例：デフォルトのエクスポートと名前付きエクスポートの組み合わせ

ステップ1 *-ファイル *company1.js を作成し、次のコードを追加します- 

//named export
export let name = 'finddevguides'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

ステップ2 *- *company2.js ファイルを作成します。 このファイルは、 company1.js ファイルで定義されたコンポーネントを使用します。 最初にデフォルトのエクスポートをインポートし、次に名前付きエクスポートをインポートします。 

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())
  • ステップ3 *-HTMLファイルを使用してモジュールを実行します
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

上記のコードの出力は以下のようになります- 

finddevguides
finddevguides
Mohtashim

ES6-エラー処理

プログラミングには、構文エラー、実行時エラー、論理エラーの3種類のエラーがあります。

構文エラー

  • 構文解析エラー*とも呼ばれる構文エラーは、従来のプログラミング言語ではコンパイル時に、JavaScriptでは解釈時に発生します。 JavaScriptで構文エラーが発生すると、構文エラーと同じスレッド内に含まれるコードのみが影響を受け、他のスレッド内の残りのコードは、エラーを含むコードに依存しないと仮定して実行されます。

ランタイムエラー

  • 例外*とも呼ばれるランタイムエラーは、実行中（コンパイル/解釈後）に発生します。 例外は、例外が発生するスレッドにも影響を与え、他のJavaScriptスレッドが通常の実行を継続できるようにします。

論理エラー

論理エラーは、追跡が最も難しいタイプのエラーです。 これらのエラーは、構文エラーまたは実行時エラーの結果ではありません。 代わりに、スクリプトを駆動するロジックを間違えたときに発生し、期待どおりの結果が得られません。

これらのエラーは、ビジネス要件、プログラムに含めるロジックの種類に依存するため、キャッチできません。

JavaScriptは、実行時エラーが発生するとErrorオブジェクトのインスタンスをスローします。 次の表に、定義済みのタイプのErrorオブジェクトを示します。

Sr.No Error Object & Description
1

EvalError

グローバル関数* eval（）*に関して発生するエラーを表すインスタンスを作成します。

2

RangeError

数値変数またはパラメーターが有効範囲外にある場合に発生するエラーを表すインスタンスを作成します。

3

ReferenceError

無効な参照を逆参照するときに発生するエラーを表すインスタンスを作成します。

4

SyntaxError

コードの解析中に発生する構文エラーを表すインスタンスを作成します。

5

TypeError

変数またはパラメーターが有効なタイプでない場合に発生するエラーを表すインスタンスを作成します。

6

URIError

  • encodeURI（）または decodeURI（）*に無効なパラメーターが渡されたときに発生するエラーを表すインスタンスを作成します。

例外を投げる

エラー（事前定義またはユーザー定義）は、* throwステートメント*を使用して発生させることができます。 後でこれらの例外をキャプチャして、適切なアクションを実行できます。 以下は同じ構文です。

構文：一般的な例外をスローする

throw new Error([message])
OR
throw([message])

構文：特定の例外をスローする

throw new Error_name([message])

例外処理

例外処理は、* try …​ catchステートメント*で実行されます。 プログラムで例外が発生すると、プログラムは非友好的な方法で終了します。 この予期しないエラーから保護するために、try …​ catchステートメントでコードをラップできます。

tryブロックの後には、正確に1つのcatchブロックまたは1つのfinallyブロック（または両方）が続く必要があります。 tryブロックで例外が発生すると、例外がeに配置され、catchブロックが実行されます。 オプションのfinallyブロックは、try/catchの後に無条件に実行されます

以下は同じ構文です。 

try {
  //Code to run
   [break;]
} catch ( e ) {
  //Code to run if an exception occurs
   [break;]
}[ finally {
  //Code that is always executed regardless of
  //an exception occurring
}]

例

var a = 100;
var b = 0;
try {
   if (b == 0 ) {
      throw(“Divide by zero error.”);
   } else {
      var c = a/b;
   }
}
catch( e ) {
   console.log("Error: " + e );
}

出力

上記のコードが正常に実行されると、次の出力が表示されます。 

Error: Divide by zero error

注-注：1つの関数で例外を発生させ、同じ関数または try …​ catch ブロックを使用して呼び出し元関数でその例外をキャプチャできます。

onerror（）メソッド

*onerror* イベントハンドラは、JavaScriptでのエラー処理を容易にする最初の機能でした。 ページで例外が発生するたびに、ウィンドウオブジェクトでエラーイベントが発生します。

例

<html>
   <head>
      <script type = "text/javascript">
         window.onerror  =  function () {
            document.write ("An error occurred.");
         }
      </script>
   </head>

   <body>
      <p>Click the following to see the result:</p>
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>
   </body>
</html>

出力

上記のコードが正常に実行されると、次の出力が表示されます。

1つのエラーメソッド

onerrorイベントハンドラは、エラーの正確な性質を識別するために3つの情報を提供します-

  • エラーメッセージ-ブラウザが特定のエラーに対して表示するのと同じメッセージ。
  • URL -エラーが発生したファイル。
  • 行番号-エラーの原因となった特定のURLの行番号。

次の例は、この情報を抽出する方法を示しています。

例

<html>
   <head>
      <script type = "text/javascript">
         window.onerror  =  function (msg, url, line) {
            document.write ("Message : " + msg );
            document.write ("url : " + url );
            document.write ("Line number : " + line );
         }
      </script>
   </head>

   <body>
      <p>Click the following to see the result:</p>
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>
   </body>
</html>

カスタムエラー

JavaScriptは、カスタムエラーの概念をサポートしています。 次の例で同じことを説明します。

例1：デフォルトメッセージを含むカスタムエラー

function MyError(message) {
   this.name = 'CustomError';
   this.message = message || 'Error raised with default message';
}
try {
   throw new MyError();
} catch (e) {
   console.log(e.name);
   console.log(e.message); //'Default Message'
}

上記のコードが正常に実行されると、次の出力が表示されます。 

CustomError
Error raised with default message

例2：ユーザー定義のエラーメッセージを含むカスタムエラー

function MyError(message) {
   this.name = 'CustomError';
   this.message = message || 'Default Error Message';
} try {
   throw new MyError('Printing Custom Error message');
}
catch (e) {
   console.log(e.name);
   console.log(e.message);
}

上記のコードが正常に実行されると、次の出力が表示されます。 

CustomError
Printing Custom Error message

ES6-オブジェクト拡張

文字列拡張

ES6のStringオブジェクトに追加されたいくつかの一般的なメソッドは次のとおりです-

Sr.No Method & Description
1

str.startsWith(searchString[, position)]

文字列が指定された文字列の文字で始まるかどうかを決定します。 trueまたはfalseを返します

2

str.endsWith(searchString[, length)]

文字列が指定された文字列の文字で終了するかどうかを決定します。 true/falseを返します

3

str.includes(searchString[, position)]

ある文字列が別の文字列内に見つかるかどうかを決定します

4

str.repeat(count)

呼び出された文字列の指定された数のコピーを含む新しい文字列を作成して返し、連結します

正規表現拡張

正規表現、たとえば /[A-Z]/g では、最初と最後の/は*区切り文字*と呼ばれます。 終了デリミタの後は*修飾子*と呼ばれます。 ES6では、 g が global を表す新しい修飾子 /g が追加されています。 これは、1つだけでなく、文字列内のパターンのすべてのインスタンスに一致します。

例

次の例では、文字列内のすべての大文字を検索して返します。 

<script>
   let str = 'JJavascript is Fun to Work , very Fun '
   let regex =/[A-Z]/g//g stands for global matches
   let result = str.match(regex);
   console.log(result)
</script>

上記のコードの出力は以下のようになります- 

["J", "J", "F", "W", "F"]

正規表現検索では大文字と小文字が区別されます。 大文字と小文字の区別をオフにするには、 /i 修飾子を使用します。

例

次の例では、大文字と小文字を区別しないグローバル一致を実行します。 この例では、 fun を enjoyable に置き換えています。 

<script>
  ///gi global match ignore case

   let str = 'Javascript is fun to Work , very Fun '
   let regex =/Fun/gi;
   console.log(str.replace(regex,'enjoyable'));
   console.log(str)
   console.log(str.search(regex))
</script>

上記のコードの出力は以下のようになります- 

Javascript is enjoyable to Work , very enjoyable
Javascript is fun to Work , very Fun
15

数

ES6の* Numberオブジェクト*に追加されたいくつかの一般的なメソッドは次のとおりです-

Sr.No Method & Description
1

Number.isFinite(value)

メソッドは、渡された値が有限数かどうかを決定します。 true/falseを返します。

2

Number.isNaN(value)

指定された値がNaNで、その型がNumberの場合、trueを返します。それ以外の場合はfalse。

3

Number.parseFloat(string)

指定された値から解析された浮動小数点数。 値を数値に変換できない場合は、NaNが返されます。

4

Number.parseInt(string,[ radix)]

メソッドは文字列引数を解析し、指定された基数または基数の整数を返します。

Math

ES6の* Mathオブジェクト*に追加されたいくつかの一般的なメソッドは次のとおりです-

Sr.No Method & Description
1

Math.sign()

関数は数値の符号を返し、数値が正か負かゼロかを示します。

2

Math.trunc()

関数は、小数桁を削除して、数値の整数部分を返します。

ES6の配列の方法

以下の表は、ES6のさまざまな配列メソッドとその説明をまとめたものです。

Sr.No Method & Description
1

copyWithin()

浅いは、配列の一部を同じ配列内の別の場所にコピーし、長さを変更せずにそれを返します。

2

entries()

メソッドは、配列内の各インデックスのキーと値のペアを含む新しいArray Iteratorオブジェクトを返します。

3

find()

メソッドは、指定されたテスト関数を満たす配列の最初の要素の値を返します。 それ以外の場合は、未定義が返されます。

4

fill()

メソッドは、開始インデックスから終了インデックスまでの配列のすべての要素を静的な値で埋めます。 変更された配列を返します。

5

Array.of()

メソッドは、引数の数やタイプに関係なく、可変数の引数から新しいArrayインスタンスを作成します。

6

Array.from()

メソッドは、配列のような配列または反復可能なオブジェクトから浅いコピーを作成します。

対象

オブジェクト機能に関連するメソッドは、それぞれの説明とともに以下の表に記載されています。

Sr.No Method & Description
1

Object.is()

メソッドは、2つの値が同じ値かどうかを判別します

2

Object.setPrototypeOf()

メソッドは、指定されたオブジェクトのプロトタイプを別のオブジェクトまたはnullに設定します。

3

Object.assign()

メソッドは、列挙可能なすべての独自のプロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。 ターゲットオブジェクトを返します。

ES6-リフレクトAPI

ES6は、プログラムの構造を検査または変更したり、言語自体での動作を変更したりすることを含む、メタプログラミングに関する新機能を導入しています。

以下は、メタプログラミングの3つの形式です-

  • イントロスペクション-イントロスペクションとは、それ自体に関する情報を収集するプログラムを意味します。 イントロスペクションに使用されるJavaScript演算子の例には、 typeof、instanceof などがあります。
  • 自己変更-自己変更とは、実行時にプログラムの構造を変更することを指します。 実行時に新しいプロパティにアクセスまたは作成する必要があります。 つまり、自己変更とは、一部のコードがそれ自体を変更することです。
  • 介入-プログラミング言語のデフォルトの動作を変更するコードを指します。 とりなしには、プログラミング言語のセマンティクスの変更、または実行時にプログラムに新しい構成を追加することが含まれます。

ES6では、メタプログラミングをサポートするReflect Application Programming Interface（Reflect API）およびProxy APIが導入されています。

Reflect APIを使用したメタプログラミング

ES6のReflect APIを使用すると、実行時にプログラムのクラス、オブジェクト、プロパティ、およびメソッドを検査または変更できます。 Reflect APIは、イントロスペクションに使用できる静的メソッドを持つグローバルReflectオブジェクトを提供します。 これらのメソッドは、コードに関する低レベルの情報を発見するために使用されます。 Reflect APIを使用して、実行時にプログラムを検査および内省する自動化テストフレームワークを構築できます。

Reflectオブジェクトのいくつかの一般的に使用されるメソッドを以下に示します-

Sr.No Method & Description
1

Reflect.apply()

argsパラメータで指定された引数を使用してターゲット関数を呼び出します

2

Reflect.construct()

クラスの新しいtarget（…​ args）オブジェクトを呼び出すことと同等

3

Reflect.get()

プロパティの値を返す関数。

4

Reflect.set()

プロパティに値を割り当てる関数。 更新が成功した場合にtrueとなるブール値を返します。

5

Reflect.has()

関数としてのin演算子。 独自のプロパティまたは継承されたプロパティが存在するかどうかを示すブール値を返します。

ES6-プロキシAPI

ES6は、プロキシを使用したメタプログラミングのとりなし形式を実装しています。 ReflectAPIと同様に、Proxy APIはES6でメタプログラミングを実装するもう1つの方法です。 Proxyオブジェクトは、基本的な操作のカスタム動作を定義するために使用されます。 プロキシオブジェクトは、実際のオブジェクトに代わっていくつかの操作を実行します。

ES6プロキシに関連するさまざまな用語を以下に示します

Sr.No Method & Description
1

handler

トラップを含むプレースホルダーオブジェクト

2

traps

プロパティアクセスを提供するメソッド。 これは、オペレーティングシステムのトラップの概念に類似しています。

1

target

プロキシが仮想化するオブジェクト。 プロキシのストレージバックエンドとしてよく使用されます。

構文

以下に示す構文はProxy APIの構文で、 target は配列、関数、または別のプロキシなどの任意の種類のオブジェクトで、 handler はプロパティが関数であるオブジェクトです。 これは、プロキシの動作を定義します。 

const proxy = new Proxy(target,handler)

ハンドラーメソッド

ハンドラオブジェクトには、プロキシのトラップが含まれています。 トラップはすべてオプションです。 トラップが定義されていない場合、デフォルトの動作では、操作がターゲットに転送されます。 いくつかの一般的なハンドラメソッドは次のとおりです-

Sr.No Method & Description
1

handler.apply()

関数呼び出しのトラップ。

2

handler.construct()

新しいオペレーターのトラップ。

3

handler.get()

プロパティ値を取得するためのトラップ。

4

handler.set()

プロパティ値を設定するためのトラップ。

5

handler.has()

inオペレーターのTAトラップ。

ES6-検証

クライアントが必要なすべてのデータを入力し、[送信]ボタンを押した後、通常はサーバーで行われる*フォーム検証*。 クライアントが入力したデータが正しくないか、単に欠落している場合、サーバーはすべてのデータをクライアントに送り返して、正しい情報でフォームを再送信するように要求する必要があります。 これは、サーバーに多大な負荷をかけるために使用される、本当に長いプロセスでした。

JavaScriptは、Webサーバーに送信する前に、クライアントのコンピューター上のフォームのデータを検証する方法を提供します。 通常、フォーム検証は2つの機能を実行します。

  • 基本的な検証-まず第一に、すべての必須フィールドが入力されていることを確認するためにフォームをチェックする必要があります。 フォームの各フィールドをループしてデータをチェックするだけです。
  • データ形式の検証-第二に、入力されたデータは正しい形式と値をチェックする必要があります。 コードには、データの正確性をテストするための適切なロジックを含める必要があります。

例

検証プロセスを理解するために例を取り上げます。 これは、html形式の簡単なフォームです。 

<html>

   <head>
      <title>Form Validation</title>
      <script type = "text/javascript">
         <!--
           //Form validation code will come here.
           //
         -->
      </script>
   </head>

   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name"/></td>
            </tr>
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail"/></td>
            </tr>
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip"/></td>
            </tr>
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit"/></td>
            </tr>
         </table>
      </form>
   </body>

</html>

出力

上記のコードが正常に実行されると、次の出力が表示されます。

フォーム検証

基本的なフォーム検証

まず、基本的なフォーム検証の方法を見てみましょう。 上記のフォームでは、 onsubmit イベントの発生時にデータを検証するために* validate（）*を呼び出しています。 次のコードは、このvalidate（）関数の実装を示しています。 

<script type = "text/javascript">
   <!--
     //Form validation code will come here. function validate() {
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" ||
         isNaN( document.myForm.Zip.value ) ||
         document.myForm.Zip.value.length != 5 ) {
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
     //
   -->
</script>

データ形式の検証

次に、入力したフォームデータをWebサーバーに送信する前に検証する方法を確認します。

次の例は、入力した電子メールアドレスを検証する方法を示しています。 メールアドレスには、少なくとも「@」記号とドット（。）を含める必要があります。 また、「@」はメールアドレスの最初の文字であってはならず、最後のドットは「@」記号の後の少なくとも1文字でなければなりません

例

電子メール検証のために次のコードを試してください。 

<script type = "text/javascript">
   <!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");

         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
     //
   --<
</script>

ES6-アニメーション

JavaScriptを使用して、次の要素を含むがこれらに限定されない複雑なアニメーションを作成できます-

  • 花火
  • フェード効果
  • ロールインまたはロールアウト
  • ページインまたはページアウト
  • オブジェクトの動き

この章では、JavaScriptを使用してアニメーションを作成する方法について説明します。

JavaScriptを使用して、論理式または論理関数によって決定される何らかのパターンに従って、ページ内で多数のDOM要素（<img/>、<div>、またはその他のHTML要素）を移動できます。

JavaScriptは、アニメーションプログラムで頻繁に使用される次の関数を提供します。

  • setTimeout （function、duration）-この関数は、現在からdurationミリ秒後に関数を呼び出します。
  • setInterval （function、duration）-この関数は、durationミリ秒ごとに関数を呼び出します。
  • clearTimeout （setTimeout_variable）-この関数は、setTimeout（）関数によって設定されたタイマーをクリアします。

JavaScriptは、画面上の位置など、DOMオブジェクトの多くの属性を設定することもできます。 オブジェクトの上部および左の属性を設定して、画面上の任意の場所に配置できます。 以下は同じ構文です。 

//Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
//Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手動アニメーション

次のように、DOMオブジェクトプロパティとJavaScript関数を使用して、1つの単純なアニメーションを実装しましょう。 次のリストには、さまざまなDOMメソッドが含まれています。

  • JavaScript関数* getElementById（）を使用してDOMオブジェクトを取得し、それをグローバル変数 *imgObj に割り当てています。
  • 位置と左の属性を設定したimgObjを初期化する初期化関数* init（）*を定義しました。
  • ウィンドウのロード時に初期化関数を呼び出しています。
  • 左距離を10ピクセル増やすために* moveRight（）*関数を呼び出しています。 負の値に設定して、左側に移動することもできます。

例

次の例を試してください 

<html>
   <head>
      <title>JavaScript Animation</title>
      <script type = "text/javascript">
         <!--
            var imgObj = null; function init(){
               imgObj = document.getElementById('myImage');
               imgObj.style.position = 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight(){
               imgObj.style.left = parseInt(
               imgObj.style.left) + 10 + 'px';
            }
            window.onload = init;
           //
         -->
      </script>
   </head>

   <body>
      <form>
         <img id = "myImage" src = "/images/html.gif"/>
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();"/>
      </form>
   </body>

</html>

上記のコードが正常に実行されると、次の出力が表示されます。

自動アニメーション

上記の例では、クリックするたびに画像が右に移動する様子を見ました。 次のようにJavaScript関数* setTimeout（）*を使用して、このプロセスを自動化できます。

ここにメソッドを追加しました。 それでは、ここで何が新しくなったか見てみましょう。

  • * moveRight（）*関数は、imgTimeoutの位置を設定するためにsetTimeout（）関数を呼び出しています。
  • setTimeout（）関数によって設定されたタイマーをクリアし、オブジェクトを初期位置に設定する新しい関数* stop（）*を追加しました。

例

次のサンプルコードを試してください。 

<html>
   <head>
      <title>JavaScript Animation</title>
      <script type = "text/javascript">
         <!--
            var imgObj = null; var animate ; function init(){
               imgObj = document.getElementById('myImage');
               imgObj.style.position = 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight(){
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20);
              //call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px';
            }
            window.onload = init;
           //
         -->
      </script>
   </head>

   <body>
      <form>
         <img id = "myImage" src = "/images/html.gif"/>
         <p>Click the buttons below to handle animation</p>
         <input type="button" value="Start" onclick = "moveRight();"/>
         <input type = "button" value="Stop" onclick = "stop();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

マウスイベントでのロールオーバー

マウスイベントでのイメージロールオーバーを示す簡単な例を次に示します。

次の例で使用しているものを見てみましょう-

  • このページの読み込み時に、「if」ステートメントは画像オブジェクトの存在を確認します。 画像オブジェクトが利用できない場合、このブロックは実行されません。
  • * Image（）コンストラクターは、 *image1 という新しい画像オブジェクトを作成してプリロードします。
  • src プロパティには、 /images/html.gif という外部画像ファイルの名前が割り当てられます。
  • 同様に、 image2 オブジェクトを作成し、このオブジェクトに /images/http.gif を割り当てました。
  • ＃（ハッシュマーク）はリンクをクリックし、ブラウザがクリックされたときにURLにアクセスしようとしないようにします。 このリンクは画像です。
  • ユーザーのマウスがリンク上に移動すると onMouseOver イベントハンドラーがトリガーされ、ユーザーのマウスがリンク（画像）から離れると onMouseOut イベントハンドラーがトリガーされます。
  • マウスが画像上を移動すると、HTTP画像は最初の画像から2番目の画像に変わります。 マウスを画像から遠ざけると、元の画像が表示されます。
  • マウスをリンクから遠ざけると、初期画像 html.gif が画面に再表示されます。
<html>
   <head>
      <title>Rollover with a Mouse Events</title>
      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();
              //Preload an image image1.src = "/images/html.gif";

               var image2 = new Image();
              //Preload second image image2.src = "/images/http.gif";
            }
           //
         -->
      </script>
   </head>

   <body>
      <p>Move your mouse over the image to see the result</p>
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif"/>
      </a>
   </body>

</html>

上記のコードが正常に実行されると、次の出力が表示されます。

ES6-マルチメディア

JavaScriptナビゲーターオブジェクトには、 plugins という子オブジェクトが含まれています。 このオブジェクトは配列であり、ブラウザにインストールされたプラグインごとに1つのエントリがあります。 navigator.plugins オブジェクトは、Netscape、Firefox、およびMozillaでのみサポートされています。

例

次の例は、ブラウザにインストールされているすべてのプラグインをリストダウンする方法を示しています。 

<html>
   <head>
      <title>List of Plug-Ins</title>
   </head>
   <body>
      <table border = "1">
         <tr>
            <th>Plug-in Name</th>
            <th>Filename</th>
            <th>Description</th>
         </tr>
         <script LANGUAGE = "JavaScript" type = "text/javascript">
            for (i = 0; i<navigator.plugins.length; i++) {
               document.write("<tr><td>");
               document.write(navigator.plugins[i].name);
               document.write("</td><td>");
               document.write(navigator.plugins[i].filename);
               document.write("</td><td>");
               document.write(navigator.plugins[i].description);
               document.write("</td></tr>");
            }
         </script>
      </table>
   </body>

</html>

出力

上記のコードが正常に実行されると、次の出力が表示されます。

プラグインリスト

プラグインの確認

各プラグインには、配列にエントリがあります。 各エントリには、次のプロパティがあります-

  • name -プラグインの名前。
  • filename -プラグインをインストールするためにロードされた実行可能ファイル。
  • description -開発者が提供するプラグインの説明。
  • mimeTypes -プラグインでサポートされる各MIMEタイプに1つのエントリを持つ配列。

これらのプロパティをスクリプトで使用して、インストールされているプラ​​グインを確認し、JavaScriptを使用して、適切なマルチメディアファイルを再生できます。 次のコードを見てください。 

<html>
   <head>
      <title>Using Plug-Ins</title>
   </head>

   <body>
      <script language = "JavaScript" type = "text/javascript">
         media  =  navigator.mimeTypes["video/quicktime"]; if (media) {
            document.write("<embed src = 'quick.mov' height = 100 width = 100>");
         } else {
            document.write("<img src = 'quick.gif' height = 100 width = 100>");
         }
      </script>
   </body>
</html>

注-ここでは、HTML * <embed>タグ*を使用してマルチメディアファイルを埋め込みます。

マルチメディアの制御

ほとんどすべてのブラウザで動作する実際の例を見てみましょう。 

<html>
   <head>
      <title>Using Embeded Object</title>

      <script type = "text/javascript">
         <!--
            function play() {
               if (!document.demo.IsPlaying()) {
                  document.demo.Play();
               }
            }
            function stop() {
               if (document.demo.IsPlaying()){
                  document.demo.StopPlay();
               }
            }
            function rewind() {
               if (document.demo.IsPlaying()){
                  document.demo.StopPlay();
               }
               document.demo.Rewind();
            }
           //
         -->
      </script>
   </head>
   <body>
      <embed id = "demo" name = "demo"
         src = "http://www.amrood.com/games/kumite.swf"
         width = "318" height = "300" play = "false" loop = "false"
         pluginspage = "http://www.macromedia.com/go/getflashplayer"
         swliveconnect = "true">
      </embed>

      <form name = "form" id = "form" action = "#" method = "get">
         <input type = "button" value = "Start" onclick = "play();"/>
         <input type = "button" value = "Stop" onclick = "stop();"/>
         <input type = "button" value = "Rewind" onclick = "rewind();"/>
      </form>
   </body>
</html>

ES6-デバッグ

時々、開発者はコーディング中に間違いを犯します。 プログラムまたはスクリプトの間違いは、「バグ」と呼ばれます。

バグを見つけて修正するプロセスは*デバッグ*と呼ばれ、開発プロセスの通常の部分です。 この章では、タスクのデバッグに役立つツールとテクニックについて説明します。

IEのエラーメッセージ

エラーを追跡する最も基本的な方法は、ブラウザでエラー情報をオンにすることです。 デフォルトでは、ページでエラーが発生すると、Internet Explorerのステータスバーにエラーアイコンが表示されます。

エラーアイコン

このアイコンをダブルクリックすると、発生した特定のエラーに関する情報を表示するダイアログボックスが表示されます。

このアイコンは見落としやすいため、Internet Explorerには、エラーが発生したときにエラーダイアログボックスを自動的に表示するオプションがあります。

このオプションを有効にするには、[ツール]→[インターネットオプション]→[詳細設定]タブを選択し、次のスクリーンショットに示す[ NotificationaboutEvery Script Error を表示する]ボックスオプションを最後にオンにします。

インターネットオプション

FirefoxまたはMozillaのエラーメッセージ

Firefox、Netscape、Mozillaなどの他のブラウザーは、* JavaScriptコンソール*または*エラーコンソール*と呼ばれる特別なウィンドウにエラーメッセージを送信します。 コンソールを表示するには、[ツール]→[エラーコンソールまたはWeb開発]を選択します。

残念ながら、これらのブラウザはエラーが発生したときに視覚的な表示を提供しないため、コンソールを開いたままにして、スクリプトの実行中にエラーを監視する必要があります。

エラーコンソール

エラー通知

コンソールまたはInternet Explorerのダイアログボックスに表示されるエラー通知は、構文エラーとランタイムエラーの両方の結果です。 これらのエラー通知には、エラーが発生した行番号が含まれます。

Firefoxを使用している場合は、エラーコンソールで利用可能なエラーをクリックして、エラーのあるスクリプトの正確な行に移動できます。

スクリプトのデバッグ

JavaScriptをデバッグするにはさまざまな方法があります。 以下にいくつかの方法を示します。

JavaScript検証ツールを使用する

JavaScriptコードに奇妙なバグがないかどうかを確認する1つの方法は、それが有効であり、言語の公式の構文規則に従っているかどうかを確認するプログラムを実行することです。 これらのプログラムは validating parsers または略してバリデータと呼ばれ、多くの場合、商用のHTMLおよびJavaScriptエディターが付属しています。

JavaScriptの最も便利なバリデーターは、Douglas CrockfordのJavaScript Lintであり、Douglas CrockfordのJavaScript Lintで無料で入手できます。

Webページにアクセスし、提供されているテキスト領域にJavaScript（JavaScriptのみ）コードを貼り付けて、 jslint ボタンをクリックするだけです。 このプログラムはJavaScriptコードを解析し、すべての変数と関数の定義が正しい構文に従っていることを確認します。 また、ifやwhileなどのJavaScriptステートメントをチェックして、それらも正しい形式に従っていることを確認します。

プログラムにデバッグコードを追加する

プログラムで* alert（）または document.write（）*メソッドを使用して、コードをデバッグできます。 たとえば、あなたは次のように何かを書くかもしれません- 

var debugging = true; var whichImage = "widget";
if( debugging )
   alert( "Calls swapImage() with argument: " + whichImage );
   var swapStatus = swapImage( whichImage );
if( debugging )
alert( "Exits swapImage() with swapStatus=" + swapStatus );

alert（）の内容と順序を表示することにより、プログラムの状態を非常に簡単に調べることができます。

JavaScriptデバッガーを使用する

  • デバッガ*は、スクリプト実行のすべての側面をプログラマーの制御下に置くアプリケーションです。 デバッガーは、実行のフローを制御するだけでなく、値を調べて設定できるインターフェイスを介して、スクリプトの状態をきめ細かく制御します。

スクリプトがデバッガにロードされると、一度に1行ずつ実行するか、特定のブレークポイントで停止するように指示できます。 実行が停止すると、プログラマーはスクリプトとその変数の状態を調べて、何か問題があるかどうかを判断できます。 変数の値の変化を監視することもできます。

MozillaとNetscapeの両方のブラウザー用のMozilla JavaScriptデバッガー（コード名Venkman）の最新バージョンは、http：//www.hacksrus.com/~ginda/venkman [www.hacksrus.com/~ginda/venkmanからダウンロードできます。 ]。

開発者向けの便利なヒント

スクリプト内のエラーの数を減らし、デバッグプロセスを簡素化するには、次のヒントを念頭に置いてください-

  • たくさんのコメントを使用してください。 コメントを使用すると、スクリプトを記述した理由を説明し、特にコードの難しい部分を説明できます。
  • コードを読みやすくするために、常にインデントを使用してください。 インデント文も 開始タグと終了タグ、中括弧、その他のHTMLおよびスクリプト要素を簡単に一致させることができます。
  • モジュラーコードを記述します。 可能な限り、ステートメントを関数にグループ化します。 関数を使用すると、関連するステートメントをグループ化し、最小限の労力でコードの一部をテストおよび再利用できます。
  • 変数と関数の命名方法に一貫性を持たせてください。 意味があり、変数の内容または関数の目的を説明するのに十分な長さの名前を使用してみてください。
  • 変数と関数に名前を付けるときは、一貫した構文を使用してください。 つまり、すべて小文字またはすべて大文字のままにしてください。キャメルバック表記を好む場合は、一貫して使用してください。
  • モジュール形式で長いスクリプトをテストします。 つまり、スクリプトの一部をテストする前に、スクリプト全体を書こうとしないでください。 コードの次の部分を追加する前に、ピースを作成して動作させる。
  • わかりやすい変数名と関数名を使用し、1文字の名前を使用しないでください。
  • 引用符に注意してください。 引用符は文字列を囲むペアで使用され、両方の引用符は同じスタイル（単一または二重）でなければならないことに注意してください。
  • 等号に注意してください。 比較のために単一の=を使用しないでください。
  • var キーワードを使用して、変数を明示的に宣言します。

Node.jsを使用したデバッグ

Node.jsには、フル機能のデバッグユーティリティが含まれています。 これを使用するには、デバッグ引数に続いてデバッグするスクリプトへのパスを指定してNode.jsを起動します。 

node debug test.js

デバッガーが正常に開始されたことを示すプロンプトが起動します。

指定した場所にブレークポイントを適用するには、次のコードに示すように、ソースコードでデバッガーを呼び出します。 

//myscript.js
x = 5;
setTimeout(() => {
   debugger;
   console.log('world');
}, 1000);
console.log('hello');

以下は、Nodeで使用できるステッピングコマンドのセットです。

Sr.No Stepping Commands & Description
1

cont,c

持続する

2

next,n

Next

3

step,s

介入する

4

out,o

踏みでる

5

pause

コードを一時停止します。 開発者ツールの一時停止に似ています

Nodeのデバッグコマンドの完全なリストは、https://nodejs.org/api/debuggerl [[[1]]]にあります。

Visual Studioコードとデバッグ

Visual Studio Codeの主要な機能の1つは、Node.jsランタイムの優れた組み込みデバッグサポートです。 他の言語でコードをデバッグするために、デバッガー拡張機能を提供します。

App Ts

デバッガーは、構成ファイルの起動、ブレークポイント、変数の適用/削除/無効化および有効化、データ検査の有効化などを可能にする多数の機能を提供します。

VS Codeを使用したデバッグに関する詳細なガイドは、ここで見つけることができます-https://code.visualstudio.com/docs/editor/debugging

ES6-イメージマップ

JavaScriptを使用して、クライアント側のイメージマップを作成できます。 クライアント側のイメージマップは、 <img/> タグのusemap属性によって有効になり、特別な<map>および <area> 拡張タグによって定義されます。

マップを形成する画像は、通常どおり<img/>要素を使用してページに挿入されますが、usemapと呼ばれる追加の属性が含まれている点が異なります。 usemap 属性の値は、ポンドまたはハッシュ記号が前に付く<map>要素のname属性の値です。

<map>要素は実際に画像のマップを作成し、通常は<img/>要素の直後に続きます。 これは、クリック可能なホットスポットを実際に定義する<area/>要素のコンテナとして機能します。 <map>要素には、name属性という1つの属性のみが含まれます。name属性は、マップを識別する名前です。 これは、<img/>要素がどの<map>要素を使用するかを知る方法です。

<area>要素は、クリック可能な各ホットスポットの境界を定義する形状と座標を指定します。

次のコードは、イメージマップとJavaScriptを組み合わせて、マウスを画像のさまざまな部分に移動したときにテキストボックスにメッセージを生成します。 

<html>
   <head>
      <title>Using JavaScript Image Map</title>

      <script type="text/javascript">
         <!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
           //
         -->
      </script>
   </head>

   <body>
      <form name = "myform">
         <input type = "text" name = "stage" size = "20"/>
      </form>

      <!-- Create  Mappings -->
      <img src = "//images/usemap.gif" alt = "HTML Map"
         border = "0" usemap = "#tutorials"/>
      <map name = "tutorials">
         <area shape = "poly"
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index" alt = "Perl Tutorial"
            target = "_self"
            onMouseOver = "showTutorial('perl')"
            onMouseOut = "showTutorial('')"/>
         <area shape = "rect"
            coords = "22,83,126,125"
            href = "/html/index" alt = "HTML Tutorial" target = "_self"
            onMouseOver = "showTutorial('html')"
            onMouseOut = "showTutorial('')"/>
         <area shape = "circle"  coords = "73,168,32"
            href = "/php/index" alt = "PHP Tutorial" target = "_self"
            onMouseOver = "showTutorial('php')"
            onMouseOut = "showTutorial('')"/>
      </map>
   </body>

</html>

上記のコードが正常に実行されると、次の出力が表示されます。 画像オブジェクトの上にマウスカーソルを置くと、マップの概念を感じることができます。

イメージマップ

ES6-ブラウザー

各ブラウザーを期待どおりに処理するには、異なるブラウザー間の違いを理解することが重要です。 そのため、Webページが実行されているブラウザを知ることが重要です。 Webページが現在実行されているブラウザーに関する情報を取得するには、組み込みのナビゲーターオブジェクトを使用します。

ナビゲーターのプロパティ

Webページで使用できるNavigator関連のプロパティがいくつかあります。 以下は、名前とその説明のリストです。

Sr.No Property & Description
1

appCodeName

このプロパティは、ブラウザのコード名、NetscapeのNetscape、Internet ExplorerのMicrosoft Internet Explorerを含む文字列です。

2

appVersion

このプロパティは、ブラウザのバージョンと、言語や互換性などの他の有用な情報を含む文字列です。

3

language

このプロパティには、ブラウザで使用される言語の2文字の略語が含まれています。 Netscapeのみ。

4

mimTypes[]

このプロパティは、クライアントがサポートするすべてのMIMEタイプを含む配列です。 Netscapeのみ。

5

platform[]

このプロパティは、ブラウザがコンパイルされたプラットフォームを含む文字列です。 32ビットWindowsオペレーティングシステム用の「Win32」。

6

plugins[]

このプロパティは、クライアントにインストールされているすべてのプラグインを含む配列です。 Netscapeのみ。

7

userAgent[]

このプロパティは、ブラウザのコード名とバージョンを含む文字列です。 この値は、クライアントを識別するために元のサーバーに送信されます。

ナビゲーターメソッド

ナビゲータ固有のメソッドがいくつかあります。 それらの名前と説明のリストを以下に示します。

Sr.No Methods & Description
1

javaEnabled()

このメソッドは、クライアントでJavaScriptが有効になっているかどうかを判別します。 JavaScriptが有効な場合、このメソッドはtrueを返します。それ以外の場合は、falseを返します。

2

plugings.refresh

このメソッドは、新しくインストールされたプラグインを使用可能にし、すべての新しいプラグイン名をプラグイン配列に追加します。 Netscapeのみ

3

preference(name,value)

このメソッドを使用すると、署名されたスクリプトがNetscapeの設定を取得および設定できます。 2番目のパラメーターが省略された場合、このメソッドは指定された設定の値を返します。それ以外の場合は、値を設定します。 Netscapeのみ

4

taintEnabled()

データ汚染が有効な場合、このメソッドはtrueを返します。そうでない場合はfalse

ブラウザ検出

次のJavaScriptコードを使用してブラウザの名前を確認し、それに応じてHTMLページをユーザーに提供できます。 

<html>
   <head>
      <title>Browser Detection Example</title>
   </head>

   <body>
      <script type = "text/javascript">
         <!--
            var userAgent   = navigator.userAgent;
            var opera       = (userAgent.indexOf('Opera')
            ! = -1); var ie          = (userAgent.indexOf('MSIE')
            != -1); var gecko        = (userAgent.indexOf('Gecko')
            ! = -1); var netscape    = (userAgent.indexOf('Mozilla')
            ! = -1); var version     = navigator.appVersion;

            if (opera) {
               document.write("Opera based browser");
              //Keep your opera specific URL here.
            } else if (gecko) {
               document.write("Mozilla based browser");
              //Keep your gecko specific URL here.
            } else if (ie) {
               document.write("IE based browser");
              //Keep your IE specific URL here.
            } else if (netscape) {
               document.write("Netscape based browser");
              //Keep your Netscape specific URL here.
            } else {
               document.write("Unknown browser");
            }
           //You can include version to along with any above condition.
            document.write("<br/> Browser version info : " + version );
           //
         -->
      </script>
   </body>

</html>

上記のコードが正常に実行されると、次の出力が表示されます。 

Mozilla based browser
Browser version info : 5.0

（Windows NT 6.3; WOW64）AppleWebKit/537.36（KHTML、Geckoなど）Chrome/41.0.2272.101 Safari/537.36

ES7-新機能

この章では、ES7の新機能に関する知識を提供します。

べき乗演算子

ES7では、指数演算子と呼ばれる新しい数学演算子が導入されています。 この演算子は、Math.pow（）メソッドの使用に似ています。 指数演算子は、二重アスタリスク**で表されます。 演算子は数値でのみ使用できます。 指数演算子を使用するための構文は以下に与えられています-

構文

指数演算子の構文は以下に記載されています- 

base_value ** exponent_value

例

次の例では、* Math.pow（）*メソッドと*指数演算子*を使用して数値の指数を計算します。 

<script>
   let base = 2
   let exponent = 3
   console.log('using Math.pow()',Math.pow(base,exponent))
   console.log('using exponentiation operator',base**exponent)
</script>

上記のスニペットの出力は以下のとおりです- 

using Math.pow() 8
using exponentiation operator 8

アレイに含まれるもの

ES7で導入されたArray.includes（）メソッドは、要素が配列で使用可能かどうかを確認するのに役立ちます。 ES7より前のバージョンでは、Arrayクラスのindexof（）メソッドを使用して、値が配列に存在するかどうかを確認できました。 indexof（）は、データが見つかった場合、配列内の最初の要素のインデックスを返します。データが存在しない場合、elseは-1を返します。

Array.includes（）メソッドはパラメーターを受け取り、パラメーターとして渡された値が配列に存在するかどうかを確認します。 このメソッドは、値が見つかった場合はtrueを返し、値が存在しない場合はfalseを返します。 Array.includes（）メソッドを使用するための構文を以下に示します-

構文

Array.includes(value)

OR 

Array.includes(value,start_index)

2番目の構文は、指定されたインデックスからの値が存在するかどうかをチェックします。

例

次の例では、配列マークを宣言し、Array.includes（）メソッドを使用して、配列に値が存在するかどうかを確認しています。 

<script>
   let marks = [50,60,70,80]
  //check if 50 is included in array
   if(marks.includes(50)){
      console.log('found element in array')
   }else{
      console.log('could not find element')
   }

  //check if 50 is found from index 1
   if(marks.includes(50,1)){//search from index 1
      console.log('found element in array')
   }else{
      console.log('could not find element')
   }

  //check Not a Number(NaN) in an array
   console.log([NaN].includes(NaN))

  //create an object array
   let user1 = {name:'kannan'},
   user2 = {name:'varun'},
   user3={name:'prijin'}
   let users = [user1,user2]

  //check object is available in array
   console.log(users.includes(user1))
   console.log(users.includes(user3))
</script>

上記のコードの出力は以下のようになります- 

found element in array
could not find element
true
true
false

Es6-es8-newfeatures

ES9-新機能

ここでは、ES9の新機能について学びます。 非同期ジェネレータについて理解することから始めましょう。

非同期ジェネレーターと反復

*async* キーワードを使用すると、非同期ジェネレーターを非同期にすることができます。 非同期ジェネレータを定義するための*構文*は以下に与えられています-
async function* generator_name() {
  //statements
}

例

次の例は、ジェネレータの* next（）*メソッドを呼び出すたびにPromiseを返す非同期ジェネレータを示しています。 

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }

   let l = load();
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
</script>

上記のコードの出力は次のようになります- 

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}

ループを待つ

非同期反復可能オブジェクトは、promiseを返すため、従来の* for..ofループ*構文を使用して反復することはできません。 ES9では*非同期ループ*をサポートする for await of loop が導入されています。 

*for await of loop* を使用するための構文を以下に示します。
  • 各反復で、異なるプロパティの値が variable に割り当てられ、変数はconst、let、またはvarで宣言できます。
  • iterable -反復可能なプロパティが反復されるオブジェクト。
for await (variable of iterable) {
   statement
}

例

次の例は、for await of loopを使用して非同期ジェネレーターを反復処理する方法を示しています。 

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }

   async function test(){
      for await (const val of load()){
         console.log(val)
      }
   }
   test();
   console.log('end of script')
</script>

上記のコードの出力は以下のようになります- 

end of script
1
2
3

例

次の例では、for await ofループを使用して配列を反復しています。 

<script>
   async function fntest(){
      for await (const val of [10,20,30,40]){
         console.log(val)
      }
   }
   fntest();
   console.log('end of script')
</script>

上記のコードの出力は次のようになります- 

end of script
10
20
30
40

レスト/スプレッドプロパティ

ES9は、オブジェクトでのRestおよびSpreadオペレーターの使用をサポートしています。

例：オブジェクトおよびレストオペレーター

次の例は、オブジェクトでのRESTオペレーターの使用を示しています。 学生の年齢プロパティの値は年齢変数にコピーされ、残りのプロパティの値は残りの構文 `…​`を使用して他の変数にコピーされます。 

<script>
   const student = {
      age:10,
      height:5,
      weight:50
   }
   const {age,...other} = student;
   console.log(age)
   console.log(other)
</script>

上記のコードの出力は以下のようになります- 

10
{height: 5, weight: 50}

例：オブジェクトおよびスプレッド演算子

スプレッド演算子を使用して、複数のオブジェクトを結合したり、オブジェクトを複製したりできます。 これは、次の例に示されています- 

<script>
  //spread operator
   const obj1 = {a:10,b:20}
   const obj2={c:30}
  //clone obj1
   const clone_obj={...obj1}
  //combine obj1 and obj2
   const obj3 = {...obj1,...obj2}
   console.log(clone_obj)
   console.log(obj3)
</script>

上記のコードの出力は以下のようになります- 

{a: 10, b: 20}
{a: 10, b: 20, c: 30}

約束：いよいよ（）

  • finally（）は、その結果に関係なく、promiseが解決されるたびに実行されます。 この関数はpromiseを返します。 これは、promiseの then（）ハンドラーと catch（）*ハンドラーの両方でコードの重複を回避するために使用できます。

構文

下記の構文は、* finally（）*関数用です。 

promise.finally(function() {
});
promise.finally(()=> {
});

例

次の例では、3秒の遅延後に正数の2乗を返す非同期関数を宣言しています。 負の数が渡されると、関数はエラーをスローします。 finallyブロックのステートメントは、約束が拒否されたか解決されたかにかかわらず、どちらの場合でも実行されます。 

<script>
   let asyncSquareFn = function(n1){
      return new Promise((resolve,reject)=>{
         setTimeout(()=>{
            if(n1>=0){
               resolve(n1*n1)
            }
            else reject('NOT_POSITIVE_NO')
         },3000)
      })
   }
   console.log('Start')

   asyncSquareFn(10)//modify to add -10
   .then(result=>{
      console.log("result is",result)
   }).catch(error=>console.log(error))
   .finally(() =>{
      console.log("inside finally")
      console.log("executes all the time")
   })

   console.log("End");
</script>

上記のコードの出力は次のようになります 

Start
End
//after 3 seconds
result is 100
inside finally
executes all the time

テンプレートリテラルリビジョン

ES7以降、タグ付きテンプレートは次のエスケープシーケンスのルールに準拠しています-

  • Unicodeエスケープシーケンスは "\ u" を使用して表されます（例： \ u2764 \ uFE0F ）
  • Unicodeコードポイントのエスケープシーケンスは "\ u \ {}" を使用して表されます（例： \ u \ {2F} ）
  • 16進数のエスケープシーケンスは "\ x" を使用して表されます（例： \ xA8 ）
  • 8進リテラルエスケープシーケンスは ""を使用して表され、1つ以上の数字が続きます（例： \ 125 ）

ES2016以前では、タグ付き関数で無効なエスケープシーケンスを使用すると、以下に示すように構文エラーがスローされます- 

//tagged function with an invalid unicode sequence
myTagFn`\unicode1`
//SyntaxError: malformed Unicode character escape sequence

ただし、以前のバージョンとは異なり、ES9は無効なUnicodeシーケンスを未定義に解析し、エラーをスローしません。 これは、次の例に示されています- 

<script>
   function myTagFn(str) {
      return { "parsed": str[0] }
   }
   let result1 =myTagFn`\unicode1`//invalid unicode character
   console.log(result1)
   let result2 =myTagFn`\u2764\uFE0F`//valid unicode
   console.log(result2)
</script>

上記のコードの出力は以下のようになります- 

{parsed: undefined}
{parsed: "❤️"}

生ストリング

ES9では特別なプロパティ raw が導入され、タグ関数の最初の引数で使用できます。 このプロパティを使用すると、エスケープシーケンスを処理せずに、入力されたままの文字列にアクセスできます。

例

<script>
   function myTagFn(str) {
      return { "Parsed": str[0], "Raw": str.raw[0] }
   }
   let result1 =myTagFn`\unicode`
   console.log(result1)

   let result2 =myTagFn`\u2764\uFE0F`
   console.log(result2)
</script>

上記のコードの出力は次のようになります- 

{Parsed: undefined, Raw: "\unicode"}
{Parsed: "❤️", Raw: "\u2764\uFE0F"}

正規表現機能

正規表現では、ドット演算子またはピリオドを使用して単一の文字を照合します。 。 ドット演算子*は、以下の例に示すように、 *\ n、\ r のような改行文字をスキップします- 

console.log(/Tutorials.Point/.test('Tutorials_Point'));//true
console.log(/Tutorials.Point/.test('Tutorials\nPoint'));//false
console.log(/Tutorials.Point/.test('Tutorials\rPoint'));//false

正規表現パターンは/* regular_expression/.として表されます。test（）メソッドは文字列パラメーターを取り、正規表現パターンを検索します。 上記の例では、 test（）メソッド*は、Tutorialsで始まり、任意の1文字が続き、Pointで終わるパターンを検索します。 チュートリアルとポイントの間の入力文字列で \ n または \ r を使用すると、test（）メソッドはfalseを返します。 

true
false
false

ES9では、* DotAllFlag（\ s）*という新しいフラグが導入されました。これをRegexで使用して、行末記号と絵文字を一致させることができます。 これは、次の例に示されています- 

console.log(/Tutorials.Point/s.test('Tutorials\nPoint'));
console.log(/Tutorials.Point/s.test('Tutorials\rPoint'));

上記のコードの出力は以下のようになります- 

true
true

名前付きキャプチャグループ

ES9以前は、キャプチャグループはインデックスによってアクセスされていました。 ES9では、キャプチャグループに名前を割り当てることができます。 同じための構文は以下のとおりです- 

(?<Name1>pattern1)

例

const birthDatePattern =/(?<myYear>[0-9]{4})-(?<myMonth>[0-9]{2})/;
const birthDate = birthDatePattern.exec('1999-04');
console.log(birthDate.groups.myYear);
console.log(birthDate.groups.myMonth);

上記のコードの出力は以下のとおりです- 

1999
04
「https://www.finddevguides.com/index.php?title=Es6-quick-guide&oldid=78897」から取得
Powered by MediaWiki