ES6のデフォルトパラメータ
ES6では、関数のシグネチャにデフォルト値を入れることができます。
var calculateArea = function(height = 50, width = 80) {
// write logic
...
}
ES5では、ロジックまたは演算子を使用していました。
var calculateArea = function(height, width) {
height = height || 50;
width = width || 80;
// write logic
...
}
ES6のテンプレートリテラル
ES6では、バックチェックされた文字列の中に新しい構文${PARAMETER}を使用できます。
var name = `Your name is ${firstName} ${lastName}.`
ES5では、以下のように文字列を分割する必要があります。
var name = 'Your name is ' + firstName + ' ' + lastName + '.'
ES6の複数行の文字列
ES6では、非常に簡単です。, ちょうどバックダニを使用します。
let poemData = `Johny Johny Yes Papa,
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`
ES5では、以下のアプローチを使用する必要がありました。
var poemData = 'Johny Johny Yes Papa,\n'
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'
ES6での構造化代入
構造化代入構文は、配列からの値、またはオブジェクトからのプロパティを個別の変数に展開できるJavaScript式です。
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
ES5では、以下のアプローチを使用する必要がありました。
var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true
ES6で拡張されたオブジェクトリテラル
オブジェクトリテラルを使用すると、中括弧の中にプロパティを持つオブジェクトをすばやく作成することが容易になります。,
function getLaptop(make, model, year) {
return {
make,
model,
year
}
}
getLaptop("Apple", "MacBook", "2015");
ES5では、以下の構文に従わなければなりませんでした。
function getLaptop(make, model, year) {
return {
make: make,
model: model,
year: year
}
}
getLaptop("Apple", "MacBook", "2015");
詳細については、https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d
Es6の矢印関数
脂肪矢印は素晴らしいですthis正しく動作します。thisコンテキストと同じ値を持ちます関数の—それは変異しません。
$('.btn').click((event) => {
this.doSomething()
});
ES5では、_this=this orを使用する必要がありました。バインド（これ）。,
var _this = this;
$('.btn').click(function(event){
_this.doSomething();
});
詳細については、https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
ES6のPromises
Promisesは非同期実行に使用されます。 ES6では、以下に示す矢印関数でpromiseを使用できます。
var asyncCall = new Promise((resolve, reject) => {
// do something async
resolve();
}).then(()=> {
console.log('Yay!');
})
ES5では、setTimeout()を使用する必要があります。
setTimeout(function(){
console.log('Yay!');
}, 1000);
詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
ブロックスコープの構造LetとConst
letは新しいvar変数をブロックにスコープ,したがって、letとvarの主な違いは、varは最も近い関数ブロックにスコープされ、letは最も近い囲むブロックにスコープされ、関数ブロックよりも小さくすることができます。
ES6では、
ES5では、
const、それは単なる不変であり、letようなブロックスコープでもあります。
ES6のクラス
“class”キーワードを使用してES6でクラスを作成できます。 Es5でのクラスの作成と使用は、キーワードクラスがなかったため、後ろに痛みがありました。,
私はあなたにES5クラスの作成の例を示すつもりはありません、多くの味があるので。
ES6のモジュール
ES6には、importおよびexportオペランドを持つモジュールがあります。
export var userID = 10;
export function getName(name) {
...
};
importステートメントを使用して、userID変数とgetNameメソッドをインポートできます。
import {userID, getName} from 'module';
console.log(userID); // 10
Leave a Reply