ECMAScriptの6機能

18415 ワード


テンプレートリテラル
テンプレートリテラルは、JavaScriptで文字列を印刷する簡単な方法を与えます.
また、変数を持つ簡単な方法を与えます.
例えば、
Let fName = John;
Let lName = Kioko;
Const fullName = ` ${fName} ${lName} `;
Console.log(fullName);
上の例から、テンプレートリテラルを使用して、fname変数とlname変数を連結してフルネーム変数に割り当てます.
以前は、以下のように同じ結果が得られました
Const fullName = fName +   + lname;
テンプレートリテラルは、以下に示すようにマルチライン文字列を持つきれいな方法を与えます
Const fullName = ` ${fName} 
${lName} `;

オブジェクトの破壊
オブジェクトの破壊は、オブジェクトのキーにアクセスすることができます.
オブジェクトの例
Const player = {
    name : Victor Wanyama,
    club : MLS,
    address : {
        city : Florida
}
};
Destructuring our object,
Const {name, club, address : {city} = player;

オブジェクトリテラル
ES 6は読みやすくてメンテナンス可能である間、より少ないコードを書くことに重点を置きました.
オブジェクトリテラルは、記述的である間、より少ないコードを書くことを許します.
通常のオブジェクトの例
function addressMaker(city, state) {
    const newAdress = {city: city, state: state};
        console.log(newAdress);
}
addressMaker('Austin', 'Texas');

This is how our object looks after re-writing it using object literals;
function addressMaker(city, state) {
    const newAdress = {city, state};
       console.log(newAdress);
}
addressMaker('Austin', 'Texas');

…のために
forループは、ES 6の後のバージョンで紹介されたJavaScriptの新機能です.
これにより、iterable全体を反復処理することができます.
ループの構文
For(element of the iterable){
Body 
};
のループの例
let incomes = [62000, 67000, 75000];
for (const income of incomes) {
    console.log(income);
}

拡がり演算子
スプレッド演算子(...)は、iterableまたはarrayを展開または展開するために使用します.例えば、
let contacts = ["Mary", "Joel", "Danny"];
let personalFriends = [ ...contacts ];
contacts.push("John");
console.log(personalFriends);
上記の例では、私たちの連絡先の配列を持っているし、連絡先の要素をコピーする別の配列のpersonalfriendsを作成しています.
それから、我々の最初の配列接触にもう一つの要素を押してください、そして、それを印刷して、我々は我々の新しい要素が接触配列に含まれていたのを見ます.
最初の配列を印刷する
console.log(contacts);
結果
["Mary", "Joel", "Danny" John];
しかし、我々が我々の最初の配列接触の要素をコピーすることによって作成される我々の他の配列を印刷するならば、.
PersonalFriends配列の印刷:
コンソール.ログ(personalfriends);
結果:
["Mary", "Joel", "Danny"];

矢印関数
この新しいES 6機能は、通常の関数と比較して関数を作成するクリーンな方法を提供します.例えば、
この関数
Let a = function ( b , c){
Return b + c;
}
矢印の関数で書くことができます
Let a = (b, c) => b + c;

デフォルト
デフォルトのparamsは私たちの関数パラメータに値を与えることができます.例えば、
const leadSinger = (artist = "someone");
値を指定せずに関数を呼び出しているときは、デフォルトでは定義されていません.例
const leadSinger = (artist = "someone") => {
console.log (`${artist} is the lead singer of Cold Play`);
}
leadSinger ();
output;
"someone is the lead singer of Cold Play"

includes()
includes()メソッドは、要素が含まれているかどうかを調べ、trueまたはfalseのBoolean値を返します.
以下の例では、include ()を使用して、レシピが配列にあるかどうかを確認し、関連するコンソールメッセージを出力します
const listIngredients =  [ "flour", "sugar", "eggs", "butter" ];
if ( listIngredients.includes("chocolate")) {
console.log("We are going to make a chocolate cake" )
} else {
    console.log ("We can't make a chocolate cake because we are missing the ingredient chocolate”);
}

レット&コンストLet & constはブロックスコープ宣言です.
レット変数を更新することができますが、再宣言されません.const変数の更新も再宣言できません.

インポート&エクスポート
これによって、私たちはしっかりした原則に従うことができます.
それは本質的に我々のコードがより簡単に組織されるようにそれを貸す自然でよりモジュラーであるのを許します.

クラス
クラスはオブジェクトの青写真です.クラスから多くのオブジェクトを作成できます.
JavaScriptのクラスの作成は、コンストラクタ関数の作成と似ています.
コンストラクタ関数は以下のように定義されます:
// constructor function 
function dog () {
    this.breed = 'germany',
    this.color = white
}

// create an object
const dog1 = new dog();
Classを作成する場合は、[関数]キーワードをクラスキーワードに置き換えます.例えば、
//A dog class 
class dog () {
    constructor(breed, color){
            this.breed = breed;
          this.color = color;
    }
}

// create an object
const dog1 = new dog(germany, white);
Classキーワードを使用してクラスを作成します.プロパティはコンストラクター関数で割り当てられます.

ジャバスクリプト
JavaScriptのマップは、オブジェクトに似ています、彼らはキー/値組に要素を保存するのを許します.
マップ内の要素を挿入順に挿入します.マップは、オブジェクト、関数、およびキーとして他のデータ型を含めることができます.
マップを作成するには、new map ()コンストラクタを使用します.例えば、
// create a Map
const map1 = new Map(); // an empty map
console.log(map1); // Map {}

ジャバスクリプト
セットは、数字、文字列、オブジェクトなどの複数の項目を許可するように配列に似ています.
JavaScriptの設定を作成するには、新しいset ()コンストラクターを使用する必要があります.例えば、
Const set1 = new set();

結論
この記事はES 6機能をカバーしています.あなたが感じる何かがあるならば、あなたはそれがカバーされることを望みます、そして、コメントを残してください.