キーワードconstおよびlet
ES6では、新しい
const
キーワードが導入されました。これは、いわゆる不変変数または単なる定数の宣言に使用されます。 このような変数は、初期化後に変更できないため、
var
キーワードで宣言された変数とは異なります。 定数自体の値についてのみ話していることに注意してください。たとえば、それがオブジェクトである場合、そのようなオブジェクトの内部構造は変更できます。
const
キーワードを使用すると、セレクターを操作するのに非常に便利です。 たとえば、コードまたは他のHTML要素で動作するイベントをトリガーするボタンがある場合、セレクターが変更されていない場合は、
var
ではなく
const
を使用してJSからアクセスすることをお
const
します予定。
上記の例では、定数に書き込まれた値は変更できません。 新しい値を書き込もうとすると、エラーメッセージが表示されます。
const
キーワードについて言えば、それを使用して宣言された不変変数にはブロックスコープがあることに注意してください。 新しい
let
キーワードで宣言された通常の変数についても同じことが言えます。 そのような変数は、
var
キーワードを使用して宣言されたように再割り当てできますが、
var
変数を上げる現象
var
特徴であり、
let
および
const
を使用して宣言されたものは宣言の前に存在しません。 つまり、たとえば、宣言した後で
let
で宣言した変数にのみアクセスできます。
矢印関数
矢印関数は素晴らしい機能です。 これらは読みやすさを向上させ、コードの構造に有益な効果をもたらし、プログラムをより現代的に見せます。 ES5の機能の使用方法は次のとおりです。
そして、ここに最新のオプションがあります。
新しい構文のおかげで、中括弧と
return
キーワードの使用を拒否できることに注意してください。 新しいコードは読みやすく、見た目もきれいです。
さらに、組み込みの
map
、
filter
および
reduce
関数で矢印関数を使用
reduce
ます。
arrow関数が渡される
map
関数のコードは、ES5によって作成された同様のコードよりもクリーンで読みやすいように見えます。 同じことが
filter
機能と
reduce
機能にも当てはまります。 コードは短く、作業するのに便利です。
テンプレートリテラル
テンプレートリテラル、またはテンプレート文字列は非常に興味深い機能です。 これで、文字列を連結するために
+
演算子を使用する必要がなくなり、変数を使用して文字列を組み立てる必要がなくなりました。 これが以前の外観です。
これが今あるものです。
新しい方法では、はるかに簡単になります。 私たちの前にあるのは、古い構文とES6の非常に大きな違いです。 ES6の新機能により、文字列の処理がより整理され、対応するコードフラグメントの構造が改善されます。
デフォルトの関数パラメーター
この資料の著者は、PHPで記述するとき、通常はデフォルトの関数パラメーターを使用すると述べています。 これにより、事前に関数のいくつかのパラメーターを設定できます。 その結果、関数を呼び出すときにパラメーターを指定しない場合、パラメーターは
undefined
にはならず、代わりにデフォルト値が使用されます。
デフォルトのパラメーターが使用されていない例を考えてみましょう。
ご覧のとおり、
age
パラメーターを関数に渡すのを忘れたため、関数の出力に
undefined
が表示されます。 ただし、デフォルトのパラメーターを使用する場合、
undefined
は関数によって生成された出力に表示されません。
ご覧のとおり、関数は、2番目のパラメーターが呼び出されたときに渡されない場合でも、
undefined
値なしで文字列を返します。 デフォルトのパラメータを使用すると、非標準の関数呼び出しの状況を予測できます。
配列とオブジェクトの破壊
構造化により、配列またはオブジェクトに保存されている個々の値を新しい変数に割り当てる操作が簡単になります。 以前はどのように実行できたでしょうか。
ES6でも同じことが行われます。
ES5を使用して、個々の値を各変数に割り当てる必要がありました。 ES6の機能のおかげで、オブジェクトの個々の値を抽出するには、変数名を中括弧で囲むだけで十分です。
そのような中括弧付きの設計で、オブジェクトのプロパティ名に対応しない変数の名前がある場合、値は
undefined
なることに注意してください。 たとえば、オブジェクトのプロパティの
name
が
name
、このプロパティの値を
username
変数に割り当てようとすると、何も機能せず、この変数は値
undefined
を取得します。 変数は常にオブジェクトプロパティと同じ方法で名前を付ける必要があります。 別の名前の変数を使用する場合は、最初にオブジェクトのプロパティ名に対応する変数名、次にコロン、最後に新しい変数名が来る構成を使用する必要があります。 こんな感じです。
配列の場合、同様の構文が使用されます。 中括弧のみを角括弧で置き換える必要があります。
ステートメントのインポートとエクスポート
JSアプリケーションで
import
および
export
ステートメントを使用すると、その機能が拡張されます。 プログラマーは、再利用に適したスタンドアロンコンポーネントを作成できます。
JavaScript用のMVCフレームワークに精通している場合は、ほとんどの場合、コンポーネントで作業するために
import
ステートメントと
export
ステートメントを使用することを既に知っています。 これはどのように機能しますか？ 実際、非常に簡単です。
export
使用すると、他のJavaScriptコンポーネントで使用できるモジュールをエクスポートできます。
import
そのようなモジュールをインポートするために使用されます。
detailComponent.js
と
homeComponent.js
という2つのファイルがあるとします。
ファイル
detailComponent.js
で、
detail
関数をエクスポートします。 方法は次のとおりです。
ここで、
homeComponent.js
でこの関数を使用する必要がある場合、
import
ステートメントが役立ちます。
複数のモジュールをインポートする必要がある場合は、中かっこでリストできます。
約束
PromiseはES6の新機能の1つです。 これは、非同期コードを記述するためのアプローチです。 たとえば、特定のAPIからデータをロードする必要がある場合や、完了するまでに時間がかかる関数がある場合に使用できます。 約束はそのような問題の解決を簡素化します。 それらを使用する方法は次のとおりです。
ここでは、約束を記録しようとしたときにコンソールに入るものが示されています。
たとえば、ロードに時間がかかるデータを受信した後に何らかの機能を実行する必要がある場合は、promiseを使用できます。 Promisは、
resolve
と
reject
2つのパラメーターを受け入れます。 1つ目はプロミスを正常に解決するために使用され、2つ目は予想されるエラーを処理するために使用されます。 次の例では、
fetch
関数自体がプロミスを返すことに注意してください。
const url='https://jsonplaceholder.typicode.com/posts'; const getData=(url)=>{ return fetch(url); } getData(url). then(data=> data.json()). then(result=> console.log(result));
この場合、
console.log
呼び出すと、配列がコンソールに出力されます。
残りの構文および拡張演算子
残りのパラメーターの構文は、引数として無制限のセットを配列として表すために使用されます 。 以下に使用例を示します。
拡張演算子は、残りのパラメーターの構文を使用するのと似ていますが、次の例に示すように、配列を操作し、その値を抽出することができます。そうでなければ、
for
ループまたは他のメソッドを使用して抽出する必要があります。
クラス
クラスは、オブジェクト指向プログラミングの基本概念の1つです。 コードの構造を改善し、より安全にすることができます。
クラスを宣言するには、
class
キーワードを使用し、その後にクラス名と中括弧のペアを使用できます。
これで、クラスに基づいて、
new
キーワードを使用して
new
オブジェクトを作成できます。
class myClass{ constructor(name,age){ this.name=name; this.age=age; } } const Home= new myClass("said",20); console.log(Home.name)// said
クラスは継承メカニズムをサポートします。 これを使用するには、
extends
使用し
extends
。その後に、継承元のクラスの名前を示します。
JavaScriptのクラスの詳細については、こちらをご覧ください。
まとめ
この資料が、ES6の可能性の中から、実際の作業に役立つ新しい何かを発見するのに役立つことを願っています。 ところで、ES6のすべての革新がここで説明されているわけではありません。 ここではるかに広範なリストを参照してください。 さらに、新しいJavaScript機能のトピックに興味がある場合は、 こちら 、 こちら 、およびこちらがこのトピックに関する出版物の一部です。
親愛なる読者！ ES6の新機能を適用することで、以前と同じ問題を、より簡単で明確で読みやすいコードを使用して解決できるという考えを示す実用的な例を挙げていただけますか？
