簡述ES5 ES6

　　好久前的某一天，一位大神問我，你知道ES6相對於ES5有什麼改進嗎？

　　我一臉懵逼的反問，那個啥，啥是ES五、ES6啊。

　　不得不認可與大神之間的差距，回來深思了這個問題，結合之前的知識，算是有了點眉目。

　　JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，咱們知道javascript的三個基本組成部分是ECMAJavascript(European Computer Manufacturers Association javascript,也就是前面說的ES,但以前你問我ES5orES6我就真懵逼了),BOM,DOM,es能夠看出是javascript的前身，是javascript的內核定義用法，而全部前端框架、ui庫都是基於javascript的，也就是用原生js寫的，ES的重要性不言而喻，若是你習慣用輪子，好比各類jqueryui，平時也不多用js寫東西，對這個就不很很瞭解，若是你是大牛，常常造輪子寫東西，github上start一片，博客上粉絲衆多，就必然對這要有很深的研究，否則寫的東西沒有深度的。

　　ES5和ES6從字面上理解是一個升級的過程，出了一代新標準，發展迅速的it行業，去了解和適應一種新標準用法頗有必要，這也是我爲何選擇寫這個主題；想要了解一些原始的定義和由來，我則建議你閱讀一些相關的資料，解釋了EScript的前世此生，給你們科普一段：

Ecma標準創建在一些本來的技術上，最爲著名的是JavaScript(網景)和JScript (微軟)。語言由網景的Brendan Eich發明而第一次出如今這個公司的Navigator 2.0瀏覽器上。它出如今全部Netscape後來的瀏覽器以及微軟從Internet Explorer 3.0以後的全部瀏覽器上。

這一標準的編制自1996年十一月開始。這一Ecma標準的第一個版本被1997年六月的Ecma General Assembly採納。

上述Ecma標準被以快速跟進流程提交至ISO/IEC JTC 1，並做爲於1998年四月做爲ISO/IEC 16262經過。1998年六月Ecma General Assembly經過了ECMA-262第二版以保持它與ISO/IEC 16262的徹底一致性。初版到第二版的變動僅僅是編輯性質的。

第三版標準引入了強大的正則表達式，更佳的字符串處理，新的控制語句，try/catch異常處理，更嚴密地錯誤定義，格式化的數字輸出以及一些爲國際化和將來語言成長預留的小變動。ECMAScript標準的第三版1999年十二月的Ecma General Assembly採納並於2002年六月做爲ISO/IEC 16262:2002發佈。

自第三版發佈以來，ECMAScript因其與萬維網的關聯而得到了普遍採用，它已經成爲全部web瀏覽器實質上都提供的一種編程語言。爲了編制第四版ECMAScript，有不少有意義的工做。儘管這工做沒能完成並且也沒有做爲ECMAScript的第四版發佈，它促進了語言的進化。ECMAScript第五版（發佈爲ECMA-262 5th edition）紙面化了不少事實上已經在瀏覽器造成共識的語言規範解析而且增長了對自第三版發佈以來的新功能的支持。這些功能包括訪問器屬性，反射建立以及對象檢測，屬性特性的程序控制，新增的數組操做函數，JSON對象編碼格式，以及提供了改進的錯誤檢查以及程序安全性的嚴格模式。

這一ECMAScript 5.1版本標準徹底與國際標準ISO/IEC 16262:2011的第三版本一致。

ECMAScript是一個充滿活力的語言，並且語言的演進還沒有完成。有意義的技術性加強將會在將來版本的規範中持續進行。

這一Ecma規範由2011年六月Ecma General Assembly採納             --ES5

 　　須要注意的是，EScript以前的更新迭代版本叫法都是按照ESx來的，而ES6的叫法其實是延續了這個習慣，截止發佈日期，JavaScript的官方名稱是ECMAScript 2015，Ecma國際意在更頻繁地發佈包含小規模增量更新的新版本，下一版本將於2016年發佈，命名爲ECMAScript 2016。之後的更新中，新版本將按照ECMAScript+年份的形式發佈，ecmascript2015官方說明。近年來更新的頻率愈來愈高，也反映了這一語言的發展迅速，功能愈來愈強，做爲和這些緊密相關的碼農大神們也要持續的學習跟進啊。

　　ES6在2015年發佈，相對於上一版本，加入了不少新特性，ES5無從提及(不知道從哪提及，就是平時碼的javascript吧)，因此就說下ES6的新特性吧，ES6的新特性有：let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments;

　　相關的詳細說明你們能夠翻閱官網說明，下面我也會舉一些小例子幫助理解；

　　let,const

　　用法和var相似，定義變量，不一樣的是let爲javascript增長了塊級做用域，聲明只在所在代碼塊有效，不影響做用域外的同名變量；你能夠嘗試碼下

let name="x";
if(true){
    let name="y";
    alert(name);
}
alert(name);

 　　你會發現網頁會依次打印y和x，若是是var聲明，name會被從新賦值；const也是聲明，不一樣的是const聲明後的值不可更改，也即readonly，這個用的地方不多吧，爲避免衝突的場景可使用，以避免報錯；

　　class,extends,super

　　在ES6以前，原型、構造函數、繼承對於大多說人來講是個麻煩點(一直到如今，我還常常去翻工具書...)，而ES6中的class,extends,super很大程度上改觀了這個問題，好比以前關於構造函數、繼承可能這樣寫：

function Person(name,job){
      this.name="personA";
      this.job="work";
      this.dowhat=function(this.job){
          alert(this.name+" should "+this.job)  
    }
}
var person=new Person("personB","player");

　　es相對於編程語言是弱類型，一個var能夠聲明一切，而後在聲明的對象中經過原型繼承來衍生其餘方法，做爲習慣強類型語言的我經常在理解上出錯，而結合class,extends,super的es6原型寫法更清晰、更偏向面向對象的寫法：

        class Person{
            constructor(){
                this.name="Person"
            } 
            dowhat(todo){
                alert(this.name+" Should "+todo);
            }
        }
        let person=new Person();
        person.dowhat("work");
        class Boy extends Person{
            constructor(){
                super();
                this.name="Boy"
            }
        }
        let boy=new Boy();
        boy.dowhat("go to school");

　　（ps：博客園爲毛不提供在線測試的功能，一點擊就運行測試，就不用複製了，仍是我沒發現這個功能？）

　　面向對象的思想有木有！有木有！有木有！經過class類定義創造一個「類」，而且有構造函數constructor，而this對象表明實例對象，構造函數定義自身的方法和屬性，構造函數外的方法和屬性經過繼承能夠共享，class之間經過extends實現繼承，Boy經過extends繼承了Person定義的方法和屬性，比ES5好理解的多，而super這裏代指父級的示例(this)，子類必須在構造函數中調用super，不然在新建實例的時候會報錯，ES6的繼承機制，實質是先創造父類的實例對象this，經過super的調用，實現子類的繼承和修改。

　　Arrow Function

　　字面理解就是箭頭功能，什麼鬼；一種用箭頭「=>」來定義函數的新語法，簡單示範：

var sum = (num1, num2) => num1 + num2;
//等同於
function sum(num1,num2){
      return num1+num2      
}

　　它的功能不止於寫法簡便，與傳統的js寫法主要區別是，對 this 的關聯，函數內置 this 的值，取決於箭頭函數在哪兒定義，而非箭頭函數執行的上下文環境。

　　template string

　　字面理解也便是模板字符串了，實際它的做用也是在插入比較多的html模板內容時候使用的，好比傳統的拼接是這樣的：

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

　　使用template string 是這樣的：

$(".class p").append(`
  There are <b>${count}</b> items
   in your basket, <em>${onSale}</em>
  are on sale!
`);

　　用反引號（`）來標識起始，用${}來引用變量，而且會保留引用中的空格和縮進，比拼接方便多了。

　　destruturing

//直接上碼
var boy="lilei";
var girl="hanmeimei";
var human={boy:boy,girl:girl};
console.log(human)  //Object {boy: "lilei", girl: "hanmeimei"}

//destructuring
var boy="lilei";
var girl="hanmeimei";
var human={boy,girl};
console.log(human)  //Object {boy: "lilei", girl: "hanmeimei"}

　　也便是，ES6中容許按照必定的模式，從數組和對象中取值和賦值，就就是destruturing。

　　default

　　ES6中容許爲函數設置默認值，這個很好理解：

function log(x, y = 'world') {
    console.log(x, y);
}
log('Hello');   // Hello world
log('Hello', 'China');  // Hello China
log('Hello', '');   // Hello

　　rest

　　休息？這個理解也比較容易，上來就懂：

function person(...types){
    console.log(types)
}
person('lilei', 'hanmeimei', 'lili') //['lilei', 'hanmeimei', 'lili']

　　先寫到這裏吧，可能有理解上的誤區，歡迎小夥伴們指正，之後再來慢慢補全修正。

　　中秋節到了，祝你們中秋節快樂，立刻來的國慶節快樂！

　　

　　原文地址：簡述ES5 ES6，薛陳磊 | Share the world