ECMAScript 5和ECMAScript6的新特性以及瀏覽器支持情況


 

ECMAScript簡介:

它是一種由Ecma國際(前身為歐洲計算機制造商協會)制定和發布的腳本語言規范,javascript在它基礎上經行了自己的封裝。但通常來說,術語ECMAScript和javascript指的是同一個。業界所說的ECMAScript其實是指一種規范,或者說是一個標准。具體點來說,它其實就是一份文檔

JS包含三個部分:ECMAScript(核心)DOM(文檔對象模型)BOM(瀏覽器對象模型),ECMAScript是js語言的基礎。

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

(2) 第四版於2008年7月發布前被廢棄。

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

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

瀏覽器支持

一般來說,除了針對個別特性的特殊說明,各大主流瀏覽器都支持es5,包括

  • Chrome 13+
  • Firefox 4+
  • Safari 5.1*
  • IE 9*

其中IE9不支持es的嚴格模式,從IE10開始支持。Safari 5.1不支持 Function.prototype.bind

IE8只支持definePropertygetOwnPropertyDescriptor的部分特性和JSon的新特性,IE9支持除了嚴格模式以外的新特性,IE10和其他主流瀏覽器都支持了。
因此在PC端開發的時候,要注意IE9以下的兼容,移動端開發時,可以比較放心了

Strict Mode,即所謂的嚴格模式。在嚴格模式下,我們不可以使用一個未經聲明的變量以前沒有用var聲明的變量,會自動成為全局變量,而在嚴格模式下,會報錯。例:

"use strict"
function foo() {
var testVar = 4;
return testVar;
}
// This causes a syntax error.
testVar = 5; //全局變量
開啟嚴格模式的方法很簡單,只需要在文件的頂部寫上字符串 use strict 即可。當然這需要執行環境支持嚴格模式。另外由於 use strict 其實是一個字符串常量。那么即使遇到不支持嚴格模式的環境,
這行字符串只會被安全的忽略,不會帶來任何的問題。

JSON對象

JSON.parse(jsonstr); //可以將json字符串轉換成json對象 
JSON.stringify(jsonobj); //可以將json對象轉換成json對符串

ES5提供一個內置的(全局)JSON對象,可用來序列化( JSON.stringfy反序列化( parse )對象為JSON格式。其一般性用法如下,

var test = {
"name": "gejiawen",
"age": 22
};
console.log(JSON.strinfy(test)); // '{"name": "gejiawen", "age": 22}'
console.log(JSON.parse('{"name": "larry"}')); // Object {name: "larry"}

JSON對象提供的 parse 方法還提供第二個參數,用於對具體的反序列化操作做處理。比如,

JSON.parse('{"name": "gejiawen", "age": 22, "lucky": "13"}', function(key, value) {
return typeof value === 'string' ? parseInt(value) : value;
});

這里我們在回調函數中對解析的每一對鍵值對作處理,如果其是一個數字字符串,我們則對其進行 parseInt 操作,確保返回的 value 必定是數值型的。

JSON對象提供的 stringify 方法也會提供第二個參數,用於解析的預處理,同時也會提供第三個參數,用於格式化json字符串。比如,

var o = {
name: 'gejiawen',
age: 22,
lucky: '13'
};
var ret = JSON.stringify(o, function(key, value) {
return typeof value === 'string' ? undefined : value;
}, 4);
console.log(ret);

上面代碼在輸出時,得到的字符串將不會再呈現一行輸出,而是正常的格式化輸出,並采用4個space進行格式化。

另外,如果預處理函數的返回值為 undefined ,則此鍵值對將不會包含在最終的JSON字符串中。所以上面代碼最終的結果是,

"{
"age": 22
}"
新增 Object 接口比較常用的有如下幾個,
  • Object.create
  • Object.defineProperties
  • Object.keys

新增 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上的返回值不正確)

Function.prototype.bind

bind()方法會創建一個新函數,稱為綁定函數.當調用這個綁定函數時,綁定函數會以創建它時傳入 bind()方法的第一個參數作為 this,傳入 bind() 方法的第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

此方法的用法如下,

fun.bind(thisArg[, arg1[, arg2[, ...]]])

使用 bind 可以為函數自定義 this 指針。它的常見使用場景如下,

this.x = 9; 
var module = {
x: 81,
getX: function() {
return this.x;
}
};
module.getX(); // 81
var getX = module.getX;
getX(); // 9, 因為在這個例子中,"this"指向全局對象
// 創建一個'this'綁定到module的函數
var boundGetX = getX.bind(module);
boundGetX(); // 81

Javascript中重新綁定 this 變量的語法還有 call apply 。不過 bind 顯然與它們有着明顯的不同。 bind 將會返回一個新的函數,而 call 或者 apply 並不會返回一個新的函數,它們將會使用新的 this 指針直接進行函數調用。

 

ES6的新特性(http://www.cnblogs.com/Wayou/p/es6_new_features.html)

(1)箭頭操作符=>:操作符左邊為輸入的參數,而右邊則是進行的操作以及返回的值Inputs=>outputs。

在JS中回調是經常的事,而一般回調又以匿名函數的形式出現,每次都需要寫一個function,甚是繁瑣。當引入箭頭操作符后可以方便地寫回調了。請看下面的例子。

var array = [1, 2, 3]; //傳統寫法 array.forEach(function(v, i, a) { console.log(v); }); //ES6 array.forEach(v = > console.log(v)); 

(2)類的支持--class關鍵字:JS本身就是面向對象的,ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支持后,對象的創建,繼承更加直觀了,並且父類方法的調用,實例化,靜態方法和構造函數等概念都更加形象化。

 

//類的定義
class Animal { //ES6中新型構造器 constructor(name) { this.name = name; } //實例方法 sayName() { console.log('My name is '+this.name); } } //類的繼承 class Programmer extends Animal { constructor(name) { //直接調用父類構造器進行初始化 super(name); } program() { console.log("I'm coding..."); } } //測試我們的類 var animal=new Animal('dummy'), wayou=new Programmer('wayou'); animal.sayName();//輸出 ‘My name is dummy’ wayou.sayName();//輸出 ‘My name is wayou’ wayou.program();//輸出 ‘I'm coding...’ 

(3)增強的對象字面量

具體表現在:

  • 可以在對象字面量里面定義原型
  • 定義方法可以不用function關鍵字
  • 直接調用父類方法

(4)字符串模板:ES6中允許使用反引號 ` 來創建字符串,此種方法創建的字符串里面可以包含由美元符號加花括號包裹的變量${vraible}。

//產生一個隨機數
var num=Math.random(); //將這個數字輸出到console console.log(`your num is ${num}`); 

(5)解構
(6)參數默認值,不定參數,拓展參數
(7)let與const 關鍵字:可以把let看成var,它定義的變量被限定在了特定范圍內才能使用,而離開這個范圍則無效。const則很直觀,用來定義常量,即無法被更改值的變量。

for (let i=0;i<2;i++)console.log(i);//輸出: 0,1 console.log(i);//輸出:undefined,嚴格模式下會報錯
(8)for of 值遍歷for in 循環用於遍歷數組,類數組或對象,ES6中新引入的for of循環功能相似,不同的是每次循環它提供的不是序號而是值。

var someArray = [ "a", "b", "c" ]; for (v of someArray) { console.log(v);//輸出 a,b,c }

(9)iterator, generator
(10)模塊
(11)Proxies
(12)Symbols
(13)Math,Number,String,Object 的新API
(14)Promises

 

ES6的瀏覽器支持情況

 

鏈接:http://www.xuebuyuan.com/2122607.html
基本上是沒有瀏覽器完全支持的,所以還是不要直接用的好。
但是有轉換器 (更准確地說是源代碼到源代碼的編譯器) 可以把ES6轉換為被瀏覽器接受的ES5,比如Babel以及Traceur 之類的項目。其中Babel對 ES6 的支持程度比其它同類更高,而且 Babel 擁有完善的文檔和一個很棒的在線交互式編程環境,因此用的比較多。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM