ECMAScript
第六版已經於2015年發布,某些瀏覽器已經開始支持ES6
了,這篇文章整理一下ES5
以及ES6
的新特性。
ECMAScript簡介
它是一種由Ecma國際(前身為歐洲計算機制造商協會)制定和發布的腳本語言規范,JavaScript
在它的基礎上進行了自己的封裝。但其實通常來說,術語ECMAScript
和JavaScript
指的是同一個東西。
JS
包含三個部分:ECMAScript(核心)
,DOM(文檔對象模型)
,BOM(瀏覽器對象模型)
。ECMAScript
是JS
語言的基礎。
ECMAScript
的最新版是第六版ECMAScript 6
,於2015年6月17日發布,截止發布日期,JavaScript
的官方名稱是ECMAScript 2015
,是當前最新的正式規范。
ECMAScript
的各個版本:(從第三版開始說)
(1) 第三版ECMAScript3
新增了對正則表達式、新控制語句、try-catch異常處理的支持,修改了字符處理、錯誤定義和數值輸出等內容。標志着ECMAScript成為了一門真正的編程語言。
(2) 第四版於2008年7月發布前被廢棄。
(3) 第五版ECMAScript5
力求澄清第3版中的歧義,並添加了新的功能。新功能包括:原生JSON對象、繼承的方法、高級屬性的定義以及引入嚴格模式。
(4) 第六版ECMAScript6
是繼ES5之后的一次主要改進,增添了許多必要的特性,例如:模塊和類以及一些實用特性,Maps、Sets、Promises、生成器(Generators)等。
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只支持defineProperty
、getOwnPropertyDescriptor
的部分特性和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 擁有完善的文檔和一個很棒的在線交互式編程環境,因此用的比較多。