以下は、ECMAScript2016、2017、および2017で新しく追加されたすべての例です。2018

ラジャラオドヴ著

JavaScript（ECMAScript）の新機能を追跡するのは難しいです。 そして、有用なコード例を見つけることはさらに困難です。

この記事では、ES2016、ES2017、およびES2018（最終草案）で追加されたTC39の完成した提案に記載されている18の機能をすべてカバーし、有用な例を示します。

これはかなり長い投稿ですが、読みやすいはずです。 これを”Netflixのどんちゃん騒ぎの読書”と考えてください。”これが終わるまでに、私はあなたがこれらすべての機能についての知識のトンを持っていることを約束します。

さて、これを一つずつ調べてみましょう。

配列。プロトタイプ。includes

includesは配列上の単純なインスタンスメソッドであり、項目が配列内にあるかどうかを簡単に見つけるのに役立ちます（indexOfとは異なりNaNを含む）。

雑学：JavaScript仕様の人々はそれをcontainsという名前にしたかったのですが、これは明らかにMootoolsによってすでに使用されていたので、彼らはincludesを使用しました。

べき乗 infix operator

加算や減算のような数学演算には、それぞれ+や-のような中置演算子があります。 それらと同様に、**中置演算子は、一般的に指数演算に使用されます。 ECMAScript2016では、Math.powの代わりに** が導入されました。

オブジェクト。値()

Object.values() は、Object.keys()に似ていますが、プロトタイプチェーン内の値を除くオブジェクト自身のプロパティのすべての値を返す新しい関数です。

オブジェクト。エントリー()

Object.entries() はObject.keysに関連していますが、キーだけを返すのではなく、キーと値の両方を配列形式で返します。 これにより、ループ内のオブジェクトを使用したり、オブジェクトをマップに変換したりすることが非常に簡単になります。

1:

例2:

String padding

二つのインスタンスメソッドがStringに追加されました—String.prototype.padStart とString.prototype.padEnd—空の文字列または他の文字列を元の文字列の始

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

これは、pretty print displayやterminal printのようなシナリオで物事を整列させたいときに便利です。

3.1padStartの例:

以下の例では、さまざまな長さの数値のリストがあります。 表示目的ですべての項目が同じ長さの10桁になるように、”0″を先頭に追加します。 これを簡単に達成するためにpadStart(10, '0')を使用できます。

3.2 パデンドの例:

padEnd さまざまな長さの複数のアイテムを印刷していて、それらを適切に右揃えしたいときには、本当に便利です。

以下の例は、padEnd、padStart、およびObject.entriesがすべて一緒になって美しい出力を生成する方法の良い現実的な例です。

3.3 ⚠️ Emojisおよびその他のダブルバイト文字のpadStartおよびpadEnd

Emojisおよびその他のダブルバイト文字は、複数のバイトのunicodeを使用して表されます。 したがって、padStartとpadEndは期待どおりに動作しない可能性があります！⚠ ️

たとえば、文字列heartを埋めて、emoji emojiで10文字に到達しようとしているとしましょう。 結果は以下のようになります:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

これは、σが2つのコードポイントの長さ（'\u2764\uFE0F'）であるためです！ 単語heart自体は5文字なので、合計で5文字しか残っていません。 だから何が起こるかというと、JSは'\u2764\uFE0F'を使って2つの心をパッドし、それが❤ ️ ❤ ️を生成するということです。 最後のものでは、単にheart

を生成する心臓\u2764の最初のバイトを使用するだけなので、次のようになります: ❤️❤️❤heart

PS：このリンクを使用して、unicode char変換をチェックすることができます。

getOwnPropertyDescriptors

このメソッドは、指定されたオブジェクトのすべてのプロパティのすべての詳細(gettergetおよびsettersetメソッドを含む)を返します。 これを追加する主な動機は、Object.assignではなくgetter関数とsetter関数をコピーする別のオブジェクトにオブジェクトを浅いコピー/複製できるようにすることです。

オブジェクト。assign shallowは、元のソースオブジェクトのgetter関数とsetter関数を除くすべての詳細をコピーします。

以下の例は、元のオブジェクトCarを新しいオブジェクトElectricCarにコピーするためのObject.definePropertiesとともに、Object.assignとObject.getOwnPropertyDescriptorsの違いを示しています。 Object.getOwnPropertyDescriptorsを使用すると、discountgetter関数とsetter関数もターゲットオブジェクトにコピーされることがわかります。

前…

後…

関数パラメータに末尾のカンマを追加

これは、最後の関数パラメータの後に末尾のカンマを持つことを可能にするマイナーな更新です。 どうして？ Git blameのようなツールを支援して、新しい開発者だけが非難されるようにします。

以下の例は、問題と解決策を示しています。

注:末尾のカンマで関数を呼び出すこともできます！

Async/Await

これは、はるかに、あなたが私に尋ねるなら、最も重要で最も便利な機能です。 非同期関数を使用すると、コールバック地獄に対処せず、コード全体をシンプルに見せることができます。

asyncキーワードは、関数を別の方法で扱うようにJavaScriptコンパイラに指示します。 コンパイラは、その関数内のawaitキーワードに達するたびに一時停止します。 これは、awaitの後の式がpromiseを返し、promiseが解決されるか拒否されるまで待機してからさらに移動することを前提としています。

以下の例では、getAmount関数は2つの非同期関数getUserとgetBankBalanceを呼び出しています。 Promiseでこれを行うことができますが、async awaitを使用する方がエレガントでシンプルです。

6.1 非同期関数自体はPromiseを返します。非同期関数の結果を待っている場合は、Promiseのthen構文を使用して結果をキャプチャする必要があります。

次の例では、console.logを使用して結果をログに記録しますが、doubleAndAdd内ではログに記録しません。 そのため、then構文を待って使用して、結果をconsole.logに渡したいと考えています。

6.2 並列でasync/awaitを呼び出す

前の例では、awaitを2回呼び出していますが、1秒（合計2秒）を待機するたびに呼び出します。 代わりに、aとbはPromise.allを使用して互いに依存しないため、並列化することができます。

6.3 エラー処理async/await関数

async awaitを使用するときにエラーを処理するには、さまざまな方法があります。

オプション1—関数内でtry catchを使用する

オプション2—すべてのawait式をキャッチ

すべてのawait式がPromiseを返すので、以下に示すように各行のエラーをキャッチすることができます。オプション3-async-await関数全体をキャッチ

ECMAScriptは現在最終草案中であり、2018年6月または7月に公開される予定です。 以下で説明するすべての機能はStage-4にあり、ECMAScript2018の一部になります。

1. 共有メモリとアトミック

これは巨大で非常に高度な機能であり、JSエンジンのコア拡張です。

主なアイデアは、jsエンジンにメモリを管理させるのではなく、JS開発者が将来的に高性能で並行してプログラムを書くことができるように、JavaScriptに

これは、基本的に共有メモリ空間にデータを格納するSharedArrayBufferと呼ばれる新しいタイプのグローバルオブジェクトによって行われます。 したがって、このデータはメインのJSスレッドとwebワーカースレッドの間で共有できます。

これまで、メインのJSスレッドとweb-workerの間でデータを共有したい場合は、データをコピーしてpostMessageを使用して他のスレッドに送信する必要がありました。 もうダメだ！

SharedArrayBufferを使用するだけで、メインスレッドと複数のwebワーカースレッドの両方からデータに即座にアクセスできます。

しかし、スレッド間でメモリを共有すると競合状態が発生する可能性があります。 競合状態を回避するために、”Atomics”グローバルオブジェクトが導入されています。 Atomicsには、スレッドがそのデータを使用しているときに共有メモリをロックするためのさまざまなメソッドが用意されています。 また、その共有メモリ内のそのようなデータを安全に更新する方法も提供します。

いくつかのライブラリを介してこの機能を使用することをお勧めしますが、現時点ではこの機能の上に構築されたライブラリはありません。

興味がある方は読んでみることをお勧めします:

1. ワーカーから共有メモリへ-lucasfcosta
2. sharedarraybuffersへの漫画のイントロ-Lin Clark
3. 共有メモリとアトミック-Dr.Axel Rauschmayer

2. タグ付きテンプレートリテラル制限の削除

まず、この機能をよりよく理解できるように、”タグ付きテンプレートリテラル”が何であるかを明確にする必要があります。

ES2015+には、開発者が文字列の補間方法をカスタマイズできるタグ付きテンプレートリテラルと呼ばれる機能があります。 たとえば、標準的な方法では、文字列は以下のように補間されます…

タグ付きリテラルでは、などの文字列リテラルのハードコードされた部分と、などの置換変数をパラメーターとしてカスタム関数(greetなど)に受け取り、そのカ

以下の例は、カスタムの”Tag”関数greetが”Good Morning!”のような時刻を追加することを示しています。”こんにちは、”というように文字列リテラルに一日の時間に応じて、カスタム文字列を返します。

“タグ付き”関数とは何かについて説明したので、多くの人がこの機能を異なるドメインで使用したいと考えています。

taggedタグ付き文字列リテラルの問題

だから、内部的に他のドメインのルール（端末のルールのような）を使用するタグ付き関数がある場合、\u0049や\u{@f804}のように見えない\ubla123ablaを使用する必要があるかもしれません構文エラーが発生します。

ES2018では、タグ付き関数が”cooked”プロパティ（無効な文字は”undefined”）を持つオブジェクトの値を返し、次に”raw”プロパティ（必要なもの）を返す限り、このような一見無効

“dotall”正規表現のフラグ

現在は正規表現にありますが、ドット(“.”)は単一の文字に一致することになっていますが、\n \r \f etcような改行文字には一致しません。例えば

:

//Before/first.second/.test('first\nsecond'); //false

この拡張により、ドット演算子は任意の単一文字に一致することが可能になります。 これが何も壊れないようにするには、これが機能するための正規表現を作成するときに\sフラグを使用する必要があります。

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

ここでは、提案docからの全体的なAPIです:

RegExp名前付きグループキャプチャ？

この拡張機能は、PythonやJavaなどの他の言語から”名前付きグループ”と呼ばれる便利な正規表現機能をもたらします。”この機能により、正規表現を書く開発者は、正規表現のグループのさまざまな部分に対して(?<name>...)の形式で名前（識別子）を提供することができます。 その後、その名前を使用して、必要なグループを簡単に取得できます。

4.1基本的な名前付きグループの例

4.2正規表現自体

内の名前付きグループを使用する\k<group name>形式を使用して、正規表現自体内のグループをバック参照できます。 次の例は、どのように動作するかを示しています。

4.3 文字列で名前付きグループを使用します。プロトタイプ。replace

名前付きグループ機能がStringのreplaceインスタンスメソッドにベイクされました。 だから我々は簡単に文字列内の単語を交換することができます。

たとえば、”firstName,lastName”を”lastName,firstName”に変更します。

オブジェクトのRestプロパティ

Rest演算子...（3つのドット）で正規表現の名前付きグループ機能を使用すると、まだ抽出されていないオ

5.1restを使用して、必要なプロパティのみを抽出することができます

5.2 さらに良いことに、不要なアイテムを削除することができます！ ??

オブジェクトのスプレッドプロパティ

スプレッドプロパティは、3つのドットを持つrestプロパテ

ヒント:スプレッド演算子は等号の右側で使用されます。 残りは等号の左側で使用されます。

RegExp後読みアサーション

これは、正規表現の拡張であり、いくつかの文字列が他の文字列の直前に存在することを確

グループ(?<=…) (疑問符、より小さい、等号)を使用して、肯定的なアサーションを探すことができます。

肯定的なアサーション：単語winning（つまり#winning）の前に#記号が存在することを確認し、正規表現が文字列”winning”だけを返すようにしたいとしましょう。 ここでは、それを書くだろう方法です。

否定的な主張：これらの数字の前に€記号があり、$記号がない行から数字を抽出したいとしましょう。

RegExp Unicodeプロパティエスケープ

さまざまなunicode文字に一致する正規表現を書くのは簡単ではありませんでした。 のようなもの\w , \W , \d etcは英語の文字と数字にのみ一致します。 しかし、ヒンディー語、ギリシャ語などの他の言語の数字はどうですか？

これがUnicodeプロパティエスケープの出番です。 Unicodeは、各シンボル（文字）のメタデータプロパティを追加し、それを使用してさまざまなシンボルをグループ化または特徴付けることが判明しました。

たとえば、Unicodeデータベースは、値がDevanagariのScriptというプロパティと、同じ値がDevanagariのScript_Extensionsという別のプロパティの下で、すべてのヒンディー語文字(हिन्दी)をグループ化します。 だから我々はScript=Devanagariを検索し、すべてのヒンディー語の文字を取得することができます。

Devanagariは、マラーティー語、ヒンディー語、サンスクリット語など、さまざまなインドの言語に使用できます。

ECMAScript2018以降では、\pを使用して文字をエスケープし、{Script=Devanagari}を使用してすべてのインド文字に一致させることができます。 つまり、正規表現で\p{Script=Devanagari}を使用して、すべてのDevanagari文字に一致させることができます。

//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

同様に、Unicodeデータベースでは、Script_Extensions(およびScript)プロパティの下にあるすべてのギリシャ文字を値Greekでグループ化します。 したがって、Script_Extensions=GreekまたはScript=Greekを使用してすべてのギリシャ文字を検索できます。

つまり、正規表現で\p{Script=Greek}を使用して、すべてのギリシャ文字に一致させることができます。

//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

さらに、Unicodeデータベースは、booleanプロパティの下にさまざまな種類の絵文字を格納しますEmoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, プロパティ値を`true`とするEmoji_Modifier_Base。 したがって、Emojiをtrueに選択するだけで、すべての絵文字を検索できます。

つまり、\p{Emoji}、\Emoji_Modifierなどを使用して、さまざまな種類の絵文字を一致させることができます。

次の例はそれをすべて明確にします。

最後に、小さなp（\p）の代わりに大文字の”P”（\P）エスケープ文字を使用して、一致を

1. ECMAScript2018Proposal

Promise.プロトタイプ。最後に()

finally() Promiseに追加された新しいインスタンスメソッドです。 主なアイデアは、resolveまたはrejectの後にコールバックを実行して、物事をきれいにするのを助けることです。 finallyコールバックは値なしで呼び出され、何があっても常に実行されます。

さまざまなケースを見てみましょう。

非同期反復

これは*非常に*便利な機能です。 基本的には、非同期コードのループを簡単に作成することができます！

この機能は、ループ内で約束（または約束の束を持つ配列）を返す非同期関数を呼び出すことを可能にする新しい”for-await-of”ループを追加します。 クールなことは、ループが次のループに実行する前に、各約束が解決するのを待つことです。

それはかなりそれです！

これが役に立ったら、拍手をクリックしてください？ あなたのサポートを表示するには、数回下のボタンダウン！ ⬇⬇⬇ ??

私の他の投稿

1. これらの便利なECMAScript2015(ES6)のヒントとトリックをチェックしてください
2. 5Es6で修正されているJavaScriptの”悪い”部分
3. ES6の”クラス”は新しい”悪い”部分ですか？