新しいES6機能の破棄、パラメーター、モジュール、および表記法の使用例


この記事では、破壊、パラメーター、モジュール、および新しいES6機能の表記法の使用について説明します。次のように、参照用に全員と共有してください。
私。脱構築
破棄は、オブジェクトまたは配列からデータを抽出するための便利な方法を提供します。次の例を参照してください。


// ES6
let [x、y] = [1,2]; // x = 1、y = 2
// ES5
var arr = [1、 2];
var x = arr [0];
var y = arr [1];



この構文を使用すると、一度に複数の変数に値を割り当てることができます。優れた追加機能は、変数値を簡単に交換できることです。


let x = 1、y = 2;
[x、y] = [y、x]; x = 2 y = 1



破棄はオブジェクトにも使用できます。オブジェクトに存在する必要がある対応するキーに注意してください。


let obj = {x:1、y:2};
let {x、y} = obj; // a = 1、b = 1



また


let {x:a、y:b} = obj; // a = 1、b = 2



別の興味gパターンは、複数の戻り値をシミュレートすることです。


function doSomething(){
return [1,2];
}
let [x.y] = doSomething(); // x = 1.y = 2



破棄を使用して、デフォルト値をパラメータオブジェクトに割り当てることができます。オブジェクトリテラルを使用すると、名前付きパラメータをシミュレートできます。


function doSomething({y:1、z:0}){
console.log(y、z);
}
doSomething({y:2})



次に、パラメータ strong>
1、デフォルト strong> span>
ES6では、関数のパラメーターのデフォルト値を定義することができます。構文は次のとおりです。


function doSomething(){
return x * y;
}
doSomething(5); // 10
doSomethinf(5、undefined); // 10 < br /> doSomething(5,3); // 15

//ES5のパラメータにデフォルト値を割り当てる
functiondoSomething(x、y){
y = y ==== undefined 63; 2:y;
return x * y;
}



未定義またはパラメーターなしを渡すと、パラメーターはデフォルト値を使用するようにトリガーされます。
2。 RESTパラメーター span>
省略記号演算子についてはすでに学習しました。残りのパラメーターはそれに似ています。また、「...」構文を使用して、最後のパラメーターを配列に保存できるようにします。


funtion doSomething(x、... initial){
return x * rremaining.length;
}
dodSomething(5,0,0,0); // 15 < br />


3つのモジュール
ES6のモジュール構文では、モジュールの設計はexportキーワードとimportキーワードを中心に展開されます。次に、2つのモジュールを使用した例を見てみましょう。


// lib / ath.js
export function sum(x、y){
return x + y
};
export var pi = 3.14;
// app.js
import {sum、pi} form "lib / math.js";
console.log(sum(pi、pi);



ご覧のとおり、それぞれが指定する複数のエクスポート宣言が存在する可能性があります出力値のタイプ。この例のインポート宣言では、構文を使用してインポート対象を明示的に定義します。*ワイルドカードをasキーワードと組み合わせて使用​​して、モジュールのローカル名を指定し、モジュール全体をインポートできます。


// app.js
import * as math form "lib / math.js";
console.lgo(math.sum(math.pi、math.pi));



モジュールシステムにはデフォルトの出力があり、これは関数にすることができます。このデフォルトをインポートするには、ローカル名を指定する必要があります。


// lib / my-fn.js
export default function(){
console.log('echo echo);
}
// app.js
import doSomething from'lib / my-fn、js';
doSomething();



インポート宣言は同期的ですが、すべての依存関係が読み込まれるまでモジュールコードは実行されないことに注意してください
4つ。クラス
クラスはcalssとコンストラクターのキーワードを中心に作成されます。簡単な例を次に示します。


class Vehicle {
コンストラクタ(name){
this.name = name;
this.kind ='' Vehicle ";
}
getName( ){
return this.name;
}
};
//インスタンスを作成する
letmyVehicle = new Vehicle('rocky');



クラスの定義は汎用オブジェクトではないため、クラスのメンバー間にコンマはありません。クラスのオブジェクトを作成するときは、newキーワードを使用する必要があり、基本クラスを継承するときは、extendsを使用します。


class Car extends Vehicle {
コンストラクタ(name){
super(name);
this.kind ='car';
}
} < br /> let myCar = new Car('bumpy'); myCar.getName(); //'bumpy';
myCar instanceof Car; // true
myCar instanceof Vehicle; // true



派生クラスから、任意のコンストラクターまたはメソッドのsuperを使用して、その基本クラスを取得できます。super()を使用して、親クラスのコンストラクターを呼び出します。他のメンバーに電話します。
V。マーク
トークンsは新しいプリミティブデータ型です。 NumberやStringと同様に、トークンを使用して、オブジェクトプロパティの一意の識別子を作成したり、一意の定数を作成したりできます。作成方法は以下のとおりです。


const MY_CONSTANT = Symbol();
let obj = {};
obj [MY_CONSTANT] = 1;



トークンによって生成されたキーと値のペアは、Object.getOwnPorpertyNames()を介して取得できず、トラバーサル、Object.key()、JSON.stringify()では表示されないことに注意してください。これはstring-と同じです。代わりに、Object.getOenPropertySymbols()を使用してオブジェクトのトークン配列を取得できます。トークンはどちらも不変のプロパティを持っているため、constでうまく機能します。
翻訳
現在、ブラウザはES6を広くサポートしておらず、ブラウザごとに異なります。おそらく、あなたが書いたコードは、ユーザーのブラウザで完全に解析することはできません。これが、現在のブラウザでうまく機能する古いバージョンのJavaScript(ES5)にコードを変換する必要がある理由です。情報はしばしばトランスパイルと呼ばれ、互換性を持たせたいすべてのブラウザーがES6を実行できるようになるまでそれを行う必要があります。 Bable、Traceur、TypeScriptなど、翻訳する方法はたくさんあります。
この記事がECMAScriptプログラミングに役立つことを願っています。