簡述ES5 ES6_ZenDei技術網路在線

很久前的某一天，一位大神問我，你知道ES6相對於ES5有什麼改進嗎？我一臉懵逼的反問，那個啥，啥是ES5、ES6啊。不得不承認與大神之間的差距，回來深思了這個問題，結合以前的知識，算是有了點眉目。 JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，我們知道javas ...

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

　　我一臉懵逼的反問，那個啥，啥是ES5、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']

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

　　中秋節到了，祝大家中秋節快樂，馬上來的國慶節快樂！