導入
ECMAScript 6はJavaScriptの次の標準であり、急速な発展を遂げています。 ECMAScript 6の目標は、JavaScriptを使用して複雑なアプリケーション、機能ライブラリ、コード自動発電機(コードジェネレーター)を書き込むことを可能にすることです。最新のブラウザは、eCMAScript 6の構文を既に部分的にサポートしています。EcMascript6は現在基本的に業界標準であり、その人気はES5よりもはるかに高速です。主な理由は、最新のブラウザーがES6を非常に迅速にサポートしていることです。特に、ChromeとFirefoxブラウザーは、ES6のほとんどの機能をすでにサポートしています。
1. let、const、およびblock scopes
ブロックレベルのスコープを作成できるようにします。 ES6は、var:の代わりに変数を定義するためにLet in関数を使用することをお勧めします。
var a = 2; {let a = 3; console.log(a); // 3} console.log(a); // 2ブロックレベルのスコープでも有効な変数を宣言する別の方法はconstで、定数を宣言できます。 ES6では、constによって宣言された定数はポインターに似ています。これは参照を指します。つまり、この「const」は以下などの静的ではありません。
{const arr = [5,6]; arr.push(7); console.log(arr); // [5,6,7] arr = 10; // typeRror}注意すべき点がいくつかあります:
キーワードと宣言された変数には、巻き上げ機能がありません
LETおよびconst宣言は、最も近いブロックでのみ有効です(巻き毛包装内)
一定のconst宣言を使用する場合、次のような大文字の変数を使用します。Capital_casing
constは宣言されたときに割り当てる必要があります
2。矢印関数
ES6では、矢印関数は、括弧を使用してパラメーターをラップし、その後に=>、次に関数本文を使用して、関数の短い形式です。
var getPrice = function(){return 4.55;}; //矢印functionvar getpriceを使用した実装=()=> 4.55;上記の栗のgetprice矢印関数は、保持ステートメントを必要としない簡潔な関数本体を使用することに注意する必要があります。以下の栗は、通常の関数本文を使用します。
ret arr = ['apple'、 'banana'、 'orange'];朝食= arr.map(furt => {return fruit + 's';}); console.log(朝食); //リンゴバナナオレンジもちろん、Arrow関数は、コードを簡潔にするだけでなく、このバインディングが常にオブジェクト自体を指します。詳細については、次の栗をご覧ください。
function person(){this.age = 0; setInterval(function growup(){//非ストリクトモードでは、growup()関数のこれがウィンドウオブジェクトを指します。多くの場合、変数を使用してこれを保存し、GrowUp関数に参照する必要があります。
function person(){var self = this; self.age = 0; setInterval(function growup(){self.age ++;}、1000);}矢印関数を使用すると、この問題を救うことができます。
function person(){this.age = 0; setInterval(()=> {// | this | PINT TO PERSEL OBLES this.age ++;}、1000);} var person = new Person();3。関数パラメーターデフォルト値
ES6を使用すると、関数パラメーターのデフォルト値を設定できます。
let getFinalPrice =(価格、税= 0.7)=>価格 +価格 *税; getFinalPrice(500); // 850
4。スプレッド/レストオペレーター
スプレッド /レスト演算子は...、それがスプレッドであるか休むかを指します。コンテキストに依存します。
イテレーターで使用する場合、それはスプレッドオペレーターです。
function foo(x、y、z){console.log(x、y、z);} let arr = [1,2,3]; foo(... arr); // 1 2 3関数引数転送に使用する場合、それは休憩オペレーターです:
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に等価:モデル値:モデル値、//値に相当:値//属性は式['make' + make]:true、// ingre `quard` quard abreviation object japreciate -value -berue -value -berue -value -value- }};} let car = getCar( 'barret'、 'lee'、40000); // output:{// make: 'barret'、// model: 'lee'、// value:40000、// makebarret:true、// depreciate:function()//}6。バイナリおよびオクタルリテラル
ES6はバイナリリテラルとオクタルリテラルをサポートします。これは、数値の前に0oまたは0oを追加することでバイナリ値に変換できます。
let ovalue = 0o10; console.log(ovalue); // 8 let bvalue = 0b10; // `0b`または` 0b` console.log(bvalue)を使用します。 // 2
7。オブジェクトと配列の破壊
分解は、オブジェクトの割り当て時の中間変数の生成を回避できます。
function foo(){return [1,2,3];} let arr = foo(); // [1,2,3] [a、b、c] = foo(); console.log(a、b、c); // 1 2 3関数bar(){return {x:4、y:5、z:6};} let {x:x、y:y、z:z} = bar(); console.log(x、y、z); // 4 5 68。オブジェクトスーパークラス
ES6を使用すると、オブジェクトでスーパーメソッドを使用できます。
var parent = {foo(){console.log( "親からのこんにちは"); }} var child = {foo(){super.foo(); console.log( "hello from the Child"); }} object.setPrototypeof(子、親); child.foo(); //親からこんにちは//子供からこんにちは9。テンプレートの構文とセパレーター
ES6にたくさんの文字列と変数を組み立てる非常に簡潔な方法があります。
$ {...}は変数をレンダリングするために使用されます
`セパレーターとして
let user = 'barret'; console.log( `hi $ {user}!`); //こんにちはバレット!10。for ... for ... in
のために、ofは、アレイなどのイテレーターを横断するために使用されます。
let nicknames = ['di'、 'boo'、 'punkeye']; nicknames.size = 3; for(let nickname of nicknames){console.log(nickname);} result:di、boo、punkeyefor ... inは、オブジェクト内のプロパティを横断するために使用されます。
let nicknames = ['di'、 'boo'、 'punkey']; nicknames.size = 3;
11。マップと弱体
ES6には、MapとWeakMapの2つの新しいデータ構造セットがあります。実際、各オブジェクトはマップと見なすことができます。
オブジェクトは、複数のキーバルペアで構成されています。マップでは、以下など、オブジェクトのキーとして任意のタイプを使用できます。
var mymap = new Map(); var keystring = "a string"、keyobj = {}、keyfunc = function(){}; //値mymap.set(keyString、 "値は「文字列」に関連付けられている")を設定します。 mymap.set(keyobj、 "値はkeyobjに関連付けられています"); mymap.set(keyfunc、 "値はkeyfuncに関連付けられています"); mymap.size; // 3 //値mymap.get(keystring)を取得します。 // "値は「文字列」に関連付けられています" mymap.get(keyobj); // "値は「文字列」に関連付けられています" mymap.get(keyobj); // "値は「文字列」に関連付けられています" mymap.get(keyobj); //「keyobjとの付属の値 "mymap.get(keyfunc); //「keyfuncに関連付けられている値」WeakMap
WeakMapはマップですが、すべてのキーは弱い参照です。つまり、Garbage Collectionの場合はWeakMapのものは考慮されず、使用時にメモリリークを心配する必要はありません。
注意すべきもう1つのことは、WeakMapのすべてのキーがオブジェクトでなければならないということです。 4つの方法しかありません:delete(key)、(key)、get(key)、set(key、val)を持っています。
w = new weakmap(); w.set( 'a'、 'b'); // cont caught typeerror:弱いマップとして使用される無効な値key var o1 = {}、o2 = function(){}、o3 = window; w.set(o1、37); w.set(o2、 "azerty"); w.set(o3、未定義); W.get(O3); //未定義、それは設定値w.has(o1); // truew.delete(o1); w.has(o1); // 間違い12。セットと弱点
設定されたオブジェクトは、抑制されていない値のセットであり、複製値は無視されます。値のタイプは、原始的で参照タイプにすることができます。
myset = new set([1、1、2、2、3、3]); myset.size; // 3myset.has(1); // truemyset.add( 'strings'); myset.add({a:1、b:2});foreachを通ってセットを通過することができます。
myset.foreach((item)=> {console.log(item); // 1 // 2 // 3 // 'strings' // object {a:1、b:2}}); for(mysetの値をlet){console.log(value); // 1 // 2 // 3 //「文字列」//オブジェクト{a:1、b:2}}}セットには、delete()およびclear()メソッドもあります。
弱点
WeakMapと同様に、WeakSetオブジェクトを使用すると、コレクション内のオブジェクトへの弱い参照を保存できます。WeakSetのオブジェクトは、1回だけ表示されます。
var ws = new weadset(); var obj = {}; var foo = {}; ws.add(window); ws.add(obj); ws.has(window); // truews.has(foo); // false、fooは正常に追加されていませんws.delete(window); // ws.has(ウィンドウ)の組み合わせからウィンドウオブジェクトを削除します。 // false、ウィンドウオブジェクトが削除されました13。クラス
ES6にはクラスの構文があります。ここのクラスは新しいオブジェクト継承モデルではなく、プロトタイプチェーンの単なる構文砂糖の表現であることは注目に値します。
コンストラクターのメソッドとプロパティは、静的キーワードを使用して関数で定義されています。
class task {constructor(){console.log( "task instantimed!"); } showid(){console.log(23); } static loadall(){console.log( "すべてのタスクの読み込み.."); }} console.log(typeof task); // functionlet task = new Task(); // "タスクインスタンス型!" task.showid(); // 23task.loadall(); //「すべてのタスクの読み込み..」クラスの継承とスーパーセット:
class car {constructor(){console.log( "新しい車の作成"); }} class porscheはcar {constructor(){super(); console.log( "Porscheの作成"); }} let c = new Porsche(); //新しい車の作成//ポルシェの作成拡張により、サブクラスが親クラスを継承できるようにします。 Super()関数は、サブクラスのコンストラクター関数で実行する必要があることに注意する必要があります。
もちろん、super.parentmethodname()などのサブクラスメソッドの親クラスのメソッドを呼び出すこともできます。
クラスの詳細については、こちらをご覧ください。
注目に値するいくつかのポイントがあります:
クラスの宣言は巻き上げられません。クラスを使用する場合は、使用する前に定義する必要があります。そうしないと、参照エラーエラーがスローされます。
クラスで機能を定義するには、関数キーワードの使用を必要としません
14。シンボル
シンボルは、値が一意で不変の新しいデータ型です。 ES6で提案されているシンボルの目的は、一意の識別子を生成することですが、この識別子にアクセスすることはできません。
var sym = symbol( "いくつかのオプションの説明"); console.log(typeof sym); //シンボル
新しい演算子はシンボルの前で使用できないことに注意してください。
オブジェクトのプロパティとして使用される場合、このプロパティは承認できません。
var o = {val:10、[symbol( "random")]:「私はシンボル "、}; console.log(object.getownPropertynames(o)); // valオブジェクトシンボルプロパティを取得する場合は、object.getownPropertySymbols(O)を使用する必要があります。
15。ITERATORS
Iteratorは、要素にアクセスするたびにデータセットの要素にアクセスできます。ポインターがデータセットの最後の要素を指すと、イテレーターは終了します。次の()関数を提供して、sequenceを繰り返します。シーケンスは、完了属性と値属性を含むオブジェクトを返します。
ES6では、symbol.iteratorを介してオブジェクトのデフォルトのトラバーサーを設定できます。オブジェクトをトラバースする必要がある場合に関係なく、@@ iteratorメソッドを実行する@@ iteratorメソッドは、値を取得するためにイテレーターを返すことができます。
アレイはデフォルトではイテレーターです。
var arr = [11,12,13]; var itr = arr [symbol.iterator](); itr.next(); // {value:11、done:false} itr.next(); // {value:12、done:false} itr.next(); // {value:13、done:false} itr.next(); // {value:undefined、done:true}[symbol.iterator]()を介してオブジェクトのイテレーターをカスタマイズできます。
16。ジェネレーター
ジェネレーター関数はES6の新機能であり、関数が横断可能なオブジェクトを返して複数の値を生成できるようにします。
使用中には、 *構文と新しいキーワードの収量が表示されます。
function *infinitenumbers(){var n = 1; while(true){evelow n ++; }} var番号= infinitenumbers(); // iterableオブジェクト番号を返しますnext(); // {value:1、done:false} numbers.next(); // {value:2、done:false} numbers.next(); // {値:3、done:false}利回りが実行されるたびに、返された値はイテレーターの次の値になります。
17。約束
ES6には、約束に対するネイティブのサポートがあります。約束とは、非同期実行を待っているオブジェクトです。その実行が完了すると、その状態は解決または拒否されます。
var p = new Promise(function(resolve、requed){if(/ * condition */){// fulfilled resolve(/ * value */);} else {//エラー、拒否拒否(/ *理由 */);}});各約束には.thenメソッドがあり、2つのパラメーターを受け入れます。 1つ目は、解決された状態のコールバックを処理することであり、もう1つは拒否された状態のコールバックを処理することです。
p.then((val)=> console.log( "Promise Resolved"、val)、(err)=> console.log( "Promise拒否"、err));
上記は、ECMAScript 6のクイックスタートの紹介であり、すべての人のために編集されています。それを必要とする友達はそれを学び、参照することができます。