最新の ES8 機能の概要-jsチュートリアル-php.cn

最新の ES8 機能の概要

巴扎黑

リリース： 2017-07-21 09:59:31

オリジナル

3689 人が閲覧しました

ECMAScript 2017 (ES8) の機能概要は ES8 のリリースからまとめられており、その主な新機能は著者の「最新の JavaScript 開発: 構文の基礎と実践的なスキル」シリーズの記事にまとめられています。毎週のフロントエンドもフォローしてください。リストシリーズを使用して直接情報を入手します。

ECMAScript 2017 または ES8 は、2017 年 6 月末に TC39 によって正式にリリースされました。ここで完全版を参照できます。ES8 の代表的な機能には、文字列の埋め込み、オブジェクト値のトラバーサル、オブジェクト属性記述子の取得、トレーリングなどがあります。関数パラメータのリストと呼び出し、非同期関数、共有メモリとアトミック操作などのカンマ。

文字列埋め込み

ES8 には、padStart と PadEnd という組み込みの文字列埋め込み関数が追加されました。この関数は、開発者が文字列の先頭または末尾を埋めることで、文字列が固定長に達するようにすることができます。関数は次のように宣言されます:

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

ログイン後にコピー

上に示すように、関数の最初のパラメータは、最終的に生成される文字列の長さであるターゲット長です。2 番目のパラメータは、指定されたパディング文字列です。

&#39;es8&#39;.padStart(2);          // &#39;es8&#39;
&#39;es8&#39;.padStart(5);          // &#39;  es8&#39;
&#39;es8&#39;.padStart(6, &#39;woof&#39;);  // &#39;wooes8&#39;
&#39;es8&#39;.padStart(14, &#39;wow&#39;);  // &#39;wowwowwowwoes8&#39;
&#39;es8&#39;.padStart(7, &#39;0&#39;);     // &#39;0000es8&#39;
&#39;es8&#39;.padEnd(2);          // &#39;es8&#39;
&#39;es8&#39;.padEnd(5);          // &#39;es8  &#39;
&#39;es8&#39;.padEnd(6, &#39;woof&#39;);  // &#39;es8woo&#39;
&#39;es8&#39;.padEnd(14, &#39;wow&#39;);  // &#39;es8wowwowwowwo&#39;
&#39;es8&#39;.padEnd(7, &#39;6&#39;);     // &#39;es86666&#39;

ログイン後にコピー

オブジェクト値トラバーサル

Object.values 関数は、指定されたオブジェクトの列挙可能な属性値の配列を返します。配列内の値の順序は for-in ループと一致します。関数宣言は次のとおりです:

Object.values(obj)

ログイン後にコピー

最初のパラメータ obj は、オブジェクトまたは配列にすることができます (配列はキーが添字であるオブジェクトと見なすことができます)。

const obj = { x: &#39;xxx&#39;, y: 1 };
Object.values(obj); // [&#39;xxx&#39;, 1]

const obj = [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;]; // same as { 0: &#39;e&#39;, 1: &#39;s&#39;, 2: &#39;8&#39; };
Object.values(obj); // [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;]

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: &#39;xxx&#39;, 1: &#39;yyy&#39;, 3: &#39;zzz&#39; };
Object.values(obj); // [&#39;yyy&#39;, &#39;zzz&#39;, &#39;xxx&#39;]
Object.values(&#39;es8&#39;); // [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;]

ログイン後にコピー

 Object.entries メソッドは、列挙可能なプロパティと値を 2 次元配列の形式で返します。配列内の順序は Object.values の宣言と使用法と一致します。この関数は次のとおりです: 

const obj = { x: &#39;xxx&#39;, y: 1 };
Object.entries(obj); // [[&#39;x&#39;, &#39;xxx&#39;], [&#39;y&#39;, 1]]

const obj = [&#39;e&#39;, &#39;s&#39;, &#39;8&#39;];
Object.entries(obj); // [[&#39;0&#39;, &#39;e&#39;], [&#39;1&#39;, &#39;s&#39;], [&#39;2&#39;, &#39;8&#39;]]

const obj = { 10: &#39;xxx&#39;, 1: &#39;yyy&#39;, 3: &#39;zzz&#39; };
Object.entries(obj); // [[&#39;1&#39;, &#39;yyy&#39;], [&#39;3&#39;, &#39;zzz&#39;], [&#39;10&#39;: &#39;xxx&#39;]]
Object.entries(&#39;es8&#39;); // [[&#39;0&#39;, &#39;e&#39;], [&#39;1&#39;, &#39;s&#39;], [&#39;2&#39;, &#39;8&#39;]]

ログイン後にコピー

オブジェクトのプロパティ記述子を取得します

getOwnPropertyDescriptors 関数指定されたオブジェクトの指定された属性の記述子を返します。属性はプロトタイプから継承されるのではなく、オブジェクト自体によって定義される必要があります。関数の宣言は次のとおりです:

Object.getOwnPropertyDescriptor(obj, prop)

ログイン後にコピー

obj はソースオブジェクトであり、prop は表示する必要があるものです結果に含まれるキーは、設定可能、列挙可能、書き込み可能、取得、設定、および値です。。

const obj = { get es8() { return 888; } };
Object.getOwnPropertyDescriptor(obj, &#39;es8&#39;);
// {
//   configurable: true,
//   enumerable: true,
//   get: function es8(){}, //the getter function
//   set: undefined
// }

ログイン後にコピー

関数パラメータリストと呼び出しの末尾のカンマ

この機能を使用すると、エラーを報告せずに関数を定義または呼び出すときに末尾のカンマを追加できます:

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);

ログイン後にコピー

非同期関数

はES8で許可されています非同期関数を定義して実行するための async/await 構文では、async キーワードは AsyncFunction オブジェクトを返します。内部実装では、非同期関数とイテレーターの実装原則は似ていますが、イテレーター関数には変換されません。

共有メモリとアトミック操作

 共有メモリを使用すると、複数のスレッドが同時にデータの読み取りと書き込みを行うことができ、アトミック操作により同時実行制御が可能になり、複数の競合するスレッドの順次実行が保証されます。このセクションでは、新しいコンストラクター SharedArrayBuffer と、静的メソッドを含む名前空間オブジェクト Atomics を紹介します。 Atomic オブジェクトは Math に似ています。そのインスタンスを直接作成することはできませんが、提供される静的メソッドのみを使用できます: 