ES6の新機能の簡単な紹介

1. let、const、blockのスコープ

たとえば、ブロックレベルのスコープを作成できます。

var a = 2;
{ a = 3とします; console.log(a); // 3 } console.log(a); // 2



constもブロックレベルのスコープです。定数が宣言されています。宣言された定数はポインタに似ています。これは参照を指します。つまり、この「定数」は静的ではありません。たとえば、次のようになります。

{ const ARR = [5,6]; ARR.push(7); // Console.log(ARR);その値は変更可能; // [5,6,7] ARR = 10; // TypeError }




予防:

  1. letキーワードで宣言された変数には、変数の巻き上げ特性がありません。
  2. letおよびconst宣言は、最も近いブロック(中括弧内)でのみ有効です。
  3. 使用している場合、一定のconst宣言を、してください大文字の変数を使用CAPITAL_CASING:などを、
  4. constは宣言時に割り当てる必要があります

2.矢印機能

矢印関数を使用すると、コードがより簡潔になり、関数内のthisは、常にオブジェクト自体を指すようにバインドされます。
通常の関数と矢印関数:

var getPrice = function(){ return 4.55; }; //矢印関数を使用した実装vargetPrice =()=> 4.55;



3.関数パラメータのデフォルト値

ES6では、関数パラメーターのデフォルト値を設定できます:

getFinalPrice =(price、tax = 0.7)=> price + price * tax;
getFinalPrice(500); // 850

4.スプレッド/レストオペレーター

Spread / Rest演算子は...を参照します。SpreadかRestかは、コンテキストによって異なります。

イテレータで使用する場合、これはSpread演算子です。

関数foo(x、y、z){ console.log(x、y、z); } let arr = [1,2,3]; foo(…arr); // 1 2 3



パラメータを渡す関数として使用する場合、これはREST演算子です。

function foo(…args){ console.log(args); } foo(1、2、3、4、5); // [1、2、3、4、5]


5.オブジェクトの字句展開

ES6では、オブジェクトリテラルを使用してプロパティ変数と関数定義メソッドを初期化するときに、宣言で簡略構文を使用でき、オブジェクトプロパティでの計算操作が可能です。

function getCar(make、model、value){ return { //簡略 変数make、// makeと同等:make model、// model:model valueと同等、// value:valueと同等//式は次の目的で使用できます属性calcd ['make' make +]:trueに、//キーワード省略オブジェクト関数を無視するdepreciate(){ this.value- = 2500; } }; } let getCar CAR =( 'Barret'、 'Lee' 、40000); //出力:{ // make: 'Barret'、//モデル: 'Lee'、//値:40000、// makeBarret:true、//減価償却:[関数:depreciate] //}







function












6.2進数および8進数のリテラル

ES6は、2進リテラルと8進リテラルをサポートしています。数値の前に0oまたは0O追加することで、それらを8進値に変換できます。

oValue = 0o10 the let;
console.log(oValue); //。8the
let bValue = 0b10; //バイナリ0bまたは0B
console.log(bValue); // 2を使用

7.オブジェクトと配列の脱構築

破棄すると、オブジェクトの割り当て中に中間変数を回避できます。

function foo(){ return [1,2,3]; } let arr = foo(); // [1,2,3] let [a、b、c] = foo(); console.log(a、b、c); // 1 2 3 function bar(){ return { x:4、y:5、z:6 }; } let {x:x、y:y、z:z} = bar(); console.log(x、y、z); // 4 5 6













8.テンプレートの構文と区切り文字

ES6には、一連の文字列と変数を組み立てる非常に簡潔な方法があります。

$ {…}は変数をレンダリングするために使用されます
作为分隔符 let user = 'Barret'; console.log(Hi $ {user}! `); // Hi Barret!

9、for…of VSfor…in

for ... ofは、配列などのイテレータをトラバースするために使用されます。

ニックネーム= ['di'、 'boo'、 'punkeye'];
nicknames.size = 3;
for(ニックネームのニックネームを許可){ console.log(ニックネーム); } //結果:di、boo、punkeye


for ... inは、オブジェクトの属性をトラバースするために使用されます。

ニックネーム= ['di'、 'boo'、 'punkeye'];
nicknames.size = 3;
for(ニックネームにニックネームを入れてください){ console.log(ニックネーム); }結果:0、1、2、サイズ


10、約束

ES6はPromisesをネイティブでサポートしています。Promiseは非同期で実行されるのを待っているオブジェクトです。実行が完了すると、その状態は解決または拒否されます。

var p = new Promise(function(resolve、reject){ if(/ * condition /){ //正常に実行されましたresolve(/ value /); } else { //エラー、拒否されたreject(/ reason * /); } } );







すべてのPromiseには.thenメソッドがあり、このメソッドは2つのパラメーターを受け入れます。1つは解決された状態を処理するコールバックで、もう1つは拒否された状態を処理するコールバックです。

p.then((val) => console.log("Promise Resolved", val),
            (err) => console.log("Promise Rejected", err));

おすすめ

転載: blog.csdn.net/Serena_tz/article/details/113994196