生活随笔
收集整理的這篇文章主要介紹了
关于ES6的10个最佳特性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ES6，正式名稱是ECMAScript2015，但是ES6這個名稱更加簡潔。ES6已經不再是JavaScript最新的標準，但是它已經廣泛用于編程實踐中。如果你還沒用過ES6，現在還不算太晚...
下面是10個ES6最佳特性，排名不分先后：
- 函數參數默認值
- 模板字符串
- 多行字符串
- 解構賦值
- 對象屬性簡寫
- 箭頭函數
- Promise
- Let與Const
- 類
- 模塊化
1. 函數參數默認值
不使用ES6
為函數的參數設置默認值：
function?foo(height,?color)?{?????var?height?=?height?||?50;?????var?color?=?color?||?'red';?????//...?}??這樣寫一般沒問題，但是，當參數的布爾值為false時，是會出事情的!比如，我們這樣調用foo函數：
foo(0,?"",?"")?因為0的布爾值為false，這樣height的取值將是50。同理color的取值為'red'。
使用ES6
function?foo(height?=?50,?color?=?'red')?{?????//?...?}??2. 模板字符串
不使用ES6
使用+號將變量拼接為字符串：
var?name?=?'Your?name?is?'?+?first?+?'?'?+?last?+?'.'?使用ES6
將變量放在大括號之中：
var?name?=?`Your?name?is?${first}?${last}.`?ES6的寫法更加簡潔、直觀。
3. 多行字符串
不使用ES6
使用"nt"將多行字符串拼接起來：
var?roadPoem?=?'Then?took?the?other,?as?just?as?fair,\n\t'?????+?'And?having?perhaps?the?better?claim\n\t'?????+?'Because?it?was?grassy?and?wanted?wear,\n\t'?????+?'Though?as?for?that?the?passing?there\n\t'?????+?'Had?worn?them?really?about?the?same,\n\t'??使用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,`?4. 解構賦值
不使用ES6
當需要獲取某個對象的屬性值時，需要單獨獲取：
var?data?=?$('body').data();?//?data有house和mouse屬性?var?house?=?data.house;?var?mouse?=?data.mouse;??使用ES6
一次性獲取對象的子屬性：
var?{?house,?mouse}?=?$('body').data()?對于數組也是一樣的：
var?[col1,?col2]?=?$('.column');?5. 對象屬性簡寫
不使用ES6
對象中必須包含屬性和值，顯得非常多余：
var?bar?=?'bar';?var?foo?=?function?()?{?????//?...?}??var?baz?=?{???bar:?bar,???foo:?foo?};??使用ES6
對象中直接寫變量，非常簡單：
var?bar?=?'bar';?var?foo?=?function?()?{?????//?...?}??var?baz?=?{?bar,?foo?};??6. 箭頭函數
不使用ES6
普通函數體內的this，指向調用時所在的對象。
function?foo()??{?????console.log(this.id);?}??var?id?=?1;??foo();?//?輸出1??foo.call({?id:?2?});?//?輸出2??使用ES6
箭頭函數體內的this，就是定義時所在的對象，而不是調用時所在的對象。
var?foo?=?()?=>?{???console.log(this.id);?}??var?id?=?1;??foo();?//?輸出1??foo.call({?id:?2?});?//?輸出1??7. Promise
不使用ES6
嵌套兩個setTimeout回調函數：
setTimeout(function()?{?????console.log('Hello');?//?1秒后輸出"Hello"?????setTimeout(function()?????{?????????console.log('Fundebug');?//?2秒后輸出"Fundebug"?????},?1000);?},?1000);??使用ES6
使用兩個then是異步編程串行化，避免了回調地獄：
var?wait1000?=?new?Promise(function(resolve,?reject)?{?????setTimeout(resolve,?1000);?});??wait1000?????.then(function()?????{?????????console.log("Hello");?//?1秒后輸出"Hello"?????????return?wait1000;?????})?????.then(function()?????{?????????console.log("Fundebug");?//?2秒后輸出"Fundebug"?????});??8. Let與Const
使用Var
var定義的變量未函數級作用域：
{???var?a?=?10;?}??console.log(a);?//?輸出10??使用let與const
let定義的變量為塊級作用域，因此會報錯：(如果你希望實時監控JavaScript應用的錯誤，歡迎免費使用Fundebug)
{???let?a?=?10;?}??console.log(a);?//?報錯“ReferenceError:?a?is?not?defined”??const與let一樣，也是塊級作用域。
9. 類
不使用ES6
使用構造函數創建對象：
function?Point(x,?y)?{?????this.x?=?x;?????this.y?=?y;?????this.add?=?function()?????{?????????return?this.x?+?this.y;?????};?}??var?p?=?new?Point(1,?2);??console.log(p.add());?//?輸出3??使用ES6
使用Class定義類，更加規范，且你能夠繼承：
class?Point?{?????constructor(x,?y)?????{?????????this.x?=?x;?????????this.y?=?y;?????}??????add()?????{?????????return?this.x?+?this.y;?????}?}??var?p?=?new?Point(1,?2);??console.log(p.add());?//?輸出3??10. 模塊化
JavaScript一直沒有官方的模塊化解決方案，開發者在實踐中主要采用CommonJS和AMD規范。而ES6制定了模塊(Module)功能。
不使用ES6
Node.js采用CommenJS規范實現了模塊化，而前端也可以采用，只是在部署時需要使用Browserify等工具打包。這里不妨介紹一下CommenJS規范。
module.js中使用module.exports導出port變量和getAccounts函數：
module.exports?=?{???port:?3000,???getAccounts:?function()?{?????...???}?}??main.js中使用require導入module.js：
var?service?=?require('module.js')?console.log(service.port)?//?輸出3000??使用ES6
ES6中使用export與import關鍵詞實現模塊化。
module.js中使用export導出port變量和getAccounts函數：
export?var?port?=?3000?export?function?getAccounts(url)?{???...?}??main.js中使用import導入module.js，可以指定需要導入的變量：
import?{port,?getAccounts}?from?'module'?console.log(port)?//?輸出3000??也可以將全部變量導入：
import?*?as?service?from?'module'? console.log(service.port)?//?3000??
作者：Fundebug
來源：51CTO
總結
以上是生活随笔為你收集整理的关于ES6的10个最佳特性的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
