JavaScript ES の驚くべき新機能(4)

最新の ECMAScript バージョン ES15 には、JavaScript 開発者に優れた開発エクスペリエンスを提供するいくつかの新機能が導入されています。これらの機能強化は、更新された Javascript 構文やデータ処理から、セキュリティ、パフォーマンス、開発者の生産性を高めるツールの進歩に至るまで、さまざまな分野に及びます。

1. 配列のグループ化

ES15 で最もエキサイティングな (私の個人的なお気に入りでもある) 機能の 1 つは、Object.groupBy() メソッドです。
この方法により、特定の基準に基づいて配列内の要素をグループ化する方法が簡素化されます。これにより、データ操作がより効率的になり、エラーが発生しにくくなります。

例:

const cities = [
  { name: 'Melbourne', country: 'Australia' },  
  { name: 'Auckland', country: 'New Zealand' },
  { name: 'Sydney', country: 'Australia' },
  { name: 'Brisbane', country: 'Australia' },
  { name: 'Wellington', country: 'New Zealand' }
];

const groupedByCountry = Object.groupBy(cities, fruit => fruit.country);
console.log(groupedByCountry);

// Output:
// {
//   "Australia": [
//       { "name": "Melbourne", "country": "Australia" },
//       { "name": "Sydney", "country": "Australia" },
//       { "name": "Brisbane", "country": "Australia" }
//   ],
//   "New Zealand": [
//       { "name": "Auckland", "country": "New Zealand" },
//       { "name": "Wellington", "country": "New Zealand" }
//   ]
// }

この機能を使用すると、配列のグループ化に従来使用していたカスタム関数やサードパーティ ライブラリの必要性を減らすことができます。

また、この機能を使用すると、意図を直接表現することでコードをより理解しやすく、保守しやすくすることができます

2. パイプライン演算子 (|>)

場合によっては、連鎖プロセスとして複数の関数を使用する必要があります。このようなシナリオでは、パイプライン演算子 (|>) を使用してチェーン プロセスを簡素化できます。

例:

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = 5 |> double |> increment |> square;

// Output: 121

上記の従来の方法は次のとおりです

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = square(increment(double(5)));
console.log(result);

// Output: 121

パイプライン演算子を使用すると、より関数型のプログラミング スタイルを使用できます。そこから、深くネストされた関数呼び出しの複雑さを取り除くことで、コードをより読みやすくすることができます。

3. メソッド連鎖演算子 (?.())

ES15 は、新しいメソッド チェーン オペレーターを導入することにより、オプションのチェーンを拡張します。このメソッド連鎖演算子は、深くネストされたオブジェクトでのメソッド呼び出しの安全性を高めます。

例:

const data = {
  user: {
    getName: () => 'Tim'
  }
};

console.log(data.user?.getName?.());  // Output: 'Alice'
console.log(data.user?.getAge?.());  // Output: undefined

メソッド連鎖演算子 (?.()) を使用すると、null または未定義の可能性のあるオブジェクトのメソッドを安全に呼び出すことができます。これにより、メソッドの呼び出しによって発生する実行時エラーのリスクが軽減されます。

4. Set メソッドの機能強化

ES15 では、union、intersection、difference、symmetricDifference などの新しいメソッドを含め、Set オブジェクトにいくつかの機能強化が導入されています。これらのメソッドは、一般的な集合演算を簡素化します。

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

const unionSet = setA.union(setB);
const differenceSet = setA.difference(setB);
const intersectionSet = setA.intersection(setB);
const symmetricDifferenceSet = setA.symmetricDifference(setB);

console.log(unionSet); // Output: {1, 2, 3, 4, 5}
console.log(differenceSet); // Output: {1, 2}
console.log(intersectionSet); // Output: {3}
console.log(symmetricDifferenceSet); // Output: {1, 2, 4, 5}

• 結合
  Set インスタンスの Union() メソッドは、セットを受け取り、このセットと指定されたセットのいずれかまたは両方に含まれる要素を含む新しいセットを返します。

• 違い
  Set インスタンスのDifference() メソッドは、セットを受け取り、このセット内ではあるが、指定されたセット内には含まれていない要素を含む新しいセットを返します。

• 交差点
  Set インスタンスの Intersection() メソッドは、セットを受け取り、このセットと指定されたセットの両方の要素を含む新しいセットを返します。

• 対称差
  Set インスタンスの metricDifference() メソッドは、セットを受け取り、このセットまたは指定されたセットのいずれかに含まれる要素を含む新しいセットを返します。

5. 強化された JSON モジュール

以前の ECMAScript バージョンでは、開発者はバンドラーまたはローダーに依存して JSON ファイルをインポートしていました。 ES15 では、動的なインポートとスキーマ検証がサポートされるようになりました。これにより、構造化データの操作が容易になり、インポートされたデータが期待される形式に準拠していることが保証されます。

JavaScript モジュールをインポートするのと同じように、JSON データを直接インポートできるようになりました。

例:

const cities = [
  { name: 'Melbourne', country: 'Australia' },  
  { name: 'Auckland', country: 'New Zealand' },
  { name: 'Sydney', country: 'Australia' },
  { name: 'Brisbane', country: 'Australia' },
  { name: 'Wellington', country: 'New Zealand' }
];

const groupedByCountry = Object.groupBy(cities, fruit => fruit.country);
console.log(groupedByCountry);

// Output:
// {
//   "Australia": [
//       { "name": "Melbourne", "country": "Australia" },
//       { "name": "Sydney", "country": "Australia" },
//       { "name": "Brisbane", "country": "Australia" }
//   ],
//   "New Zealand": [
//       { "name": "Auckland", "country": "New Zealand" },
//       { "name": "Wellington", "country": "New Zealand" }
//   ]
// }

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = 5 |> double |> increment |> square;

// Output: 121

ただし、この変更により、JSON をインポートする古い非標準の方法に依存するコード、または特定のビルド ツールが古い動作で構成されている場合、コードが壊れる可能性があります。

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