ES6新特性

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【ES6新特性】

1.背景介紹

ECMAScript 6(ES6) 目前基本成爲業界標準，它的普及速度比 ES5 要快不少， 主要緣由是現代瀏覽器對 ES6 的支持至關迅速，尤爲是 Chrome 和 Firefox 瀏覽器，已經支持 ES6 中絕大多數的特性。 下面逐一爲你們詳解經常使用的ES6新特性：

2.知識剖析
CONST和LET
ES6推薦使用let聲明局部變量，相比以前的var（不管聲明在何處，都會被視爲聲明在函數的最頂部） let和var聲明的區別： var x = '全局變量';{ let x = '局部變量'; console.log(x); // 局部變量}console.log(x); // 全局變量 let表示聲明變量，而const表示聲明常量，二者都爲塊級做用域；const 聲明的變量都會被認爲是常量，意思就是它的值被設置完成後就不能再修改了： const a = 1a = 0 //報錯 若是const的是一個對象，對象所包含的值是能夠被修改的。抽象一點兒說，就是對象所指向的地址沒有變就行： const student = { name: 'cc' }student.name = 'yy';// 不報錯student = { name: 'yy' };// 報錯 有幾個點須要注意：

let 關鍵詞聲明的變量不具有變量提高（hoisting）特性 let 和 const 聲明只在最靠近的一個塊中（花括號內）有效 當使用常量 const 聲明時，請使用大寫變量，如：CAPITAL_CASING const 在聲明時必須被賦值

 

模板字符串
在ES6以前，咱們每每這麼處理模板字符串： 經過「」和「+」來構建模板 $("body").html("This demonstrates the output of HTML content to the page, including student's" + name + ", " + seatNumber + ", " + sex + " and so on."); 而對ES6來講 基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定； ES6反引號(`)直接搞定； $("body").html(This demonstrates the output of HTML content to the page, including student's ${name}, ${seatNumber}, ${sex} and so on.`);

 

箭頭函數

ES6 中，箭頭函數就是函數的一種簡寫形式，使用括號包裹參數，跟隨一個 =>，緊接着是函數體； 箭頭函數最直觀的三個特色。 不須要 function 關鍵字來建立函數 省略 return 關鍵字 繼承當前上下文的 this 關鍵字 // ES5var add = function (a, b) { return a + b;};// 使用箭頭函數var add = (a, b) => a + b;// ES5[1,2,3].map((function(x){ return x + 1;}).bind(this)); // 使用箭頭函數[1,2,3].map(x => x + 1); 細節：當你的函數有且僅有一個參數的時候，是能夠省略掉括號的。當你函數返回有且僅有一個表達式的時候能夠省略{} 和 return；

 

SPREAD / REST 操做符

Spread / Rest 操做符指的是 ...，具體是 Spread 仍是 Rest 須要看上下文語境。 當被用於迭代器中時，它是一個 Spread 操做符： function foo(x,y,z) { console.log(x,y,z);} let arr = [1,2,3];foo(...arr); // 1 2 3 當被用於函數傳參時，是一個 Rest 操做符：當被用於函數傳參時，是一個 Rest 操做符： function foo(...args) { console.log(args);}foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

 

對象和數組解構

// 對象const student = { name: 'Sam', age: 22, sex: '男'}// 數組// const student = ['Sam', 22, '男'];// ES5；const name = student.name;const age = student.age;const sex = student.sex;console.log(name + ' --- ' + age + ' --- ' + sex);// ES6const { name, age, sex } = student;console.log(name + ' --- ' + age + ' --- ' + sex);

 

 

對象超類

ES6 容許在對象中使用 super 方法： var parent = { foo() { console.log("Hello from the Parent"); }} var child = { foo() { super.foo(); console.log("Hello from the Child"); }} Object.setPrototypeOf(child, parent);child.foo(); // Hello from the Parent // Hello from the Child

 

 

PROMISE

setTimeout(function(){ console.log('Yay!') }, 1000) 咱們能夠用ES6中的Promise重寫： var wait1000 = new Promise(function(resolve, reject) { setTimeout(resolve, 1000) }).then(function() { console.log('Yay!') }) 或者用ES6的箭頭函數：var wait1000 = new Promise((resolve, reject)=> { setTimeout(resolve, 1000) }).then(()=> { console.log('Yay!') }) 到如今爲止，咱們只是單純增長了代碼的行數，還明顯沒有帶來任何好處，你說的對。可是若是咱們有更多複雜的邏輯內嵌在setTimeout()中的回調時好處就來了：

setTimeout(function(){ console.log('Yay!') setTimeout(function(){ console.log('Wheeyee!') }, 1000) }, 1000) ES6中的Promise重寫： var wait1000 = ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)}) wait1000() .then(function() { console.log('Yay!') return wait1000() }) .then(function() { console.log('Wheeyee!') }); 仍是沒法相信Promise比普通回調要好？我也不信。我想一旦知道了回調這個方法它就會在你腦中縈繞，額外的複雜的Promise也沒有必要存在了。

 

 

3.常見問題
解構賦值還有什麼用法？

 

 

4.解決方案
 

 

let {log,warn} = console; log('hello'); console.log('hello')

 

 

5.編碼實戰
 

 

 

6.擴展思考
7.參考文獻
參考一： ES6中經常使用的10個新特性講解

 

參考二： ES6類的概念

 

8.更多討論

 

1，什麼是塊級做用域

 

let實際上爲 JavaScript 新增了塊級做用域。

 

function f1() {

  let n = 5;

  if (true) {

    let n = 10;

  }

  console.log(n); // 5

}

 

上面的函數有兩個代碼塊，都聲明瞭變量n，運行後輸出 5。這表示外層代碼塊不受內層代碼塊的影響。若是兩次都使用var定義變量n，最後輸出的值纔是 10。

 

2.const用法？

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。

 

3，對象簡寫使用？

 

function f(x, y) {

  return {x, y};

}

// 等同於

function f(x, y) {

  return {x: x, y: y};

}

f(1, 2) // Object {x: 1, y: 2}