ECMAScript5和ECMAScript6的新特性及瀏覽器支持狀況

ECMAScript第六版已經於2015年發佈,某些瀏覽器已經開始支持ES6了,這篇文章整理一下ES5以及ES6的新特性。html

ECMAScript簡介

它是一種由Ecma國際(前身爲歐洲計算機制造商協會)制定和發佈的腳本語言規範,JavaScript在它的基礎上進行了本身的封裝。但其實一般來講,術語ECMAScriptJavaScript指的是同一個東西。
JS包含三個部分:ECMAScript(核心)DOM(文檔對象模型)BOM(瀏覽器對象模型)ECMAScriptJS語言的基礎。
ECMAScript的最新版是第六版ECMAScript 6,於2015年6月17日發佈,截止發佈日期,JavaScript的官方名稱是ECMAScript 2015,是當前最新的正式規範。git

ECMAScript的各個版本:(從第三版開始說)es6

(1) 第三版ECMAScript3新增了對正則表達式、新控制語句、try-catch異常處理的支持,修改了字符處理、錯誤定義和數值輸出等內容。標誌着ECMAScript成爲了一門真正的編程語言。github

(2) 第四版於2008年7月發佈前被廢棄。正則表達式

(3) 第五版ECMAScript5力求澄清第3版中的歧義,並添加了新的功能。新功能包括:原生JSON對象、繼承的方法、高級屬性的定義以及引入嚴格模式。編程

(4) 第六版ECMAScript6是繼ES5以後的一次主要改進,增添了許多必要的特性,例如:模塊和類以及一些實用特性,Maps、Sets、Promises、生成器(Generators)等。json

ECMAScript5的新特性

參考連接:http://www.tuicool.com/articles/vMv6b2z
並非全部瀏覽器都徹底支持ES5的新特性,好比低版本的IE,可是其餘的主流瀏覽器都支持了,其中IE9不支持ES的嚴格模式,從IE10開始支持。Safari 5.1不支持Function.prototype.bind。這也就是說,在移動端能夠比較放心地使用ES5。
(1)嚴格模式
Strict Mode, 即所謂的嚴格模式。嚴格模式的意義是爲了提供一種更佳良好錯誤檢查機制,讓你規避掉一些語言自己的bad point。
開啓嚴格模式的方法很簡單,只須要在文件的頂部寫上字符串 use strict便可。固然這須要執行環境支持嚴格模式。另外因爲use strict實際上是一個字符串常量。那麼即便遇到不支持嚴格模式的環境,這行字符串只會被安全的忽略,不會帶來任何的問題。
好比在嚴格模式下,咱們不可使用一個未經聲明的變量。之前沒有用var聲明的變量,會自動成爲全局變量,而在嚴格模式下,會報錯。
還有另外一些會出現問題的地方,附連接:
http://www.jb51.net/article/78974.htm
(2)JSON對象
JSON.parse(jsonstr); //能夠將json字符串轉換成json對象 
JSON.stringify(jsonobj); //能夠將json對象轉換成json對符串 
(3)新增 Object接口數組

對象 構造器 說明
Object getPrototypeOf 返回對象的原型
Object getOwnPropertyDescriptor 返回對象自有屬性的屬性描述符
Object getOwnPropertyNames 返回一個數組,包括對象全部自有屬性名稱集合(包括不可枚舉的屬性)
Object create 建立一個擁有置頂原型和若干個指定屬性的對象
Object defineProperty 給對象定義一個新屬性,或者修改已有的屬性,並返回
Object defineProperties 在一個對象上添加或修改一個或者多個自有屬性,並返回該對象
Object seal 鎖定對象。阻止修改現有屬性的特性,並阻止添加新屬性。可是能夠修改已有屬性的值。
Object freeze 凍結對象,阻止對對象的一切操做。凍結對象將永遠不可變。
Object preventExtensions 讓一個對象變的不可擴展,也就是永遠不能再添加新的屬性。
Object isSealed 判斷對象是否被鎖定
Object isFrozen 判斷對象是否被凍結
Object isExtensible 判斷對象是否能夠被擴展
Object keys 返回一個由給定對象的全部可枚舉自身屬性的屬性名組成的數組

比較經常使用的有:瀏覽器

  • Object.create
  • Object.defineProperties
  • Object.keys

(4)新增Array接口安全

對象 構造器 說明
Array.prototype indexOf 返回根據給定元素找到的第一個索引值,不然返回-1
Array.prototype lastIndexOf 方法返回指定元素在數組中的最後一個的索引,若是不存在則返回 -1
Array.prototype every 測試數組的全部元素是否都經過了指定函數的測試
Array.prototype some 測試數組中的某些元素是否經過了指定函數的測試
Array.prototype forEach 讓數組的每一項都執行一次給定的函數
Array.prototype map 返回一個由原數組中的每一個元素調用一個指定方法後的返回值組成的新數組
Array.prototype filter 利用全部經過指定函數測試的元素建立一個新的數組,並返回
Array.prototype reduce 接收一個函數做爲累加器,數組中的每一個值(從左到右)開始縮減,最終爲一個值
Array.prototype reduceRight 接受一個函數做爲累加器,讓每一個值(從右到左,亦即從尾到頭)縮減爲一個值

這些都是比較經常使用的,另外,還有一個 Array.isArray(),用來判斷某一對象是否爲數組。(typeof判斷的話,返回object,用instanceof判斷的話,IE上的返回值不正確)
(5)Function.prototype.bind
bind()方法會建立一個新函數,稱爲綁定函數.當調用這個綁定函數時,綁定函數會以建立它時傳入bind()方法的第一個參數做爲 this,傳入 bind() 方法的第二個以及之後的參數加上綁定函數運行時自己的參數按照順序做爲原函數的參數來調用原函數。
這個方法能夠改變this的指向,爲函數自定義 this指針。
Javascript中從新綁定 this變量的語法糖還有 call和 apply 。不過 bind顯然與它們有着明顯的不一樣。 bind將會返回一個新的函數,而 call或者 apply並不會返回一個新的函數,它們將會使用新的 this指針直接進行函數調用。

ES5的瀏覽器支持狀況

http://kangax.github.io/compat-table/es5/
http://www.xuebuyuan.com/2122607.html
從這上面看來,IE8只支持definePropertygetOwnPropertyDescriptor的部分特性和JSon的新特性,IE9支持除了嚴格模式之外的新特性,IE10和其餘主流瀏覽器都支持了。
所以在PC端開發的時候,要注意IE9如下的兼容,移動端開發時,能夠比較放心了

ES6的新特性

(1)箭頭操做符=>
(2)類的支持--class關鍵字
(3)加強的對象字面量
(4)字符串模板
(5)解構
(6)參數默認值,不定參數,拓展參數
(7)let與const 關鍵字
(8)for of 值遍歷
(9)iterator, generator
(10)模塊
(11)Proxies
(12)Symbols
(13)Math,Number,String,Object 的新API
(14)Promises
新特性太多,就不一一詳細地寫了,具體請看參考文章連接:
http://www.cnblogs.com/Wayou/p/es6_new_features.html

ES6的瀏覽器支持狀況

連接:
http://www.xuebuyuan.com/2122607.html
http://kangax.github.io/compat-table/es6/
能夠看出來,基本上是沒有瀏覽器徹底支持的,因此仍是不要直接用的好。
可是有轉換器 (更準確地說是源代碼到源代碼的編譯器) 能夠把ES6轉換爲被瀏覽器接受的ES5,好比Babel以及Traceur 之類的項目。其中Babel對 ES6 的支持程度比其它同類更高,並且 Babel 擁有完善的文檔和一個很棒的在線交互式編程環境,所以用的比較多。

相關文章
相關標籤/搜索