体彩内蒙古11迭5开奖:ECMAScript 8都發布了,你還沒有用上ECMAScript 6?

2018-02-28 17:06:59 ortotra 880

陕陕西福彩快乐十分开奖结果 www.zocum.com ES8已經與17年6月底發布,而很多的前端開發者還沒有開始用上ES6。本文聊一聊怎么快速入門ES6,并將ES6的語法應用到實戰項目中。

閱讀全文大約需要15分鐘。

文中以 ES 表示 ECMAScript。

今年六月底,TC39發布新一版的ES 8(ES 2017),自從ES6在15年發布之后,每一年TC39都會發布新一版的ES語言標準。

我了解的前端開發者中,還有很多人沒有用上ES6,有的人是覺得ES5用的挺好的,懶得去學ES6,有的人是有想學ES6的決心,但是苦于沒有合適的機會(項目)去實戰練習。

如果你用過React,Vue或Nodejs等,那你多多少少都會使用到一些ES6語法的。

ES8中的新特性,瀏覽器廠商和語法轉換器還需要一段來實現,不如我們還是先聊聊怎么在你的項目中用上ES6吧。

什么是ES6?它和ES5有什么區別?

我們常說的JavaScript是指ES3和ES5,ES6是ECMAScript 6 的縮寫。

對于經常寫原生JavaScript的前端開發者來說,對ES5中的語法肯定比較熟悉,比如數組中的一些方法forEach,map,filter,some,every,indexOf,lastIndexOf,reduce,reduceRight ……,以及對象(Object)和函數(Function)都拓展了很多方法,這里不多贅敘。

ES6給前端開發者帶來了很多的新的特性,可以更簡單的實現更復雜的操作,很大的提高開發效率,提高代碼的整潔性。

ES6中的新特性有很多,列一些比較常用的特性:

Block-Scoped Constructs Let and Const(塊作用域構造Let and Const)

Default Parameters(默認參數)

Template Literals (模板字符串)

Multi-line Strings (多行字符串)

Arrow Functions (箭頭函數)

Enhanced Object Literals (增強的對象文本)

Promises

Classes(類)

Modules(??椋?/p>

Destructuring Assignment (解構賦值)

下面介紹下這些常用的ES6特性。

Block-Scoped Constructs Let and Const(塊作用域構造Let and Const)

ES6提供了兩個新的聲明變量的關鍵字:let和const。而let和const要和塊級作用域結合才能發揮其優勢。

什么是塊級作用域?

塊級作用域的表示一對大括號{}包圍的區域是一個獨立的作用域,在這個作用域內用let聲明的變量a,只能在這個作用域內被訪問到,在這對大括號外面是訪問不到a的。

當然,在塊級作用域中還可以聲明函數,該函數也是只能作用域內部才能被訪問到。所以,在if、else、for甚至是一對單獨的{},都是一個塊級作用域。

在ES6之前,是沒有塊級作用域的概念的,只有全局作用域和函數作用域兩種,并且,用var聲明的變量和用function聲明的函數會被提前到作用域的頂部,這也就是我們常說的聲明提前。

用let聲明的變量是存在于距離聲明語句最近的一個作用域(全局作用域、函數作用域或塊級作用域)內的,在聲明的時候,可選的將其初始化成一個值。

語法如下:


let var1 [= value1] [, var2 [= value2 ] ] [, ..., varN [= valueN]] ;

這一點與var的聲明不同,用var聲明的變量是屬于離他最近的一個全局作用域或函數作用域中,且聲明會被提前。在塊級作用域中,var的聲明與在全局作用域和函數作用域中是一樣的。


塊級作用域和let聲明變量,解決了使用var一些痛點,相當于用let聲明的變量不會被提前到作用域頂部。


有一點需要注意,let也是聲明提前,但是let聲明變量的語句必須在使用該變量語句之前,在聲明之前引用會報錯該變量未被聲明,且let不允許重復聲明相同名稱的變量,否則會報錯。我們看下例子:


{

  var hello = 'Hello';

  let world = 'World';

}

console.log(hello);

console.log(world);

在Chrome瀏覽器的控制臺(最新版本的Chrome已支持一部分ES6語法)執行一下,會發現有報錯,見下圖。constconst聲明與let基本相同,它也是存在于塊級作用域內。

有一點區別就是const聲明的是常量,即不可被重新賦值改變原值。需要注意,const在聲明常量的時候,必須同時給常量初始化賦值。如果只聲明,不初始化值的話,會報錯。見下面代碼。

const MAX;

// Uncaught SyntaxError: Missing initializer in const declaration

聲明變量的方法

在ES5中,可以通過var和function這兩種方法來聲明變量。


而在ES6中,除了增加了let和const兩種聲明方式,還有接下來要介紹的import和class的聲明方式。

Default Parameters(默認參數)

默認參數是ES6中對函數拓展的一個特性,可以直接為函數的參數設置默認值,當某一參數設置了默認值時,如果調用函數的時候沒有傳該參數,則該參數的值為默認值,如果傳了該參數,則該參數的值為傳遞的參數值。

在ES6之前,我們可以通過手動的方式,為函數的參數設置默認值,代碼如下:

function sign (x) {

  if (typeof x === 'undefined') {

    x = 'default'

  }

  console.log(x)

}

sign('new sign')    // new sign

sign()              // default

將上述代碼換成ES6模式,可以這樣寫:


function sign (x = 'default') {

  console.log(x)    

}

sign('new sign')    // new sign

sign()              // default

Template Literals (模板字符串)


ES6提供了模板字符串的特性,模板字符串是使用反引號(`)和${}實現字符串的拼接,字符串中可以嵌入變量。

在ES6之前,我們一般這樣輸出模板:

var name = 'Henry';

var welcome = 'Hello, ' + name + '!';

console.log(welcome);   // Hello, Henry!

在ES6中,模板字符串可以這樣拼接字符串:

let name = 'Henry';

let welcome = `Hello, ${ name }!`;

console.log(welcome);   // Hello, Henry

模板字符串的計算規則是在兩個反引號之間將字符串拼接到一起,如果反引號之間含有${},則會計算這對大括號內的值,大括號里面可以是任意的JavaScript表達式,可以進行運算和引用對象屬性。

let a = 3;

let number = `$ {a + 2 }`;

console.log(`${ number }`);    // 5


let b = { c: 2, d: 4 };

console.log(`${ b.c * b.d }`) ;     // 8

Multi-line Strings (多行字符串)


多行字符串是模板字符串的拓展,它跟模板字符串是同樣的解析方式,不同的是,它可以拼接多行的字符串,且拼接的字符串中會保留所有的空格和縮進。

如果需要用字符串來拼接DOM樹結構時,可以這樣寫:

let titleValue = 'This is a title';

let htmlStr = `

 


     

${ titleValue }


     

This is a paragraph.

 

`;

上述代碼中,能看到JavaScript代碼和偽html代碼的結合,完全可以將模板字符串的多行字符串封裝成一個頁面模板工具,絕對是輕量高效的。

還有,這種書寫方式是不是很眼熟,跟React的JSX是不是很像雙胞胎啊。

Arrow Functions (箭頭函數)

在ES6中,可以使用箭頭(=>)來聲明一個函數,稱作箭頭函數。

ES5中聲明一個函數,可以這樣寫:

var func = function (a) {

  return a + 2;

}

將這個函數換成 箭頭函數:

let func = a => a + 2;

如果函數有多個參數,需要用括號包含所有參數,只有一個參數的時候,可以省略括號,如果沒有設置參數,也必須有括號。示例如下:


let func1 = (arg1, arg2, arg3) => {

  return arg1 + arg2 + arg3;

}


let func2 = arg => {

  console.log(arg)

}

let func3 = () => {

  console.log(`This is an arrow function.`)

}

需要注意的是,箭頭函數沒有自己的this,如果在箭頭函數內部使用this,那樣這個this是箭頭函數外部的this,也是因為箭頭函數沒有this,所以,箭頭函數不能用作構造函數。如果用箭頭函數來寫回調函數時,就不用再將外部this保存起來了。

// ES5

function foo() {

  var _this = this;

    

  setTimeout(function() {

    console.log('id:', _this.id);        

  }, 200)

}

// ES6

function foo() {

  setTimeout(() => {

    console.log(`id:${ this.id }`)        

  }, 200)

}

Enhanced Object Literals (增強的對象文本)


在ES6,對象字面值擴展支持在創建時設置原型,簡寫foo:foo分配,定義方法,加工父函數(super calls),計算屬性名(動態)。總之,這些也帶來了對象字面值和類聲明緊密聯系起來,讓基于對象的設計得益于一些同樣的便利。


var obj = {

  // __proto__ 原型

  __proto__: theProtoObj,

  // Shorthand for ‘handler: handler’  簡寫

  handler,

  // Methods

  toString() {

    // Super calls     繼承

    return "d " + super.toString();

  },

  // Computed (dynamic) property names 計算屬性名

  ['prop_' + (() => 42)()]: 'name'

};

Promises

Promise是異步編程的一種解決方案,它是一個對象,且只要開始就會一直進行下去,直到成功或者失敗。就像它的字面意思諾言一樣,一個諾言,只要被許下,就只有兩種解決:成功或失敗。

Promise的結果是由異步操作的結果決定的,且一旦結果形成,便不可再被改變,任何時候都得到同樣的結果。

需要注意的是:Promise被新建后,便無法被取消,會執行下去,直到出現結果;如果不設置回調,Promise內部拋出的異常,不會反應到外部。