ES10 の 5 つの新機能

今年、ECMAScript 2019 (略して ES2019) がリリースされます。新機能には、Object.fromEntries()、trimStart()、trimEnd()、 flat()、 flatMap()、シンボル オブジェクトの description 属性、オプションのキャッチ バインディングなどが含まれます。

1、Object.fromEntries()

JavaScript では、データをある形式から別の形式に変換します。非常に一般的です。オブジェクトを配列に変換しやすくするために、ES2017 では Object.entrie() メソッドが導入されました。このメソッドはオブジェクトをパラメータとして受け取り、オブジェクト独自の列挙可能な文字列とキーを持つプロパティのペアの配列を [key, value] の形式で返します。例:

const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]

しかし、逆のことをして、キーと値のペアのリストをオブジェクトに変換したい場合はどうすればよいでしょうか? Python などの一部のプログラミング言語では、この目的のために dict() 関数が提供されています。 Underscore.js と Lodash には _.fromPairs 関数もあります。

ES2019 では、JavaScript に同様の機能をもたらす Object.fromEntries() メソッドが導入されました。この静的メソッドを使用すると、キーと値のペアのリストをオブジェクトに簡単に変換できます:

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

As youご覧のとおり、Object.fromEntries() は Object.entries() の逆のことを行います。以前は Object.fromEntries() と同じ機能を実装することができましたが、その実装方法はやや複雑でした。

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const Array.from(myArray).reduce((acc, [key, val]) 
=> Object.assign(acc, {[key]: val}), {})

console.log(obj);    // => {one: 1, two: 2, three: 3}

Object.fromEntries() に渡される引数は、以下を実装する任意のオブジェクトであることに注意してください。反復可能なプロトコル。2 要素の配列のようなオブジェクトを返す限り。

たとえば、次のコードでは、Object.fromEntries() は Map オブジェクトをパラメータとして受け取り、キーと対応する値が Map 内のペアによって与えられる新しいオブジェクトを作成します。

const map = new Map();
map.set('one', 1);
map.set('two', 2);

const obj = Object.fromEntries(map);

console.log(obj);    // => {one: 1, two: 2}

Object.fromEntries() メソッドは、オブジェクトの変換にも非常に便利です。次のコードを検討してください。

const obj = {a: 4, b: 9, c: 16};

// 将对象转换为数组
const arr = Object.entries(obj);

// 计算数字的平方根
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);

// 将数组转换回对象
const obj2 = Object.fromEntries(map);

console.log(obj2);  // => {a: 2, b: 3, c: 4}

上記のコードは、オブジェクトの値を平方根に変換します。これを行うには、まずオブジェクトを配列に変換し、次に、map() メソッドを使用して配列内の値の平方根を取得し、その結果、オブジェクトに再変換できる配列が得られます。

この例に示すように、Object.fromEntries() を使用するもう 1 つのケースは、URL のクエリ文字列を処理することです。

const paramsString = 'param1=foo&param2=baz';
const searchParams = new URLSearchParams(paramsString);

Object.fromEntries(searchParams);    // => {param1: "foo", param2: "baz"}

このコードでは、クエリ文字列は URLSearchParams( ) コンストラクター。戻り値 (つまり、URLSearchParams オブジェクト インスタンス) は Object.fromEntries() メソッドに渡され、その結果は各パラメーターをプロパティとして含むオブジェクトになります。

Object.fromEntries() メソッドは現在ステージ 4 の提案であり、ES2019 標準に組み込む準備ができていることを意味します。

2. trimStart() および trimEnd()

trimStart() メソッドおよび TrimEnd() メソッドは、trimLeft() および TrimRight() と同じように実装されます。これらのメソッドは現在フェーズ 4 にあり、padStart() および PadEnd() との一貫性を保つために仕様に追加される予定です。いくつかの例を見てください:

const str = "   string   ";

// es2019
console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

// 相同结果
console.log(str.trimLeft());     // => "string   "
console.log(str.trimRight());    // => "   string"

Web 互換性のために、trimLeft() および trimRight( ) は、trimStart() および trimEnd() のエイリアスとして残ります。

3. flat() と flatMap()

flat() メソッドは、多次元配列を 1 次元配列にフラット化できます

const arr = ['a', 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

以前は、多次元配列を平坦化するために、reduce() または concat() をよく使用していました:

const arr = ['a', 'b', ['c', 'd']];
const flattend = [].concat.apply([], arr);

// or
// const flattened =  [].concat(...arr);

console.log(flattened);    // => ["a", "b", "c", "d"]

提供された配列に null 値がある場合、それらは破棄されることに注意してください:

const arr = ['a', , , 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

flat() ネストされた配列を平坦化するレベルの数を指定するオプションのパラメーターも受け入れます。引数が指定されない場合は、デフォルト値の 1 が使用されます。

const arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]

flatMap() メソッドは、map() と flat() を 1 つのメソッドに結合します。まず、提供された関数の戻り値を使用して新しい配列を作成し、次にその配列のすべてのサブ配列要素を連結します。以下に例を示します:

const arr = [4.25, 19.99, 25.5];

console.log(arr.map(value => [Math.round(value)]));    
// => [[4], [20], [26]]

console.log(arr.flatMap(value => [Math.round(value)]));    
// => [4, 20, 26]

配列は深さレベル 1 に平坦化されます。結果から項目を削除したい場合は、空の配列を返すだけです:

const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]];

// do not include items bigger than 9
arr.flatMap(value => {
  if (value >= 10) {
    return [];
  } else {
    return Math.round(value);
  }
});  

// returns:
// => [7, 8, 9]

現在の配列を除く処理中の要素 さらに、コールバック関数は要素のインデックスと配列自体への参照を受け取ります。 flat() メソッドと flatMap() メソッドは現在ステージ 4 にあります。

4. Symbol オブジェクトの description 属性

シンボルを作成するときに、デバッグ目的で説明 (説明) を追加できます。コード内の説明に直接アクセスできると便利な場合があります。

ES2019 は、読み取り専用の属性説明を Symbol オブジェクトに追加し、シンボルの説明を含む文字列を返します。

let sym = Symbol('foo');
console.log(sym.description);    // => foo

sym = Symbol();
console.log(sym.description);    // => undefined

// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description);    // => bar

5. オプションの catch

try catch ステートメントの catch は役に立たない場合があります。次のコードについて考えてください:

try {
  // 使用浏览器可能尚未实现的功能
} catch (unused) {
  // 这里回调函数中已经帮我们处理好的错误
}

このコードcatch コールバック内の情報は役に立ちません。ただし、SyntaxError エラーを避けるためにこのように書かれています。 ES2019 では、catch の周りの括弧を省略できます:

try {
  // ...
} catch {
  // ....
}

また: ES2020 の String.prototype.matchAll

matchAll() メソッドは ES2020 フェーズ 4 の提案であり、正規表現 ( Iterator オブジェクト) に一致するものをすべて返します。捕獲グループを含む）。

match() メソッドとの一貫性を保つために、TC39 は、「matches」や Ruby の「scan」など、他の提案された名前の代わりに「matchAll」を選択しました。簡単な例を考えてみましょう。

const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);

for (const match of matches) {
  console.log(match);
}

// logs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

この正規表現のキャプチャ グループは、「Dr」の後にドットとスペースが続く文字と一致します。 \w は、任意の単語文字に 1 回以上一致します。また、g フラグは、文字列全体でパターンを検索するようにエンジンに指示します。

以前は、同じ結果を得るためにループ内で exec() メソッドを使用する必要があり、あまり効率的ではありませんでした。

const re = /(Dr\.) \w+/g;
const str = 'Dr. Smith and Dr. Anderson';
let matches;

while ((matches = re.exec(str)) !== null) {
  console.log(matches);
}

// logs:
// => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

重要的是要注意尽管match() 方法可以与全局标志g一起使用来访问所有匹配，但它不提供匹配的捕获组或索引位置。 比较以下代码：

const re = /page (\d+)/g;
const str = 'page 2 and page 10';

console.log(str.match(re));    
// => ["page 2", "page 10"]

console.log(...str.matchAll(re)); 
// => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined] 
// => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]

总结

在这篇文章中，我们仔细研究了 ES2019 中引入的几个关键特性，包括Object.fromEntries()，trimStart(), trimEnd(), flat(), flatMap()，symbol 对象的description 属性以及可选的catch 。

更多相关知识请关注JavaScript视频教程栏目

以上がES10 の 5 つの新機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。