JavaScript ES6は、コードをより現代的で読みやすくするための新しい構文と新しい素晴らしい機能をもたらします。 できる書以下のコード配信させていただきます。. ES6では、矢印関数、テンプレート文字列、クラス破壊、モジュールなど、多くの優れた機能が紹介されています。 見てみよう

const and let

constは、変数を宣言するためのES6の新しいキーワードです。 constはvarよりも強力です。 一度使用すると、変数を再割り当てすることはできません。, 言い換えれば、オブジェクトと一緒に使用される場合を除いて、不変の変数です。

これはセレクタをターゲットにするのに本当に便利です。 たとえば、イベントを発生させる単一のボタンがある場合、またはJavaScriptでHTML要素を選択する場合は、varの代わりにconst これは、varが”吊り上げられている”ためです。 変数を再割り当てしたくない場合は、常にconstを使用することをお勧めします。,

上記のコードでは、constは変更されず、再割り当てすることはできません。 あなたがそれに新しい値を与えようとすると、それはあなたにエラーを返します。

let再割り当てして新しい値を取ることができます。 可変変数を作成します。

letと同じですconst両方がブロックスコープであるという点で。 これは、変数がその範囲内でのみ使用可能であることを意味します。,

矢印関数

矢印関数は本当に素晴らしいです、そしてあなたのコードをより読みやすく、より構造化され、そして現代のコードのように見えます。 これを使用する代わりに：

これを使用してください：

あなたが見るように、矢印関数はより読みやすく、きれいに見えます！ 古い構文を使用する必要はもうありません。

また、map、filter、およびreduce組み込み関数で矢印関数を使用できます。,

矢印を持つマップ関数は、ES5のmapよりもはっきりと読みやすく見えます。 とES6きは短く、スマートなコードです。 同じものをfilterおよびreduceで使用できます。

テンプレートリテラル

テンプレートリテラルまたはテンプレート文字列はかなりクールです。 文字列を連結するためにプラス（+）演算子を使用する必要はありませんし、文字列内で変数を使用する場合もあります。,

古い構文：

新しいES6構文で：

だからシンプル！ これは、古い構文とES6の本当に大きな違いです。 文字列で遊ぶとき、ES6のリテラル文字列はES5よりも組織化され、よく構造化されています。

デフォルトのパラメータ

私はPHPで作業するとき、私は通常、デフォルトのパラメータを使用します。 これにより、パラメータを事前に定義できます。,

したがって、パラメータを書き忘れた場合、パラメータは既にデフォルトで定義されているため、未定義のエラーは返されません。 したがって、見逃したパラメーターで関数を実行すると、デフォルトのパラメーターtの値が取得され、エラーは返されません！

この例を見てください：

上記の関数はundefinedを返します。age。,

しかし、デフォルトのパラメータを使用した場合、undefinedは返されず、パラメータを割り当てるのを忘れたときにその値が使用されます！

ご覧のように、関数は第二のパラメータを逃したにもかかわらず値を返します。 これで、デフォルトのパラメータでエラーを事前に処理できます。

配列とオブジェクトの破棄

破棄により、配列またはオブジェクトの値の新しい変数への割り当てが容易になります。,

古い構文：

ES6構文：

ES5では、各変数に各値を割り当てる必要があります。 ES6では、オブジェクトのプロパティを取得するために、値を中かっこ内に入れるだけです。

注：プロパティの名前と同じではない変数を割り当てると、undefinedが返されます。 たとえば、プロパティの名前がnameであり、それをusername変数に割り当てると、undefinedが返されます。,

変数には常にプロパティの名前と同じ名前を付ける必要があります。 しかし、変数の名前を変更したい場合は、代わりにコロン:を使用できます。

配列については、オブジェクトと同じ構文を使用します。 中かっこを角かっこに置き換えるだけです。

インポートとエクスポート

JavaScriptアプリケーションでimportおよび exportを使用すると、より強力になります。, そのボックスをチェックするだけ分離-再利用可能。

JavaScript MVCフレームワークに精通している場合は、importとexportを使用してコンポーネントを処理していることがわかります。 そうそれらはいかに実際に働くか。

それは簡単です！ export別のJavaScriptコンポーネントで使用するモジュールをエクスポートできます。 importを使用して、そのモジュールをインポートしてコンポーネントで使用します。

たとえば、二つのファイルがあります。, 最初の名前はdetailComponent.js、第二の名前はhomeComponent.jsです。

でdetailComponent.js私たちは、detail関数をエクスポートしようとしています。

この関数をhomeComponent.jsで使用する場合は、importを使用します。

複数のモジュールをインポートする場合は、中かっこ内に入れます。,

とてもクールではありませんか？!

Promises

PromisesはES6の新機能です。 非同期コードを記述するメソッドです。 たとえば、APIからデータを取得したい場合や、実行に時間がかかる関数がある場合などに使用できます。 約束は、それが簡単に問題を解決するために作るので、私たちの最初の約束を作成しましょう！

コンソールをログに記録すると、Promiseが返されます。 したがって、データがフェッチされた後に関数を実行したい場合は、Promiseを使用します。, プロミスは、resolveとrejectという二つのパラメータを取り、予期されるエラーを処理します。

注意：fetch関数はPromiseそのものを返します！

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

コンソールをログに記録すると、データの配列が返されます。

Restパラメータとスプレッド演算子

restパラメータは、配列の引数を取得し、新しい配列を返すために使用されます。,

スプレッド演算子はrestパラメータと同じ構文を持ちますが、スプレッド演算子は引数だけでなく配列自体を取ります。 Forループやその他のメソッドを使用する代わりに、Spreadパラメータを使用して配列の値を取得できます。

クラス

クラスは、オブジェクト指向プログラミング(OOP)の中核です。 これらは、コードをより安全でカプセル化します。 クラスを使用してコードが引き出せるようにすることの素敵な構造については、次のとおりであります。,

クラスを作成するには、classキーワードの後に中括弧で囲まれたクラスの名前を使用します。

これで、classnewキーワードを使用してclassメソッドとプロパティにアクセスできます。

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

別のクラスから継承するには、extendsキーワードの後に継承するクラスの名前を使用します。,

クラスの詳細についてはこちらをご覧ください。

ES6には他の素晴らしい機能があります—ここでそれらを探索することができます。

結論

私はあなたたちがこの記事が役に立つことを願っています、そして私はあなたにES6の機能のいくつかを紹介することができたことを願っています。 その場合は、このメールリストを購読して、フロントエンドトピックの詳細を学びます。 お時間ありがとう

ところで、私は最近、私のモバイルアプリケーションの一つのためのソフトウェアエンジニアの強力なグループと協力してきました。, 組織は素晴らしかったし、製品は私が働いてきた他の企業やフリーランサーよりもはるかに速く、非常に迅速に配信され、私は正直にそこに他のプロジェクトのためにそれらをお勧めできると思います。 連絡を取りたい場合は、私にメールを撃つ—[email protected].