ES5/ES3對比,重新思考ES5帶來的提升


getter/setter 存取器

es5:

var o = {a:1, b:2, get c() {return this.a + this.b}, set c(val) {this.a = val - this.b}};
console.log(o.c);
//3 o.c = 6; console.log(o.a); //4

 

 

es3:

var o = {a: 1, b: 2, getc: function() {return this.a + this.b}, setc: function(val) {this.a = val - this.b}};
console.log(o.getc());
//3 o.setc(6); console.log(o.a); //4

 

 

可以看到使用了getter/setter后虛擬屬性c用起來更加自然,與普通屬性達到了相同的使用形式。同時,如果要對現有屬性在存/取時每次都添加邏輯,可以把數據屬性改寫成存取器屬性,這樣既不用改寫現有業務代碼,同時也達到了代碼復用以及保證添加了的邏輯沒有遺漏。

 

數組迭代方法

es5:

var arr = [2,6,34,9,65,4,7];

var arr2 = arr.filter(function(val) {return val > 10});

console.log(arr2);  //[34, 65]

 

es3:

var arr = [2,6,34,9,65,4,7];

var arr2 = [];

for (var i in arr) {

  if (arr[i] > 10)

    arr2.push(arr[i]);

}

console.log(arr2);  //[34, 65]

 

 

數組的迭代方法讓我們做一些數組操作的代碼變得極為簡潔,極大的提高了可讀性和可維護性。其它的迭代方法還有indexOf, lastIndexOf, forEach, every, some, map, reduce和reduceRight。

 

String.prototype.trim()

es5:

console.log('  123  456  '.trim());  //'123  456'

 

es3:

console.log('  123  456  '.replace(/(^\s+)|(\s+$)/g, ''));  //'123  456'

 

再也不用用正則表達式去空格了,在表單驗證中極其有用。

 

Date.now()

es5:

console.log(Date.now());  //1494091196365

 

es3:

console.log(new Date().getTime());  //1494091196365

 

獲取當前時間毫秒數不再需要先創建對象了,由此帶來開發效率與運行效率的雙重提升。

 

結尾的可選逗號

es5中的字面量對象和數組在末尾可以追加逗號,便於復制、粘貼、剪切等操作:

{a: 1, b:2,}
[3,4,5,]

 

JSON相關

es5:

JSON.parse('{"a": 3}')

es3:

eval('({"a": 3})')

es5中的JSON序列化和反序列號相比es3更方便和安全。

 

繼承

es5:

var Rectangle = function (id, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width  = width;
    this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

 

es3:

var Rectangle = function (id, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width  = width;
    this.height = height;
};
Rectangle.prototype = new Shape();

 

es5使用Object.create可以實現正確的繼承。而es3缺乏Object.create則只能寫出不完美的繼承(子類還未實例化父類已經實例化執行了構造函數,構造函數不帶參數可能報錯)

 

屬性描述器

es5引入了屬性描述器,從而使我們可以設定某個屬性的可寫性、可枚舉性和可配置性。有了這些,我們可以定義不可更改的常量,也可以定義在for循環中不循環的屬性(隱藏起來)。


免責聲明!

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



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