EcmaScript仕様第8版の新機能

EcmaScript 8またはEcmaScript 2017は、TC39によって6月末に公式にリリースされました。

ストリング埋め込み

このセクションでは、StringオブジェクトにpadStartとpadEndという2つの関数を追加します。
これらの関数の目的は文字列の先頭または末尾を埋めて、結果の文字列が所定の長さになるようにすることです。デフォルトでは、特定の文字や文字列で埋めたり、スペースで埋めたりできます。関数の宣言は次のとおりです。

str.padStart(targetLength [、padString])
str.padEnd(targetLength [、padString])

ご覧のように、これらの関数の最初のパラメータtargetLengthは、結果の文字列の合計の長さです。2番目のパラメータはオプションです。padStringこれは、ソース文字列を埋め込む文字列です。デフォルト値はスペースです。

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5); // ' es8'
'es8'.padStart(6, 'woof'); // 'wooes8'
'es8'.padStart(14, 'wow'); // 'wowwowwowwoes8'
'es8'.padStart(7, '0'); // '0000es8'
'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5); // 'es8 '
'es8'.padEnd(6, 'woof'); // 'es8woo'
'es8'.padEnd(14, 'wow'); // 'es8wowwowwowwo'
'es8'.padEnd(7, '6'); // 'es86666'
 
ブラウザサポート(MDN)

Object.valuesおよびObject.entries

このObject.valuesメソッドは、for inループによって提供される順序と同じ順序で、指定されたオブジェクト自身の列挙可能なプロパティ値の配列を返します。関数の宣言は簡単です:

Object.values(obj)

obj パラメータは、動作のためにソースオブジェクトです。これはオブジェクトまたは配列([10,20,30] - > {0:10,1:20,2:30}のようなインデックスを持つオブジェクト)です。

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

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

// when we use numeric keys, the values returned in a numerical
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']
 
Object.valuesのブラウザサポート(MDN)

このObject.entriesメソッドは、指定されたオブジェクト自身の列挙可能なプロパティの[key, value]ペアの配列を、同じ順序で返しますObject.values。関数の宣言は簡単です:

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

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

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]
 
Object.entriesのブラウザサポート(MDN)

Object.getOwnPropertyDescriptors

このgetOwnPropertyDescriptorsメソッドは、指定されたオブジェクトの独自のプロパティ記述子を返します。独自のプロパティ記述子は、オブジェクトに直接定義され、オブジェクトのプロトタイプから継承されないものです。関数の宣言は次のとおりです。

Object.getOwnPropertyDescriptor(obj, prop)

objソースオブジェクトは、取得されるオブジェクトのプロパティ名です。結果のキーは、設定可能、列挙可能、書き込み可能、​​取得、設定、および値です。

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

デスクリプタデータは、デコレータなどの高度な機能にとって非常に重要です。

 
ブラウザサポート(MDN)

関数のパラメータリストとコールの末尾にカンマ

functionパラメータSyntaxErrorの末尾のカンマは、リストの最後に不要なカンマを追加したときにコンパイラがエラー()を発生させないようにする機能です。

関数es8(var1、var2、var3 ){ 
// ...
}

関数の宣言として、これは関数の呼び出しに適用することができます:

es8(10,20,30 );

この機能は、オブジェクトリテラルと配列リテラル[10, 20, 30,]とのコンマの末尾に基づいています{ x: 1, }


非同期関数

このasync function宣言は、AsyncFunctionオブジェクトを返す非同期関数を定義します。内部的には、非同期関数はジェネレータとよく似ていますが、ジェネレータ関数には変換されません。

function fetchTextByPromise() {
return new Promise(resolve => {
setTimeout(() => {
resolve("es8");
}, 2000));
});
}
async function sayHello() { 
const externalFetchedText = await fetchTextByPromise();
console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

の呼び出しは2秒後にログにHello, es8記録されます。

console.log(1);
sayHello();
console.log(2);

プリントは以下の通りです:

1 // immediately
2 // immediately
Hello, es8 // after 2 seconds

これは、関数呼び出しがフローをブロックしないためです。

async function常にpromiseを返し、awaitキーワード asyncキーワードでマークされた関数でのみ使用できることに注意してください。

 
ブラウザサポート(MDN)

共有メモリとアトミック

メモリが共有されると、複数のスレッドがメモリ内の同じデータを読み書きできます。アトミック操作では、予測可能な値が書き込まれ、読み取られ、その操作が次の操作が開始される前に終了し、操作が中断されないことが確認されます。このセクションでは、新しいコンストラクタSharedArrayBufferAtomics静的メソッドを持つ名前空間オブジェクトについて説明します。

AtomicオブジェクトはMathような静的メソッドの目的であるので、コンストラクタとして使用することはできません。このオブジェクトの静的メソッドの例は次のとおりです。

  • add / sub— add / subtract a value for the value at a specific position
  • and / or / xor — bitwise and / bitwise or / bitwise xor
  • load — get the value at a specific position
 
ブラウザサポート(MDN)

来年のES9で1つ - テンプレートのリテラル制限を解除する

タグ付きテンプレートリテラル(ES6)を使用すると、テンプレート解析関数を宣言し、ロジックに従って値を返すような処理を行うことができます:

const esth = 8;
helper`ES ${esth} is `;
function helper(strs, ...keys) {
const str1 = strs[0]; // ES
const str2 = strs[1]; // is
  let additionalPart = '';
if (keys[0] == 8) { // 8
additionalPart = 'awesome';
}
else {
additionalPart = 'good';
}

return `${str1} ${keys[0]} ${str2} ${additionalPart}.`;
}

返される値は→ES 8です。
そしてesth7の場合、返される値は→ES 7です。

しかし、たとえば\ uまたは\ xサブストリングを含むテンプレートには制限があります。ES9はこのエスケープ問題を処理します。MDNのウェブサイトまたはTC39文書で、その詳細をお読みください。

 
ブラウザサポート(MDN)

 

 

引用元:

hackernoon.com