es6
摘要：
模板物件
es5寫法
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/ap...
- 模板物件
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一樣
varfunc = a => a
console.log(typeof func); // "function"`
2. instance of也返回true，表明也是Function的例項
console.log(funcinstanceofFunction); // 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();
https://blog.csdn.net/Wbiokr/article/details/79490390
非同步操作和async函式
https://blog.csdn.net/qiangzhedc/article/details/76278802
ES6系列文章 非同步神器async-await
https://segmentfault.com/a/1190000011526612