10個最佳Es6特性

下面是10個ES6最佳特性,排名不分先后:

1.函數參數默認值

2.模板字符串

3.多行字符串

4.解構賦值

5.對象屬性簡寫

6.箭頭函數

7.Promise

Let與Const

模塊化

1. 函數參數默認值

不使用ES6

為函數的參數設置默認值:

functionfoo(height, color)

{

varheight = height ||50;

varcolor = color ||'red';

//...

}

這樣寫一般沒問題,但是,當參數的布爾值為false時,是會出事情的!比如,我們這樣調用foo函數:

foo(0,"","")

因為0的布爾值為false,這樣height的取值將是50。同理color的取值為‘red’

使用ES6

functionfoo(height =50, color ='red')

{

// ...

}

2. 模板字符串

不使用ES6

使用+號將變量拼接為字符串:

varname ='Your name is '+ first +' '+ last +'.'

使用ES6

將變量放在大括號之中:

varname =`Your name is${first}${last}.`

ES6的寫法更加簡潔、直觀。

3. 多行字符串

不使用ES6

使用“\n\t”將多行字符串拼接起來:

varroadPoem ='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

將多行字符串放在反引號``之間就好了:

varroadPoem =`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

當需要獲取某個對象的屬性值時,需要單獨獲取:

vardata = $('body').data();// data有house和mouse屬性

varhouse = data.house;

varmouse = data.mouse;

使用ES6

一次性獲取對象的子屬性:

var{ house, mouse} = $('body').data()

對于數組也是一樣的:

var[col1, col2]? = $('.column');

5. 對象屬性簡寫

不使用ES6

對象中必須包含屬性和值,顯得非常多余:

varbar ='bar';

varfoo =function()

{

// ...

}

varbaz = {

bar: bar,

foo: foo

};

使用ES6

對象中直接寫變量,非常簡單:

varbar ='bar';

varfoo =function()

{

// ...

}

varbaz = { bar, foo };

6. 箭頭函數

不使用ES6

普通函數體內的this,指向調用時所在的對象。

functionfoo()

{

console.log(this.id);

}

varid =1;

foo();// 輸出1

foo.call({id:2});// 輸出2

使用ES6

箭頭函數體內的this,就是定義時所在的對象,而不是調用時所在的對象。

varfoo =()=>{

console.log(this.id);

}

varid =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是異步編程串行化,避免了回調地獄:

varwait1000 =newPromise(function(resolve, reject)

{

setTimeout(resolve,1000);

});

wait1000

.then(function()

{

console.log("Hello");// 1秒后輸出"Hello"

returnwait1000;

})

.then(function()

{

console.log("Fundebug");// 2秒后輸出"Fundebug"

});

8. Let與Const

使用Var

var定義的變量未函數級作用域:

{

vara =10;

}

console.log(a);// 輸出10

使用let與const

let定義的變量為塊級作用域,因此會報錯:(如果你希望實時監控JavaScript應用的錯誤,歡迎免費使用Fundebug)

{

leta =10;

}

console.log(a);// 報錯“ReferenceError: a is not defined”

constlet一樣,也是塊級作用域。

9. 類

不使用ES6

使用構造函數創建對象:

functionPoint(x, y)

{

this.x = x;

this.y = y;

this.add =function()

{

returnthis.x +this.y;

};

}

varp =newPoint(1,2);

console.log(p.add());// 輸出3

使用ES6

使用Class定義類,更加規范,且你能夠繼承:

classPoint

{

constructor(x, y)

{

this.x = x;

this.y = y;

}

add()

{

returnthis.x +this.y;

}

}

varp =newPoint(1,2);

console.log(p.add());// 輸出3

10. 模塊化

JavaScript一直沒有官方的模塊化解決方案,開發者在實踐中主要采用CommonJSAMD規范。而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

varservice =require('module.js')

console.log(service.port)// 輸出3000

使用ES6

ES6中使用exportimport關鍵詞實現模塊化。

module.js中使用export導出port變量和getAccounts函數:

exportvarport =3000

exportfunctiongetAccounts(url){

...

}

main.js中使用import導入module.js,可以指定需要導入的變量:

import{port, getAccounts}from'module'

console.log(port)// 輸出3000

也可以將全部變量導入:

import*asservicefrom'module'

console.log(service.port)// 3000

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 譯者按: ** 人生苦短,我用ES6**。 原文: Top 10 ES6 Features Every Busy ...
    Fundebug閱讀 391評論 0 10
  • 原文: Top 10 ES6 Features Every Busy JavaScript Developer M...
    簡書超級會員閱讀 144評論 0 0
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,915評論 18 139
  • Node.js是目前非常火熱的技術,但是它的誕生經歷卻很奇特。 眾所周知,在Netscape設計出JavaScri...
    w_zhuan閱讀 3,639評論 2 41
  • ES6(ECMAScript2015)的出現,無疑給前端開發人員帶來了新的驚喜,它包含了一些很棒的新特性,可以更加...
    gtt21閱讀 238評論 0 0