ECMAScript 2019(ES2019)/ES10の新機能
ECMAScript (略してES)は、ECMAInternationalによってECMA-262およびISO/IEC16262で標準化されたスクリプト言語仕様です。 これは、JavaScript言語を標準化して、ブラウザーベンダーからの複数の独立した標準実装を促進するために作成されました。 それは新しい機能で毎年進化します。
ECMAScript仕様の2019年版では、多くの新機能が追加されました。ここでは、これらの新機能のいくつかについて説明します。 私は個人的に、javaScriptが定期的に進化し改善し続ける方法が大好きです。
Array.flat()
Array.flat()
は、サブ配列がフラット化された新しい配列を返します。 引数なしでArray.flat()
を呼び出すと、1レベルの深さしか平坦化されません。 オプションのdepth引数を指定することも、連続して呼び出すこともできます。
例:
let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];
arr.flat(); // [1, 2, 3, 4, 5, 6, Array(4)];
arr.flat().flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)];
arr.flat(3); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
// Or, if you're not sure about the depth of the array:
arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
Array.flatMap()
flatMap()
メソッドはES6マップメソッドと同じですが、同時にフラット化されます。 flatMap()
メソッドは、最初にマッピング関数を使用して各要素をマッピングし、次に結果を新しい配列にフラット化します。 flatMap()
は、両方を1つのメソッドにマージする方がわずかに効率的であるため、非常に便利なことがよくあります。
例:
let arr = [1, 2, 3, 4, 5];
arr.map(x => [x, x * 2]);
// [Array(2), Array(2), Array(2)]
// 0: (2)[1, 2]
// 1: (2)[2, 4]
// 2: (2)[3, 6]
arr.flatMap(v => [v, v * 2]);
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
String.trimStart()&String.trimEnd()
String.trimStart()
は、文字列の先頭から空白を削除するために使用できます。
例:
let greeting = " Hello everyone";
console.log(greeting.trimStart());
// "Hello everyone"
let greeting = "Hello world ";
console.log(greeting.trimEnd());
// "Hello world"
オプションのキャッチバインディング
オプションのcatchバインディングを使用すると、開発者はcatchブロック内のエラーパラメーターなしでtry/catchを使用できます。
例:
ES2019より前は、次のものを使用します。
try {
// some code
}
catch (err) {
// error handling code
}
これで、ES2019で次のようにtry/catchを使用できます。
try {
// some code
}
catch {
// error handling code
}
Object.fromEntries()
オブジェクトを作成するか、キーと値のペアをオブジェクトに変換します。 iterables のみを受け入れます。例:Object.fromEntries(someIterable)
。
例:
let entries = new Map([["name", "john"], ["age", 22]]);
console.log(Object.fromEntries(entries));
// { name: 'john', age: 22 }
Symbol.description
読み取り専用のdescriptionプロパティは、Symbolオブジェクトのオプションの説明を返す文字列です。
例:
let mySymbol = `My Symbol`;
let symObj = Symbol(mySymbol);
console.log(symObj) // Symbol(mySymbol);
console.log(String(symObj) === `Symbol(${mySymbol})`); // true
console.log(symObj.description); // "My Symbol"