

もES6仕様ではない超新についていえば、多くの開発者はまだいないャ馴染みます。, 主な理由は、おそらく仕様リリース直後のwebブラウザでのサポートが不十分です。 現在、仕様は2歳以上であり、最新のwebブラウザの多くはES6でうまく動作します。 あなた(またはあなたのクライアント)が最新バージョンのwebブラウザを使用しない場合でも、アプリケーションのビルドプロセス中にES6ソースをES5ソースに変換するトランスパイラ(Babelなど)を使用できます。 それは一歩前進し、ES6を学ぶ時間についてであることを意味します。
この記事では、最も便利な機能を簡潔に紹介しようとします。, チュートリアルの後、基本的なスキルを持ち、実際のプロジェクトでそれらを適用することができます。 ガイドやドキュメントとして扱わないでください。 私の目標は、あなたがより深く掘り下げてES6に精通することを奨励することです。
constそしてletキーワード
constあなたが定数を定義することができます(最後に!). letを使用すると、変数を定義できます。 それは素晴らしいことですが、JavaScriptにはすでに変数がありませんか? はい、それは本当ですが、varによって宣言された変数は関数スコープを持ち、先頭に掲げられます。 これは、変数が宣言される前に変数を使用できることを意味します。, 変数と定数がブロックスコープ({}で囲まれている)を持ち、宣言の前に使用できないようにします。
配列ヘルパー関数
新しいクールなヘルパー関数が登場しました。 どのようになりを実装するロジックのようにフィルタリングを確認する場合はすべての要素を満たす条件は、要素ださい。) おそらく非常に頻繁に。 現在でも言語の機能にどのレベルにおまかせください。, ここでは、私の意見では、最も価値のある関数です:
forEach
配列の各要素に対して提供された関数を実行し、配列要素を引数として渡します。
map
同じ数の要素を含む新しい配列を作成しますが、出力要素は提供された関数によって作成されます。 各配列要素を他のものに変換するだけです。,
filter
元の配列のサブセットを含む新しい配列を作成します。 結果には、提供された関数によって実装されたテストに合格するこれらの要素があり、trueまたはfalseを返すはずです。
find
提供された関数によって実装されたテストに合格した最初の要素を検索します。,
every
配列のすべての要素が提供された関数によって実装されたテストに合格したかどうかをチェックします。trueまたはfalseを返す必要があります。
some
配列のいずれかの要素が、提供された関数によって実装されたテストに合格したかどうかをチェックします。trueまたはfalseを返す必要があります。,
reduce
最初のパラメータとして渡された関数を、アキュムレータおよび配列内の各要素(左から右へ)に対して適用し、単一の値に減らします。 アキュムレータの初期値は、reduce関数の二番目のパラメータとして指定する必要があります。
矢印関数
(前述の合計または積のような)非常に単純な関数の実装は、定型文の多くを書く必要があります。, それに対する救済策はありますか? はい、矢印機能を試してみてください!
矢印関数はインラインでも使用できます。 それは本当にコードを簡素化します:
矢印関数はより複雑で、多くのコード行を持つこともできます:
classes
jsプロジェクトに切り替えるときにどのjava開発者がクラスを見逃さないのですか?, プロトタイプ継承のための魔法のコードを書くのではなく、Java言語のように明示的な継承が好きではない人はいますか? 一部のJS開発者は不満を抱いていましたが、ES6ではクラスが導入されました。 彼らは継承の概念を変えません。 それらはプロトタイプ継承のための単なる構文的な砂糖です。
拡張オブジェクトリテラル
オブジェクトリテラルが強化されました。, 今、私たちははるかに簡単にすることができます:
- 同じ名前の変数割り当てでフィールドを定義します
- 関数を定義します
- 動的(計算された)プロパティを定義します
テンプレート文字列
大きな文字列と変数の連結を書くのが大好きですか? 私たちの少数派を信じています。 誰がそれを読むのが嫌いですか? きっとみんな 幸いなことに、ES6を紹介しても使いやすい文字列テンプレートプレースホルダーのための変数です。,
複数行のテキストを書くことができることに注意してください。
重要:テキストを折り返すには、アポストロフィの代わりにバッククィックを使用します。
デフォルトの関数引数
可能なすべての関数パラメータを提供するのが好きではありませんか? 既定値を使用します。
Restおよびspread演算子
Spread
配列またはオブジェクトのコンテンツを単一の要素として抽出できます。,
例—配列の浅いコピーを作成します。
例—配列をマージします。
配列のデストラクチャリング
配列から要求された要素を抽出し、変数に割り当てることができます。
Of object
オブジェクトから要求されたプロパティを抽出し、プロパティと同じ名前の変数に割り当てることができます。,
Promise
promise遅延または長時間実行されるタスクの将来の結果になることを約束します(はい、奇妙に聞こえます)。 Promiseには二つのチャネルがあります:最初の結果、潜在的なエラーのための第二。 結果を取得するには、’then’関数パラメーターとしてコールバック関数を指定します。 エラーを処理するには、コールバック関数を’catch’関数パラメーターとして指定します。
ランダムな関数呼び出しのため、この例の出力は実行ごとに異なる場合があることに注意してください。,
概要
私はあなたが記事を楽しんだことを願っています。 練習が必要な場合は、学習プロセスにサンドボックスを使用できます:https://es6console.com/。 より多くの情報が必要な場合は、ここで見つけることができます: