es5寫法
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;
es6寫法
幸運的是，在ES6中，我們可以使用新的語法$ {NAME}，并把它放在反引號里`：
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;
es5的多行字符串
var roadPoem = 'Then took the other, as just as fair,nt'
+ 'And having perhaps the better claimnt'
+ 'Because it was grassy and wanted wear,nt'
+ 'Though as for that the passing therent'
+ 'Had worn them really about the same,nt';
然而在ES6中，僅僅用反引號就可以解決了：
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`;
1.函數的默認參數
這種寫法的缺點在于，如果參數y賦值了，但是對應的布爾值為false，則該賦值不起作用。就像上面代碼的最后一行，參數y等于空字符，結果被改為默認值。
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
ES6 允許為函數的參數設置默認值，即直接寫在參數定義的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
console.log(color) ----red
color = 'yellow'
console.log(color) ---yellow
}
1. 具有一個參數的簡單函數
var single = a => a
single('hello, world') // 'hello, world'
2. 沒有參數的需要用在箭頭前加上小括號
var log = () => {
alert('no param')
}
3. 多個參數需要用到小括號，參數間逗號間隔，例如兩個數字相加
var add = (a, b) => a + b
add(3, 8) // 11
4. 函數體多條語句需要用到大括號
var add = (a, b) => {
if (typeof a == 'number' && typeof b == 'number') {
return a + b
} else {
return 0
}
}
5. 返回對象時需要用小括號包起來，因為大括號被占用解釋為代碼塊了
var getHash = arr => {
// ...
return ({
name: 'Jack',
age: 33
})
}
6. 直接作為事件handler
document.addEventListener('click', ev => {
console.log(ev)
})
7. 作為數組排序回調
var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
if (a - b > 0 ) {
return 1
} else {
return -1
}
})
arr // [1, 2, 3, 4, 8, 9]
二、注意點
1. typeof運算符和普通的function一樣
var func = a => a
console.log(typeof func); // "function"`
2. instance of也返回true，表明也是Function的實例
console.log(func instanceof Function); // true
3. this固定，不再善變
obj = {
data: ['John Backus', 'John Hopcroft'],
init: function() {
document.onclick = ev => {
alert(this.data) // ['John Backus', 'John Hopcroft']
}
// 非箭頭函數
// document.onclick = function(ev) {`
// alert(this.data) // undefined`
// }
obj.init()
這個很有用，再不用寫me，self，_this了，或者bind。
4. 箭頭函數不能用new
var Person = (name, age) => {
this.name = name
this.age = age
}
var p = new Func('John', 33) // error
5. 不能使用argument
var func = () => {
console.log(arguments)
}
func(55) //
- 類（class）
類相當于實例的原型（靜態方法+構造函數+原型方法）， 所有在類中定義的方法， 都會被實例繼承。 如果在一個方法前， 加上static關鍵字， 就表示該方法不會被實例繼承， 而是直接通過類來調用， 這就稱為“ 靜態方法”,調用靜態方法可以無需創建對象
class Person{
//(靜態方法必須通過類名調用，不可以使用實例對象調用)
static showInfo(){
console.log('hello');
}
//構造函數，通過實例調用
constructor(sex,weight){
this.sex = sex;
this.weight = weight;
}
showWeight(){
console.log('weight:'+this.weight);
}
showSex(){
console.log('sex:'+this.sex);
}
}
let p = new Person('female','75kg');
p.showWeight();---- weight:75kg
p.showSex();----- sex:female
p.showInfo(); -----報錯，不是一個函數
Person.showInfo();---hello
//繼承
class Student extends Person{
constructor(sex,weight,score){
super(sex,weight);//調用父類的構造函數,這個步驟是必須的
this.score = score;
}
showScore(){
console.log('score:'+this.score);
}
}
let stu = new Student('male','70kg','100');
stu.showScore();--- score:100
stu.showSex();----sex:male
stu.showWeight();--- weight:70kg
Student.showInfo(); -----hello （可以用父類的靜態方法，類調用）
靜態方法也是可以從super對象上調用的。
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod() + ', too';
}
}
Bar.classMethod();
Promise
異步操作和async函數
ES6系列文章 異步神器async-await
