ECMAScript 6.0（簡(jiǎn)稱ES6）是 JavaScript 一個(gè)制定于2015年的新標(biāo)準(zhǔn)，它于2015年6月正式發(fā)布。

它的目的是想讓JavaScript成為一個(gè)企業(yè)級(jí)的開(kāi)發(fā)語(yǔ)言，可以去開(kāi)發(fā)大型的復(fù)雜應(yīng)用。

我的ES6學(xué)習(xí)心得將分為以下三個(gè)部分來(lái)闡述：

1.ECMAScript 6.0簡(jiǎn)介

2.ECMAScript 6.0新特性

3.ECMAScript 6.0性能總結(jié)與個(gè)人體會(huì)

4.參考文獻(xiàn)

?

1.ECMAScript 6.0簡(jiǎn)介

想要弄清楚ECMAScript 6.0，那么我們要先弄清楚它是什么，它怎么來(lái)的。

（1）ECMAScript

ECMA是“European Computer Manufactures Association”的縮寫，中文稱歐洲計(jì)算機(jī)制造聯(lián)合會(huì)。這個(gè)組織的目標(biāo)是評(píng)估，開(kāi)發(fā)和認(rèn)可電信和計(jì)算機(jī)標(biāo)準(zhǔn)。

1996年的時(shí)候，Javascript的創(chuàng)造公司將Javascript提交給ECMA，希望這種語(yǔ)言能夠成為國(guó)際標(biāo)準(zhǔn)。

次年，ECMA 發(fā)布262號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語(yǔ)言Javascript的標(biāo)準(zhǔn)，并將這種語(yǔ)言稱為 ECMAScript，這個(gè)版本就是1.0版。

所以我們這里總結(jié)一下ECMAscript與Javascript之間的關(guān)系：

ECMAscript是Javascript的標(biāo)準(zhǔn)/規(guī)格

Javascript是ECMAscript的實(shí)現(xiàn)（另外的 ECMAScript 語(yǔ)言還有 Jscript 和 ActionScript）

但是我們一般日常說(shuō)的ECMAScript就是Javascript的意思，這兩個(gè)詞是可以互換的，不過(guò)還是要清楚它們的區(qū)別。

　　

（2）ECMAScript 6.0（ES6） / ECMAScript 2015（ES2015）

2011年，ECMAScript 5.1版發(fā)布后，就開(kāi)始制定6.0版了。因此，ES6 這個(gè)詞的原意，就是指 ECMAScript 5.1版的下一個(gè)版本。

因?yàn)镋CMA標(biāo)準(zhǔn)委員會(huì)會(huì)在每年6月份更新并正式發(fā)布一次新的ECMAScript標(biāo)準(zhǔn)，作為當(dāng)年的正式版本。

然后接下來(lái)的時(shí)間就是在這個(gè)版本的基礎(chǔ)上面做改動(dòng)，一直到下年的6月份。這樣一來(lái)其實(shí)就不需要用版本號(hào)來(lái)區(qū)分了了，用年份標(biāo)記即可。

ES6 的第一個(gè)版本，就這樣在2015年6月發(fā)布了，正式名稱就是《ECMAScript 2015標(biāo)準(zhǔn)》（簡(jiǎn)稱 ES2015）。

2016年6月，小幅修訂的《ECMAScript 2016標(biāo)準(zhǔn)》（簡(jiǎn)稱 ES2016）如期發(fā)布，這個(gè)版本可以看作是 ES6.1 版，因?yàn)閮烧叩牟町惙浅Ｐ?#xff08;只新增了數(shù)組實(shí)例的includes方法和指數(shù)運(yùn)算符），基本上是同一個(gè)標(biāo)準(zhǔn)。根據(jù)計(jì)劃，2017年6月發(fā)布 ES2017 標(biāo)準(zhǔn)。

因此，ECMAScript6.0既是一個(gè)版本名稱，也是一個(gè)類別。版本名稱是指5.1版以后的 ECMAScript 的下一代標(biāo)準(zhǔn)，類別是指它涵蓋了ES2015、ES2016、ES2017等等。

而ES2015 則是正式名稱，特指該年發(fā)布的正式版本的語(yǔ)言標(biāo)準(zhǔn)。

?

2.ECMAScript 6.0新特性

之前剛開(kāi)始接觸Javascript的時(shí)候ES6還沒(méi)推出，用的還是ES5的標(biāo)準(zhǔn)，那么新推出的ES6有哪些新特性呢？

下文我將總結(jié)一些在ES6的學(xué)習(xí)中接觸到的一些比較常用的語(yǔ)法特性，具體有以下幾項(xiàng)：

（1）let, const

（2）class, extends, super

（3）arrow function

（4）template string

（5）destructuring

（6）default, reat

?

--------------------華麗麗的分界線---------------------

?

（1）let, const

let, const的作用與var類似，都是用于聲明變量的，但是它們減少了var在作用域以及賦值方面的缺陷，下面我們來(lái)看一下。

①var在作用域方面的缺陷

var name = 'zach'while (true) {var name = 'obama'console.log(name) //obamabreak }console.log(name) //obama

使用var兩次輸出都是obama，這是因?yàn)镋S5只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域，這帶來(lái)很多不合理的場(chǎng)景。第一種場(chǎng)景就是你現(xiàn)在看到的內(nèi)層變量覆蓋外層變量。而let則實(shí)際上為JavaScript新增了塊級(jí)作用域。用它所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

let name = 'zach'while (true) {let name = 'obama'console.log(name) //obamabreak }console.log(name) //zach

另外一個(gè)var帶來(lái)的不合理場(chǎng)景就是用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量，看下面的例子：

var a = []; for (var i = 0; i < 10; i++) {a[i] = function () {console.log(i);}; } a[6](); // 10

上面代碼中，變量i是var聲明的，在全局范圍內(nèi)都有效,所以全局只有一個(gè)變量i。每一次循環(huán)，變量i的值都會(huì)發(fā)生改變，而循環(huán)內(nèi)被賦給數(shù)組a的function在運(yùn)行時(shí)，會(huì)通過(guò)閉包讀到這同一個(gè)變量i，導(dǎo)致最后輸出的是最后一輪的i的值，也就是10。而使用let則不會(huì)出現(xiàn)這個(gè)問(wèn)題。

var a = []; for (let i = 0; i < 10; i++) {a[i] = function () {console.log(i);}; } a[6](); // 6

?上面代碼中，變量i是let聲明的，當(dāng)前的i只在本輪循環(huán)有效，所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量，所以最后輸出的是6。你可能會(huì)問(wèn)，如果每一輪循環(huán)的變量i都是重新聲明的，那它怎么知道上一輪循環(huán)的值，從而計(jì)算出本輪循環(huán)的值？這是因?yàn)?JavaScript 引擎內(nèi)部會(huì)記住上一輪循環(huán)的值，初始化本輪的變量i時(shí)，就在上一輪循環(huán)的基礎(chǔ)上進(jìn)行計(jì)算。

另外，for循環(huán)還有一個(gè)特別之處，就是循環(huán)語(yǔ)句部分是一個(gè)父作用域，而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域。

for (let i = 0; i < 3; i++) {let i = 'abc';console.log(i); } // abc // abc // abc

上面代碼輸出了3次abc，這表明函數(shù)內(nèi)部的變量i和外部的變量i是分離的。

?

?

②var在賦值方面的缺陷

從上面的例子我們可以看出，var的賦值是可以很輕易地被改變的

var name = 'zach'while (true) {var name = 'obama'console.log(name) //obamabreak }console.log(name) //obama

這就帶來(lái)了一個(gè)問(wèn)題，一些程序中比較重要的變量很容易就會(huì)被他人，特別是你毫不知情的隊(duì)友改變了，這就給我們大型程序的開(kāi)發(fā)帶來(lái)了麻煩。

當(dāng)然上文僅僅是我設(shè)想的一個(gè)場(chǎng)景，我們的程序中更多的時(shí)候是需要一些約定俗成，值不變的常量，比如說(shuō)pi。

在ES6中，我們添加了const特性來(lái)聲明常量。一旦聲明，常量的值就不能改變。

const PI = Math.PIPI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

當(dāng)我們嘗試去改變用const聲明的常量時(shí)，瀏覽器就會(huì)報(bào)錯(cuò)。
const有一個(gè)很好的應(yīng)用場(chǎng)景，就是當(dāng)我們引用第三方庫(kù)的時(shí)聲明的變量，用const來(lái)聲明可以避免未來(lái)不小心重命名而導(dǎo)致出現(xiàn)bug：

const monent = require('moment')

?

（2）class, extends, super

?ES6還有一大特點(diǎn)就是它跟我們所熟知的入門級(jí)語(yǔ)言C、C++更像了，因?yàn)樗肓薱lass（類）這個(gè)概念。

在ES5的年代，js是沒(méi)有特定的class這個(gè)概念的，所以我們之前一般通過(guò)構(gòu)造函數(shù)定義并生成新對(duì)象，如下圖：

function Point(x, y) {this.x = x;this.y = y; }Point.prototype.toString = function () {return '(' + this.x + ', ' + this.y + ')'; };var p = new Point(1, 2);

但是上面這種寫法跟傳統(tǒng)的面向?qū)ο笳Z(yǔ)言（比如C++和Java）差異很大，很容易讓剛接觸的程序員感到困惑。

ES6提供了更接近傳統(tǒng)的面向?qū)ο笳Z(yǔ)言的寫法，引入了Class（類）這個(gè)概念。

在ES6中，通過(guò)class關(guān)鍵字，我們可以定義類。

但其實(shí)ES6的class僅僅是個(gè)名字/寫法而已，因?yàn)樗慕^大部分功能，ES5都可以做到。

不過(guò)新的class寫法讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法，這樣就可以更接近企業(yè)級(jí)的開(kāi)發(fā)語(yǔ)言。

上面的代碼用ES6的“類”改寫，就是下面這樣。

//定義類 class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';} }

上面代碼首先用class定義了一個(gè)“類”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對(duì)象。簡(jiǎn)單地說(shuō)，constructor內(nèi)定義的方法和屬性是實(shí)例對(duì)象自己的，而constructor外定義的方法和屬性則是所有實(shí)例對(duì)象可以共享的。

Point類除了構(gòu)造方法，還定義了一個(gè)toString方法。注意，定義“類”的方法的時(shí)候，前面不需要加上function這個(gè)關(guān)鍵字，直接把函數(shù)定義放進(jìn)去了就可以了。另外，方法之間不需要逗號(hào)分隔，加了會(huì)報(bào)錯(cuò)。

ES6的類，完全可以看作構(gòu)造函數(shù)的另一種寫法。

class Point {// ... }typeof Point // "function" Point === Point.prototype.constructor // true

?

Class之間可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。下面定義了一個(gè)Cat類，該類通過(guò)extends關(guān)鍵字，繼承了Animal類的所有屬性和方法。

class Animal {constructor(){this.type = 'animal'}says(say){console.log(this.type + ' says ' + say)} }let animal = new Animal() animal.says('hello') //animal says hello class Cat extends Animal {constructor(){super()this.type = 'cat'} }let cat = new Cat() cat.says('hello') //cat says hello

super關(guān)鍵字，它指代父類的實(shí)例（即父類的this對(duì)象）。子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇悰](méi)有自己的this對(duì)象，而是繼承父類的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類就得不到this對(duì)象。

ES6的繼承機(jī)制，實(shí)質(zhì)是先創(chuàng)造父類的實(shí)例對(duì)象this（所以必須先調(diào)用super方法），然后再用子類的構(gòu)造函數(shù)修改this。

?

?

（3）arrow function

?ES6帶來(lái)的還有一個(gè)新特性，就是簡(jiǎn)潔。

arrow function應(yīng)該是ES6最最常用的一個(gè)新特性了，用它來(lái)寫function比原來(lái)的寫法要簡(jiǎn)潔清晰很多:

function(i){ return i + 1; } //ES5 (i) => i + 1 //ES6

如果function有多行內(nèi)容，則需要用{}將其括起來(lái)：

function(x, y) { x++;y--;return x + y; }//ES5 (x, y) => {x++; y--; return x+y}//ES6

?

另外ES5在使用this的時(shí)候也需要小心混淆：

class Animal {constructor(){this.type = 'animal'}says(say){setTimeout(function(){console.log(this.type + ' says ' + say)}, 1000)} }var animal = new Animal()animal.says('hi') //undefined says hi

運(yùn)行上面的代碼會(huì)報(bào)錯(cuò)，這是因?yàn)閟etTimeout中的this指向的是全局對(duì)象。

一般用ES5的解決方法有傳遞this或者bind(this)這些， 但現(xiàn)在我們有了箭頭函數(shù)，就不需要這么麻煩了：

class Animal {constructor(){this.type = 'animal'}says(say){setTimeout( () => {console.log(this.type + ' says ' + say)}, 1000)} }var animal = new Animal()animal.says('hi') //animal says hi

當(dāng)我們使用箭頭函數(shù)時(shí)，函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。
并不是因?yàn)榧^函數(shù)內(nèi)部有綁定this的機(jī)制，實(shí)際原因是箭頭函數(shù)根本沒(méi)有自己的this，它的this是繼承外面的，因此內(nèi)部的this就是外層代碼塊的this。

?

?

但是在這里我們要說(shuō)的是，arrow function也并不是一勞永逸的，特別是在你并不知道this指向哪的時(shí)候，你需要慎用arrow function。

因?yàn)閍rrow function是?Lexical scoping（詞法作用域），this指向定義Arrow Function時(shí)外圍, 而不是運(yùn)行時(shí)的對(duì)象。

詞法作用域：?變量的作用域是在定義時(shí)決定而不是執(zhí)行時(shí)決定，也就是說(shuō)詞法作用域取決于源碼，通過(guò)靜態(tài)分析就能確定，因此詞法作用域也叫做靜態(tài)作用域。

下面我們將根據(jù)文章：Do ES6 Arrow Functions Really Solve “this” In JavaScript? 來(lái)分析。

如下代碼：

// run this in node v4 to see the "expected" behaviorthis.test = "attached to the module";var foo = {test: "attached to an object" };// a method to create methods foo.method = function(name, cb){this[name] = cb; };// use an arrow function and get // lexical analysis of "this" foo.method("bar", () => {// not what you expected, maybe?console.log(this.test); });foo.bar();

輸出為：“attached to the module”而不是“attached to an object”

因?yàn)?/p>

就像我們所說(shuō)的，arrow function是?Lexical scoping，因?yàn)樵趂oo.method("bar", () => {的外圍并沒(méi)有包含著它的代碼，所以，foo.bar()中的this.test值將永遠(yuǎn)是“attached to the module”。

?

?

（4）template string

?這個(gè)新特性可以幫助我們插入大段的html內(nèi)容到文檔中去。傳統(tǒng)的寫法一般比較麻煩，所以之前我們通常會(huì)引用一些模板工具庫(kù)，比如mustache等等。代碼如下：

$("#result").append("There are <b>" + basket.count + "</b> " +"items in your basket, " +"<em>" + basket.onSale +"</em> are on sale!" );

我們要用一堆的'+'號(hào)來(lái)連接文本與變量，而使用ES6的新特性模板字符串``后，我們可以直接這么來(lái)寫：

$("#result").append(`There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale! `);

在ES6中，我們用`來(lái)標(biāo)識(shí)開(kāi)始和結(jié)尾，用${}來(lái)引用變量，而且所有的空格和縮進(jìn)都會(huì)被保留在輸出之中。

?

?

（5）destructuring

?ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。

當(dāng)使用ES5的時(shí)候，我們一般是這么寫的：

let cat = 'ken' let dog = 'lili' let zoo = {cat: cat, dog: dog} console.log(zoo) //Object {cat: "ken", dog: "lili"}

用ES6完全可以像下面這么寫：

let cat = 'ken' let dog = 'lili' let zoo = {cat, dog} console.log(zoo) //Object {cat: "ken", dog: "lili"}

反過(guò)來(lái)可以這么寫：

let dog = {type: 'animal', many: 2} let { type, many} = dog console.log(type, many) //animal 2

?

?

（6）default, reat

?default很簡(jiǎn)單，意思就是默認(rèn)值。大家可以看下面的例子，調(diào)用animal()方法時(shí)忘了傳參數(shù)，傳統(tǒng)的做法就是加上這一句type = type || 'cat'來(lái)指定默認(rèn)值。

function animal(type){type = type || 'cat' console.log(type) } animal()

如果用ES6我們可以直接這么寫：

function animal(type = 'cat'){console.log(type) } animal()

?

最后一個(gè)rest語(yǔ)法也很簡(jiǎn)單，直接看例子：

function animals(...types){console.log(types) } animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

而如果不用ES6的話，我們則得使用ES5的arguments。

?

?

3.ECMAScript 6.0性能總結(jié)與個(gè)人體會(huì)

總體來(lái)看，ES6正在朝著更簡(jiǎn)潔、更友好、可讀性更強(qiáng)、更模塊化的方向發(fā)展，這些特性都能支持其成為一個(gè)企業(yè)級(jí)的開(kāi)發(fā)語(yǔ)言，可以去開(kāi)發(fā)大型的復(fù)雜應(yīng)用。

本文章從ES6的來(lái)歷，講到ES6的一些新特性。但以上僅僅列出了ES6中一些比較常用的新特性，而且分析的并不夠深入，所以我們還是需要再去深一步學(xué)習(xí)和摸索的。“實(shí)踐是檢驗(yàn)真理的唯一方法”，以后在實(shí)戰(zhàn)項(xiàng)目中遇到的問(wèn)題我會(huì)再來(lái)寫博客分析的。

?

?

4.參考文獻(xiàn)

http://www.jianshu.com/p/ebfeb687eb70

http://es6.ruanyifeng.com/#docs/function

http://cnodejs.org/topic/57266e375a26c4a841ecbf40

https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/

http://www.cnblogs.com/jiangyi666/p/5998914.html

http://blog.csdn.net/pengju_guo/article/details/7292080

轉(zhuǎn)載于:https://www.cnblogs.com/luffa/p/6907785.html

總結(jié)

以上是生活随笔為你收集整理的ES6学习心得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。