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循環中不循環的屬性(隱藏起來)。