JavaScriptの新しい組み込みメソッドと関数は次のとおりです

過去数年間で、JavaScriptは多くの新しいリリースでリリースされました。それらは、特に構文とそのコアに新しい機能をもたらしました。これらの更新により、JavaScriptがより読みやすく賢くなりました。配列、オブジェクト、文字列の新しいメソッドを紹介します。これらの新しいメソッドは、より少ないコードを記述することで、エレガントで効率的な方法でデータを処理できます。これは、この記事で説明する内容です。

新しいオブジェクトメソッド

オブジェクトは、JavaScriptを強力なプログラミング言語にするものです。オブジェクトを使用すると、さまざまなデータ型をグループ化できます。React、Vue、Angularなどの新しいJavaScriptフレームワークを学びたい場合は、オブジェクトとそのメソッドの使用方法を知っている必要があります。これらのフレームワークは、オブジェクトを使用してユーザー入力を取得および処理します。新しいJavaScriptリリースは、オブジェクトに新しいメソッドをもたらし、オブジェクトをより楽しくします。新しいObjectメソッドは次のとおりです。

object.assign()

Object.assign()メソッドには複数のジョブがあります。オブジェクトをコピーしたり、別のオブジェクトから複製したり、2つ以上のオブジェクトを連結したりできます。

  • 別のオブジェクトから値をコピーします。
  • オブジェクトを新しいオブジェクトに複製する
  • また、最初の引数として2つの空の角かっこを設定することにより、重複するプロパティをObject.assign()とマージできます。

Object.entries()

Object.entries()メソッドは、オブジェクトのキーと値を配列として返します。

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptorsを使用すると、オブジェクトのプロパティ記述子を取得できます。

オブジェクト記述子のプロパティをチェックすることは非常に役立ちます。たとえば、書き込み可能か列挙可能かを確認します。

新しい配列メソッド

新しいJavaScriptリリースでは、配列に新しいメソッドが提供されています。新しい配列メソッドは次のとおりです。

Array.includes()

Array.includes()を使用すると、プロパティが配列に存在するかどうかを確認できます。古いコードと新しい構文(ES6)の違いを確認できます。新しい方法は短く、読みやすくなっています。

Array.find()

Array.find()は、配列内の要素を見つけるのに役立ちます。引数としてコールバック関数を取ります。コールバック関数は、複雑なデータを検索して抽出するためのより多くのオプションを提供します。

探しているプロパティが存在する場合は、見つかった値を返します。それ以外の場合は、undefinedを返します。

Array.findIndex()

Array.findIndex()は、値の代わりに、見つかった要素のインデックスを返します。

Array.values()

この新しいメソッドは、値の配列イテレーターを返すため、forループを実行して配列の各値を抽出できます。

Array.entries()

Array.entries()は、キーと値の両方を配列形式で返します。

Array.from()

Array.from()はES6リリースで導入されました。データに対してmap()関数を実行することにより、複数のことを実行できます。文字列を配列に変換したり、データから新しい配列を作成したりすることもできます。

Array.keys()

名前が示すように、このメソッドは配列のキーを返します。

新しいStringメソッド

新しいJavaScriptリリースでは、新しいStringメソッドが提供されました。新しいStringメソッドは次のとおりです。

String.repeat()

String.repeat()メソッドを使用すると、文字列を繰り返すことができます。

String.includes()

String.includes()はArray.includes()のように機能します。入力した値が存在する場合はブール値を返します。

新しいNumberメソッド

新しいJavaScriptリリースでは、新しいNumberメソッドが提供されました。新しいNumberメソッドは次のとおりです。

Number.isNaN()

このメソッドは、ES6アップデートでリリースされました。渡されたNumber値をチェックし、値がNaNの場合はtrueを返します。それ以外の場合は、falseを返します。このメソッドは、JavaScriptの古典的な関数isNAN()に触発されています。

Number.isInteger()

前のメソッドと同様に、Number.isInteger()は、渡された値が整数であるかどうかを確認します。値が整数の場合はtrueを返し、そうでない場合はfalseを返します。

Number.isSafeInteger()

ユーザーの入力を常に検証して、それが数値であることを確認することをお勧めします。Number.isSafeInteger()は、その番号が安全な番号であるかどうかを確認します。

詳細はこちら

Number.isFinite()

Number.isFinite()は、渡された値が有限数であるかどうかをチェックします。

ブラウザのサポート

新しいNumberメソッドは、OperaMiniとIE-11を除く主要なブラウザでほぼサポートされています。以下の画像にサポートが示されています。

新しい特定のオブジェクト

JavaScriptには、よりパフォーマンスの高いコードを記述できる新しい特定の関数が付属しています。新しい特定のオブジェクトメソッドは次のとおりです。

Proxy()オブジェクト

プロキシはJavaScriptへの優れた追加機能の1つです。コードのカスタム動作を作成します。プロキシを使用すると、次のことを処理できます。

  • ユーザーデータの検証
  • データ修正
  • プロパティルックアップ
  • 割り当て
  • 列挙
  • 関数の呼び出し

プロキシの他の使用法とその方法をここで確認してください。

プロキシを理解するために、2つの例を記述します。

例1:

この例では、ユーザーからデータを取得しながらデータを検証します。未定義のエラーの動作を定義しようとします。

上記の例でわかるように、userInfo.favCarはを返しますundefined。このエラーメッセージを処理したい場合はどうなりますか?エラーのカスタム動作を作成する場合、たとえば、未定義ではなく別のメッセージを表示する場合は、この場合はプロキシを使用できます。

新しいプロキシを定義し、オブジェクトとハンドラーの2つの引数を指定しました。ハンドラーはいくつかの検証コードを実行し、プロパティがオブジェクトに存在するかどうかを確認します。存在する場合はプロパティを返します。それ以外の場合は、定義したメッセージを返しますこれはプロパティルックアップと呼ばれます。

例2:

この例では、setメソッドを使用して、オブジェクト内の特定の値の検証を作成します。

この例では、データ型を検証して、新しいTypeError()を返すことができます。これにより、デバッグがはるかに簡単になります。この役立つ記事でより多くを理解することができます。

ブラウザのサポート

以下に示すように、プロキシはすべての主要なブラウザで非常にうまく機能します。

Set()オブジェクト

SetオブジェクトはJavaScriptの新機能です。これにより、一意の値を保存できます。それはあなたが遊ぶことができるたくさんの方法を持っています。Object.addメソッドを使用すると、オブジェクトに新しいプロパティを追加できます。Object.deleteは、オブジェクトからプロパティを削除します。Object.clearは、オブジェクトからすべてのプロパティをクリアします。以下の例では、オブジェクトメソッドについて説明しています。

Set()オブジェクトの詳細については、こちらをご覧ください。

まとめ

JavaScriptによって導入された新しい組み込みメソッドについて説明しました。これらの新しい優れた機能により、コードで古い構文とメソッドを使用しなくなりました。新しいメソッドを使用すると、熟練したパフォーマンスの高いJavaScriptコードをエレガントな方法で記述できます。

新しいES6構文に関する私の記事もチェックして、JavaScriptのスキルを更新することができます。

TwitterとInstagramで私を見つけることができます

以前の記事:

  • JavaScript ES6 —書き込みを減らし、より多くのことを行う
  • ランディングウェブサイトを構築して、30分でブートストラップ4を学ぶ
  • Angular6とその新機能すべてが3分で説明されます
  • Vue.jsでルーティングを使用してユーザーエクスペリエンスを向上させる方法
  • JavaScriptでHTTPリクエストを行う最も一般的な方法は次のとおりです
  • 20分で最初のAngularアプリを作成する方法を学ぶ