ES6標準は、新しい構文構造と素晴らしい機能をJavaScript開発の世界にもたらしました。これにより、とりわけ、プログラムテキストの可読性が向上し、より簡潔で表現力が向上します。 これにより、開発者は以前と同じ問題を解決し、より少ないコードを記述できます。 「私たちは書く量を減らして、より多くのことをやる」という考えは、ES6の可能性を探求するために、今日私たちが翻訳している資料の著者にインスピレーションを与えました。 特に、ここで彼はES5とES6を比較し、新しいデザインを実際に使用するためのオプションを検討します。
キーワード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)
クラスは継承メカニズムをサポートします。 これを使用するには、
extends使用し
extends 。その後に、継承元のクラスの名前を示します。
JavaScriptのクラスの詳細については、こちらをご覧ください。
まとめ
この資料が、ES6の可能性の中から、実際の作業に役立つ新しい何かを発見するのに役立つことを願っています。 ところで、ES6のすべての革新がここで説明されているわけではありません。
ここではるかに広範なリストを参照してください。 さらに、新しいJavaScript機能のトピックに興味がある場合は、
こちら 、
こちら 、および
こちらがこのトピックに関する出版物の一部です。
親愛なる読者！ ES6の新機能を適用することで、以前と同じ問題を、より簡単で明確で読みやすいコードを使用して解決できるという考えを示す実用的な例を挙げていただけますか？
