es6常用基礎合集
?
在實際開發中，ES6已經非常普及了。掌握ES6的知識變成了一種必須。盡管我們在使用時仍然需要經過babel編譯。
ES6徹底改變了前端的編碼風格，可以說對于前端的影響非常巨大。值得高興的是，如果你熟悉ES5，學習ES6并不需要花費太多的時間就可以掌握，因為常用的基礎語法并不多，花少量的時間，就可以開始我們的ES6之旅了。
這篇文章不會詳細的告訴你ES6的每一個細節知識，只會根據我自己的開發經驗，將我在實際開發中常常用到的知識點分享給大家，給大家學習ES6一個方向的指引。這是因為考慮到很多同學雖然知道ES6的重要性，但是不知道自己需要掌握那些ES6的知識，也不知道這些知識需要掌握到什么程度，這給新手朋友帶來了許多困惑，因此這篇文章就算是一個劃重點吧，掌握這些，就可以輕輕松松得進行進一步學習了。
在學習之前，推薦大家使用babel官方提供的在線編譯工具，編寫自己的demo，會在右側實時顯示出編譯之后的代碼，以供參考學習?http://babeljs.io/repl/
一、新的變量聲明方式 let/const
與var不同，新的變量聲明方式帶來了一些不一樣的特性，其中最重要的兩個特性就是提供了塊級作用域與不再具備變量提升。
通過2個簡單的例子來說明這兩點。
{let a = 20;
}console.log(a); // a is not defined而這個簡單的例子，會被編譯為：
{let _a = 20;
}console.log(a); // a is not defined// ES5
console.log(a); // undefined
var a = 20; // ES6 console.log(a); // a is not defined let a = 20;
當然，你的代碼編譯成為了ES5之后，仍然會存在變量提升，因此這一點只需要我們記住即可。在實際使用中，也需要盡量避免使用變量提升的特性帶來的負面影響。只有在面試題中，才會對變量提升不停的濫用。
使用ES6，我們需要全面使用let/const替換var，那么什么時候用let，什么時候用const就成為了一個大家要熟練區分的一個知識點。
我們常常使用let來聲明一個值會被改變的變量，而使用const來聲明一個值不會被改變的變量，也可以稱之為常量。
當值為基礎數據類型時，那么這里的值，就是指值本身。
而當值對應的為引用數據類型時，那么我這里說的值，則表示指向該對象的引用。這里需要注意，正因為該值為一個引用，只需要保證引用不變就可以，我們仍然可以改變該引用所指向的對象。
當我們試圖改變const聲明的變量時，則會報錯。
寫幾個例子，大家可以仔細揣摩一下：
let a = null;
a = 20;const obDev = {a: 20,b: 30
}obDev.a = 30; console.log(obDev); // Object {a: 30, b: 30}const fn = function() {}
const a = obDev.a; ... ...只要抓住上面我說的特性，那么在使用let/const時就會顯得游刃有余。
根據我自己的經驗，使用const的場景要比使用let的場景多很多。
二、 箭頭函數的使用
之前我說ES6顛覆了js的編碼習慣，箭頭函數的使用占了很大一部分。
首先是寫法上的不同:
// es5
var fn = function(a, b) { return a + b; } // es6 箭頭函數寫法，當函數直接被return時，可以省略函數體的括號 const fn = (a, b) => a + b; // es5 var foo = function() { var a = 20； var b = 30; return a + b; } // es6 const foo = () => { const a = 20; const b = 30; return a + b; }箭頭函數可以替換函數表達式，但是不能替換函數聲明
其次還有一個至關重要的一點，那就是箭頭函數中，沒有this。如果你在箭頭函數中使用了this，那么該this一定就是外層的this。
也正是因為箭頭函數中沒有this，因此我們也就無從談起用call/apply/bind來改變this指向。記住這個特性，能讓你在react組件之間傳值時少走無數彎路。
var person = {name: 'tom',getName: function() { return this.name; } } // 我們試圖用ES6的寫法來重構上面的對象 const person = { name: 'tom', getName: () => this.name } // 但是編譯結果卻是 var person = { name: 'tom', getName: function getName() { return undefined.name; } };在ES6中，會默認采用嚴格模式，因此this也不會自動指向window對象了，而箭頭函數本身并沒有this，因此this就只能是undefined，這一點，在使用的時候，一定要慎重慎重再慎重，不然踩了坑你都不知道自己錯在哪！這種情況，如果你還想用this，就不要用使用箭頭函數的寫法。
// 可以稍做改動
const person = {name: 'tom', getName: function() { return setTimeout(() => this.name, 1000); } } // 編譯之后變成 var person = { name: 'tom', getName: function getName() { var _this = this; // 使用了我們在es5時常用的方式保存this引用 return setTimeout(function () { return _this.name; }, 1000); } };先記住箭頭函數的寫法，并留意箭頭函數中關于this的特殊性，更過實踐與注意事項我們在封裝react組件時再慢慢來感受。
三、模板字符串
模板字符串是為了解決使用+號拼接字符串的不便利而出現的。它的功能非常強大，但是我們大多數時候使用它則非常簡單。看一個例子大家就明白怎么使用了。
// es6
const a = 20;
const b = 30; const string = `${a}+${b}=${a+b}`; // es5 var a = 20; var b = 30; var string = a + "+" + b + "=" + (a + b);使用 `` 將整個字符串包裹起來，而在其中使用 ${} 來包裹一個變量或者一個表達式。
當然模板字符串還支持換行等強大的功能，更多的大家可通過參考資料進一步學習。
四、 解析結構
解析結構是一種全新的寫法，我們只需要使用一個例子，大家就能夠明白解析結構到底是怎么一回事兒。
// 首先有這么一個對象
const props = {className: 'tiger-button',loading: false,clicked: true, disabled: 'disabled' }當我們想要取得其中的2個值：loading與clicked時：
// es5
var loading = props.loading;
var clicked = props.clicked;// es6
const { loading, clicked } = props; // 給一個默認值，當props對象中找不到loading時，loading就等于該默認值 const { loading = false, clicked } = props;是不是簡單了許多？正是由于解析結構大大減少了代碼量，因此它大受歡迎，在很多代碼中它的影子隨處可見。
// 比如
// section1
import React, { Component } from 'react'; // section2 export { default } from './Button'; // section3 const { click, loading } = this.props; const { isCheck } = this.state; // more 任何獲取對象屬性值的場景都可以使用解析結構來減少我們的代碼量另外，數組也有屬于自己的解析結構。
// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;// es5 var arr = [1, 2, 3]; var a = arr[0]; var b = arr[1]; var c = arr[2];數組以序列號一一對應，這是一個有序的對應關系。
而對象根據屬性名一一對應，這是一個無序的對應關系。
根據這個特性，使用解析結構從對象中獲取屬性值更加具有可用性。
五、 函數默認參數
之前我們不能直接為函數指定默認參數，因此很多時候為了保證傳入的參數具備一個默認值，我們常常使用如下的方法：
function add(x, y) { var x = x || 20; var y = y || 30; return x + y; } console.log(add()); // 50這種方式并不是沒有缺點，比如當我傳入一個x值為false，這個時候任然會取到默認值，就不是我們的本意了。
來看看ES6的默認值寫法：
function add(x = 20, y = 30) {return x + y;
}console.log(add());在實際開發中給參數添加適當的默認值，可以讓我們對函數的參數類型有一個直觀的認知。
const ButtonGroupProps = {size: 'normal',className: 'xxxx-button-group', borderColor: '#333' } export default function ButtonGroup(props = ButtonGroupProps) { ... ... }六、 展開運算符
在ES6中用...來表示展開運算符，它可以將數組方法或者對象進行展開。先來看一個例子它是如何使用的。
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30]; // 這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];當然，展開對象數據也是可以得到類似的結果
const obj1 = {
a: 1,
b: 2,
c: 3 } const obj2 = { ...obj1, d: 4, e: 5, f: 6 } // 結果類似于 const obj2 = Object.assign({}, obj1, {d: 4})展開運算符還常常運用在解析結構之中，例如我們在Raect封裝組件的時候常常不確定props到底還有多少數據會傳進來，就會利用展開運算符來處理剩余的數據。
// 這種方式在react中十分常用
const props = {size: 1,src: 'xxxx', mode: 'si' } const { size, ...others } = props; console.log(others) // 然后再利用暫開運算符傳遞給下一個元素，再以后封裝react組件時會大量使用到這種方式，正在學習react的同學一定要搞懂這種使用方式 <button {...others} size={size} />展開運算符還用在函數的參數中，來表示函數的不定參。只有放在最后才能作為函數的不定參，否則會報錯。
// 所有參數之和
const add = (a, b, ...more) => {return more.reduce((m, n) => m + n) + a + b } console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39展開運算符的運用可以大大提高我們的代碼效率，但是在剛開始使用的時候比較繞腦，掌握好了用起來還是非常爽的，記住這些使用場景，平時在用的時候可以刻意多運用就行了。
七、對象字面量 與 class
ES6針對對象字面量做了許多簡化語法的處理。
- 當屬性與值的變量同名時。
const name = 'Jane';
const age = 20 // es6 const person = { name, age } // es5 var person = { name: name, age: age };那么這種方式在任何地方都可以使用，比如在一個模塊對外提供接口時
const getName = () => person.name;
const getAge = () => person.age; // commonJS的方式 module.exports = { getName, getAge } // ES6 modules的方式 export default { getName, getAge }- 除了屬性之外，對象字面量寫法中的方法也可以有簡寫方式。
// es6
const person = {name,age,getName() { // 只要不使用箭頭函數，this就還是我們熟悉的thisreturn this.name } } // es5 var person = { name: name, age: age, getName: function getName() { return this.name; } };- 在對象字面量中可以使用中括號作為屬性，表示屬性也能是一個變量了。
const name = 'Jane';
const age = 20const person = { [name]: true, [age]: true }在ant-design的源碼實現中，就大量使用了這種方式來拼接當前元素的className，例如:
let alertCls = classNames(prefixCls, {[`${prefixCls}-${type}`]: true, [`${prefixCls}-close`]: !this.state.closing, [`${prefixCls}-with-description`]: !!description, [`${prefixCls}-no-icon`]: !showIcon, [`${prefixCls}-banner`]: !!banner, }, className);ant-design是一個認可度非常高的UI組件庫，官方使用react的方式進行了實現，除此之外，還有vue也有對應的實現，有興趣的同學可以去他們的官網了解學習。https://ant.design/index-cn
- class
ES6為我們創建對象提供了新的語法糖，這就是Class語法。如果你對ES5中面向對象的方式比較熟悉的話，Class掌握起來也是非常迅速的，因為除了寫法的不同，它并不會增加新的難以理解的知識點。我們先利用一個簡單的例子來看看寫法的不同。
// ES5
// 構造函數
function Person(name, age) {this.name = name;this.age = age;
}// 原型方法 Person.prototype.getName = function() { return this.name } // ES6 class Person { constructor(name, age) { // 構造函數 this.name = name; this.age = age; } getName() { // 原型方法 return this.name } }babel會將ES6的寫法編譯成為利用Object.defineProperty實現的方式，這個方法的具體用處大家可以在《JavaScript高級編程3》中學習了解，包括get，set，等都有詳細的說明
除此之外，我們還需要特別注意在實際使用中的幾種寫法方式的不同，在下面的例子注釋中，我說明了他們分別對應的ES5中的含義。
class Person {constructor(name, age) { // 構造函數 this.name = name; this.age = age; } getName() { // 這種寫法表示將方法添加到原型中 return this.name } static a = 20; // 等同于 Person.a = 20 c = 20; // 表示在構造函數中添加屬性 在構造函數中等同于 this.c = 20 // 箭頭函數的寫法表示在構造函數中添加方法，在構造函數中等同于this.getAge = function() {} getAge = () => this.age }箭頭函數需要注意的仍然是this的指向問題，因為箭頭函數this指向不能被改變的特性，因此在react組件中常常利用這個特性來在不同的組件進行傳值會更加方便。
- 繼承 extends
相比ES5，ES6的繼承就要簡單很多，我們直接來看一個例子。
class Person {constructor(name, age) {this.name = name;this.age = age; } getName() { return this.name } } // Student類繼承Person類 class Student extends Person { constructor(name, age, gender, classes) { super(name, age); this.gender = gender; this.classes = classes; } getGender() { return this.gender; } }我們只需要一個extends關鍵字，就可以實現繼承了，不用像ES5那樣去擔心構造函數繼承和原型繼承，除此之外，我們還需要關注一個叫做super的方法。
在繼承的構造函數中，我們必須如上面的例子那么調用一次super方法，它表示構造函數的繼承，與ES5中利用call/apply繼承構造函數是一樣的功能。
// 構造函數中
// es6
super(name, age);// es5
Person.call(this);super還可以直接調用父級的原型方法，
super.getName，但是我自己從來沒這樣用過，也就不擴展說了。
繼承在react中有大量的使用場景，許多組件都利用繼承來創建。
import React, { Component } from 'react';class App extends Component { defaultProps = {} state = {} componentWillMount() {} componentDidMount() {} btnClick = e => {} render() {} }只要根據我們上面所學到的知識，明確的知道哪些屬性方法是放在構造函數中，哪些屬性方法是放到了原型中，那么我們自己在編寫react組件的時候就要簡單和清晰很多。
其實只要我們ES5面向對象的知識足夠扎實，ES6和react掌握起來也沒有太多的難度，所有的學習難點，并不在ES6這些不同的語法糖上，而在于ES5中的原理，因此我在前面分享ES5的核心知識的時候，很多讀者老爺都迫不及待的希望我能夠更多的說一說ES6的知識。其實我們都沒有必要那么著急，只要前面10多篇文章的知識足夠扎實，這篇文章所涉及到的常用的ES6知識，最多花30分鐘也就掌握了。這些寫法上的不同并不會造成大家理解上的困難，只需要有一個熟悉過程就行了。所以大家的重點，還是要回歸到基礎上來。
?
