1. let & const
let和const是es6新出的變量聲明方式。其中最重要的特性就是提供了塊級(jí)作用域和變量不會(huì)被提升。
let聲明一個(gè)變量，這個(gè)變量的值能被改變。
const聲明一個(gè)變量，這個(gè)變量的值不會(huì)被改變，也可以稱之為常量。
2. 模板字符串
用法：把東西寫在``中；${}里面可以寫變量或者表達(dá)式。
const a = 'Hello';
const b = 'Sun';
// es6模板字符串
const str = `${a}, $`;
// 兩者結(jié)果一樣，就是以前的寫法很復(fù)雜。
const str1 = 'a' + ', ' + 'b';
3. 字符串重復(fù)
repeat()，返回新的字符串。注意，括號(hào)中的參數(shù)可以是小數(shù)，會(huì)自動(dòng)向下取整；即repeat(2.9)會(huì)重復(fù)2次。參數(shù)如果是 NaN或者是 -1 到 0 之間的小數(shù)，結(jié)果都是repeat 0次。參數(shù)除上述外，不可以是負(fù)數(shù)或者infinity，會(huì)報(bào)錯(cuò)的喲。
console.log('hhh,'.repeat(2)); // 'hhh,hhh,'
4. 解析結(jié)構(gòu)
數(shù)組解析結(jié)構(gòu)，需要注意的是這是一個(gè)有序的對(duì)應(yīng)關(guān)系：
const arr = [1, 2, 3];
const [a, b, c] = arr;
// 以上的寫法等同于 es5 中
var arr = [1, 2, 3];
var a = arr[0];
... ...
對(duì)象解析結(jié)構(gòu)，這是無需的對(duì)應(yīng)關(guān)系，是根據(jù)屬性名來對(duì)應(yīng)的：
const obj = {
name: 'Sun',
age: 24,
checked: true
}
/**
* 然后我們要取對(duì)象中的兩個(gè)值；
* 可以給這一個(gè)默認(rèn)值，即如果obj對(duì)象中找不到age時(shí)，age就等于默認(rèn)值18：
**/
const { name, age = 18 } = obj;
// 上面的寫法就等同于 es5 中
var name = obj.name;
var age = obj.age;
5. 展開運(yùn)算符 ...
const arr = [1, 2, 3];
const arr1 = [...arr, a, b, c];
// arr1就等于[1, 2, 3, a, b, c]
const obj = {
name: 'sun',
age: '20'
};
const obj1 = {...obj, fruit: 'mango'};
// obj1就等于 {name: 'sun', age: 18, fruit: 'mango'}
展開運(yùn)算符可以用在函數(shù)的參數(shù)中，來表示函數(shù)的不定參數(shù)。注意，不定參需要放在最后。
const fn = (x, y, ...others) => {
console.log(others);
return others.reduce((a, b) => a + b) + x + y
}
fn(1, 2, 3, 5, 7, 20); // others: [3, 5, 7, 20]
// result: 38
reduce() 函數(shù)知識(shí)補(bǔ)充
語法： array.reduce(function(total, currentValue), initialValue)
最終計(jì)算返回一個(gè)值。其中initialValue是傳給函數(shù)的初始值，可以不寫的。
const arr = [1, 2, 4, 7, 9];
const sum = (total, num) => {
return total+num;
}
arr.reduce(sum); // 23
6. 函數(shù)默認(rèn)參數(shù)
function fn(a=10, b=20) {
return a+b;
}
7. 箭頭函數(shù)
es5函數(shù)和es6箭頭函數(shù)的寫法區(qū)別：
// es5
var test = function(a, b) {
return a+b;
}
// es6箭頭函數(shù)： 當(dāng)函數(shù)直接被return時(shí)，可以省略函數(shù)體的括號(hào)。
const test = (a, b) => a+b;
// 不省略括號(hào)
const test = (a, b) => {
console.log(a);
return a+b;
}
需要注意的是，箭頭函數(shù)中沒有this對(duì)象。如果在箭頭函數(shù)中使用了this，那么該this一定就是外層的this。
const func = () => {
console.log(this);
}
func(); // Window
補(bǔ)充說明
function這個(gè)關(guān)鍵字定義的東西是全局的，function a(){}這個(gè)a函數(shù)就是全局的。a()調(diào)用的時(shí)候省略了window，即原來長成這樣window.a()。也就是說函數(shù)的調(diào)用者是window。
然后我們來整一下this。使用function關(guān)鍵字定義的函數(shù)中的this不是指向函數(shù)，而是指向函數(shù)的調(diào)用者。this的指向只和調(diào)用函數(shù)的對(duì)象有關(guān)。所以下面例子里面的c(),因?yàn)檎{(diào)用者是obj，所以this指向的就是這個(gè)obj。
箭頭函數(shù) 不是function關(guān)鍵字定義的函數(shù); 箭頭函數(shù)中的 this 在函數(shù)被定義的時(shí)候就已經(jīng)綁定好了，而不是取決于誰調(diào)用這個(gè)函數(shù)，this就指向誰。箭頭函數(shù)的this取決于最近的一個(gè)非箭頭父級(jí)函數(shù)的this指向。
var obj = {
a: 10,
b: () => {
console.log(this.a); //undefined
console.log(this); //window
},
c: function() {
console.log(this.a); //10
console.log(this); //obj{...}
}
}
obj.b();
obj.c();
var obj1 = {
a: 20,
b: function() {
return () => console.log(this.a);
},
c: function() {
console.log(this.a);
}
};
obj1.b()(); // 20
8. class
class是es6提供的語法糖，用于創(chuàng)建對(duì)象。
es5例子：
// 構(gòu)造函數(shù)
function Animal(name, voice) {
this.name = name;
this.voice = voice;
this.getVoice = function() {
return voice;
}
}
// 原型方法
Animal.prototype.getName = function() {
return this.name;
}
es6例子：
class Animal {
// 構(gòu)造函數(shù)
constructor(name, voice) {
this.name = name;
this.voice = voice;
}
// 方法將被添加到原型中
getName() {
return this.name;
}
}
10. 繼承
es6繼承需要使用關(guān)鍵字 extends；
此外，還需要調(diào)用一個(gè) super方法，super關(guān)鍵字用于訪問和調(diào)用一個(gè)對(duì)象的父對(duì)象上的函數(shù)。在構(gòu)造函數(shù)中使用時(shí)，super關(guān)鍵字將單獨(dú)出現(xiàn)，并且必須在使用this關(guān)鍵字之前使用。
class Animal {
constructor(name, voice) {
this.name = name;
this.voice = voice;
}
getName() {
return this.name;
}
}
// Cat類繼承Animal類
class Cat extends Animal {
constructor(name, voice, eatFish) {
super(name, voice);
this.eatFish = eatFish;
}
}
待更新...
