一、新的變數宣告方式 let/const
與var不同，新的變數宣告方式帶來了一些不一樣的特性，其中最重要的兩個特性就是提供了塊級作用域與不再具備變數提公升。
通過2個簡單的例子來說明這兩點。
let a = 20;而這個簡單的例子，會被編譯為：
let _a = 20;// es5
console.log(a); // undefined
var a = 20;
// es6
console.log(a); // a is not defined
let a = 20;
變數提公升demo示例
當然，你的**編譯成為了es5之後，仍然會存在變數提公升，因此這一點只需要我們記住即可。在實際使用中，也需要盡量避免使用變數提公升的特性帶來的負面影響。只有在面試題中，才會對變數提公升不停的濫用。
使用es6，我們需要全面使用let/const替換var，那麼什麼時候用let，什麼時候用const就成為了乙個大家要熟練區分的乙個知識點。
我們常常使用let來宣告乙個值會被改變的變數，而使用const來宣告乙個值不會被改變的變數，也可以稱之為常量。
當值為基礎資料型別時，那麼這裡的值，就是指值本身。
而當值對應的為引用資料型別時，那麼我這裡說的值，則表示指向該物件的引用。這裡需要注意，正因為該值為乙個引用，只需要保證引用不變就可以，我們仍然可以改變該引用所指向的物件。
當我們試圖改變const宣告的變數時，則會報錯。
let a = null;
a = 20;
const obdev =
const fn = function() {}
const a = obdev.a;
只要抓住上面我說的特性，那麼在使用let/const時就會顯得游刃有餘。
根據我自己的經驗，使用const的場景要比使用let的場景多很多。
二、箭頭函式的使用
之前我說es6顛覆了js的編碼習慣，箭頭函式的使用佔了很大一部分。
首先是寫法上的不同:
// es5
var fn = function(a, b) // 我們試圖用es6的寫法來重構上面的物件
const person = 在es6中，會預設採用嚴格模式，因此this也不會自動指向window物件了，而箭頭函式本身並沒有this，因此this就只能是undefined，這一點，在使用的時候，一定要慎重慎重再慎重，不然踩了坑你都不知道自己錯在哪！這種情況，如果你還想用this，就不要用使用箭頭函式的寫法。
// 可以稍做改動
const person = // 編譯之後變成
var person = , 1000);
}先記住箭頭函式的寫法，並留意箭頭函式中關於this的特殊性，更過實踐與注意事項我們在封裝react元件時再慢慢來感受。
三、模板字串
模板字串是為了解決使用+號拼接字串的不便利而出現的。它的功能非常強大，但是我們大多數時候使用它則非常簡單。看乙個例子大家就明白怎麼使用了。
// es6
const a = 20;
const b = 30;
const string =$+$=$;
// es5
var a = 20;
var b = 30;
var string = a + 「+」 + b + 「=」 + (a + b);
使用 `` 將整個字串包裹起來，而在其中使用 ${} 來包裹乙個變數或者乙個表示式。
四、解析結構
解析結構是一種全新的寫法，我們只需要使用乙個例子，大家就能夠明白解析結構到底是怎麼一回事兒。
// 首先有這麼乙個物件
const props = = props;
// 給乙個預設值，當props物件中找不到loading時，loading就等於該預設值
const = props;
是不是簡單了許多？正是由於解析結構大大減少了**量，因此它大受歡迎，在很多**中它的影子隨處可見。
// 比如
// section1
import react, from 『react』;
// section2
export from 『./button』;
// section3
const = this.props;
const = 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) , obj1, )
展開運算子還常常運用在解析結構之中，例如我們在raect封裝元件的時候常常不確定props到底還有多少資料會傳進來，就會利用展開運算子來處理剩餘的資料。
// 這種方式在react中十分常用
const props = = props;
console.log(others)
// 然後再利用暫開運算子傳遞給下乙個元素，再以後封裝react元件時會大量使用到這種方式，正在學習react的同學一定要搞懂這種使用方式
展開運算子還用在函式的引數中，來表示函式的不定參。只有放在最後才能作為函式的不定參，否則會報錯。
// 所有引數之和
const add = (a, b, …more) =>
// es6 modules的方式
export default
除了屬性之外，物件字面量寫法中的方法也可以有簡寫方式。
// es6
const person = -$`]: true,
[`$-close`]: !this.state.closing,
[`$-with-description`]: !!description,
[`$-no-icon`]: !showicon,
[`$-banner`]: !!banner,}, classname);
ant-design是乙個認可度非常高的ui元件庫，官方使用react的方式進行了實現，除此之外，還有vue也有對應的實現，有興趣的同學可以去他們的官網了解學習。
class
es6為我們建立物件提供了新的語法糖，這就是class語法。如果你對es5中物件導向的方式比較熟悉的話，class掌握起來也是非常迅速的，因為除了寫法的不同，它並不會增加新的難以理解的知識點。我們先利用乙個簡單的例子來看看寫法的不同。
// es5
// 建構函式
function person(name, age)
getage = () => this.age
箭頭函式需要注意的仍然是this的指向問題，因為箭頭函式this指向不能被改變的特性，因此在react元件中常常利用這個特性來在不同的元件進行傳值會更加方便。
繼承 extends
相比es5，es6的繼承就要簡單很多，我們直接來看乙個例子。
class person from 『react』;
defaultprops = {}
state = {}
componentwillmount() {}
componentdidmount() {}
btnclick = e => {}
render() {}
ES6基礎知識點1
2 解構 3 字串 4 箭頭函式 5 函式新特性 6 陣列新增加方法 7 物件 只能在一對 裡面產生作用,此時console.log b 會報錯，因為外部無法訪問到區域性變數b。if true console.log a console.log b 不能重複宣告乙個區域性變數。不會變數提公升，此時如...
es6模組化基礎知識點
1 為何需要模組化 因為隨著前端的 複雜度越來越高，之間會容易有這三個問題 全域性變數衝突 函式命名衝突 依賴關係混亂 2 模組化規範的高階歷史 commonjs amd cmd 到現在的 es6模組 3 最初最簡單的模組化原始碼 jquery大量使用的也是這種方式 var module speci...
es6基礎知識
1 箭頭操作符 var arr 1,5,6 傳統寫法 arr.foreach function v 箭頭操作符 arr.foreach v console.log v 2 字串模板 var str math.random console.log you num is 3 解構 函式解構 var x,...