ES5新語法主要是體現在Object和、Array操作,同時涉及到JSON、 Function、Date 和 String類型上。
1.Object
ES5最大的特點是對象擴展很多方法。
新建對象:create( 新建一個"干凈"的對象,這里的“干凈”指的是沒有原型鏈。)
語法:Object.create(proto, [ propertiesObject ]);
proto是一個對象,作為新創建對象的原型。
如果 proto 參數不是 null 或一個對象值,則拋出一個 TypeError 異常。null表示沒有原型對象(這樣就創建了一個”干凈的對象”)
看下面的例子:
var options = { 'a':'A' } var obj = Object.create(options) obj.b = 'B' console.log(obj); //{b: 'B'} console.log(obj.__proto__) // {a: 'A'}
propertiesObject 是一個對, 它有4個值和兩個函數,分別是:
- value : 設置屬性的值
- writable : 布爾值,設置屬性是否可以被重寫,默認屬性值為false(不能被重寫)
- enumerable : 布爾值,設置屬性是否可以被枚舉,默認屬性值為false(不能被枚舉)
- configurable : 布爾值,設置屬性是否可以被刪除,默認屬性值為false(不能被刪除)
兩個函數:
- get : 函數,設置屬性返回結果
- set : 函數,有一個參數
來看看具體的用法:
writable:
var account = Object.create(Object.prototype,{ type: { value: "建設銀行", //enumerable: false //configurable: false writable: false } }); account.type="交通銀行"; console.log(account.type); //建設銀行,因為writable設置為false表示該屬性不能被修改
configurable:
var account = Object.create(Object.prototype,{ type: { value: "建設銀行", //enumerable: false configurable: false, writable: false } });account.type="交通銀行"; delete account.type; console.log(account.type); //交通銀行,configurable: false表示不能刪除該屬性值
enumerable:
var account = Object.create(Object.prototype,{ type: { value: "建設銀行", enumerable: true, configurable: false, writable: false } }); for(var i in account){ console.log(account[i]); //建設銀行,如果enumerable為true,那么打印undefined }
get和set的用法
注意:這個是用來獲取和設置屬性的值,它不能與writable用在一起,否則就報錯,如下:
function defineGetter(obj, name, getter) { Object.defineProperty(obj, name, { configurable: true, enumerable: true, get: getter }); }; var req = {}; defineGetter(req, 'xhr', function xhr(){ var val = 'xmlhttprequestx' || ''; return val.toLowerCase() === 'xmlhttprequest'; }); console.log(req.xhr); //false
設置屬性:defineProperty(0bj)和設置多個屬性defineProperties(Obj)。
凍結對象:
seal(obj) 對應: Object.isSealed
freeze(obj)對應: Object.isFrozen(除了seal(obj)之外,其中的屬性值也不能修改,即:writable:false,configureable:false);
遍歷屬性:
Object.getOwnPropertyNames
Object.keys
keys是列出所有enumerable為true的值,用它可以方便判斷一個對象是否是空對象。如
(options.meta && Object.keys(options.meta).length)?“options非空”:options為空對象
又如:
var obj = { "x":"y", "x1":"y1" }; var keys = Object.keys(obj); console.log(keys); //["x","x1"]
而getOwnPropertyNames為列出所有defineProperty方法設置的值。
var obj ={"attr1":"xyz"}; Object.defineProperty(obj,'type',{ value: "建設銀行", enumerable: false, configurable: true, writable: false }); var getPro = Object.getOwnPropertyNames(obj); console.log(getPro); //["attr1","type"] Object.keys(obj);// ["attr1"] Object.defineProperty(obj,'type',{ value: "建設銀行", enumerable: true, configurable: true, writable: false }); var getPro = Object.getOwnPropertyNames(obj); console.log(getPro); //["attr1","type"] Object.keys(obj);// ["attr1","type"]
鎖住對象
Object.preventExtensions(O) 對應Object.isExtensible:
方法用於鎖住對象屬性,使其不能夠拓展,也就是不能增加新的屬性,但是屬性的值仍然可以更改,也可以把屬性刪除,Object.isExtensible用於判斷對象是否可以被拓展。
1 var o = {}; 2 console.log(Object.isExtensible(o)); //true 3 o.lastname ="yinlei"; 4 Object.preventExtensions(o); 5 console.log(Object.isExtensible(o)); //false 6 console.log(o.lastname); //yinlei 7 o.firstname="liu"; 8 console.log(o.firstname); //undefined 9 delete o.lastname; 10 console.log("lastname="+o.lastname); //undefined
Object.getOwnPropertyDescriptor(O,property)
這個方法用於獲取defineProperty方法設置的property 特性。
var account = Object.create(Object.prototype,{ type: { value: "建設銀行", enumerable: false, configurable: false, writable: false } }); var getPro = Object.getOwnPropertyDescriptor(account,'type'); console.log(getPro); //Object {value: "建設銀行", writable: false, enumerable: false, configurable: false}
2.use strict
"嚴格模式"規定:
- 未聲明的變量賦值拋出一個
ReferenceError
, 而不是創建一個全局變量。 - 不止一次對對象字面量分配相同的屬性會拋出
SyntaxError。
- 使用
with
語句拋出SyntaxError。
- 變量必須在聲明后使用。
3.Array
Array上構建了一個靜態方法,用來判斷數據類型是否為數組
Array.isArray(["3","4"]); //true Array.isArray({"x":"y"}); //false
同時還提供了很多操作數組的方法:
其中最有用的有以下五個: indexOf、map、reduce、filter、forEach,這五個方法根據字面意思就很好理解。
4.Date獲取時間戳
var date = new Date(); //1480312139830 console.log(date.getTime()); //ES5 Date.now() //Date構造類型添加一個now()靜態方法
5.Function.prototype.bind(this,arg1,arg2)
1 function A(x){ 2 this. x = x; 3 } 4 5 function B(y){ 6 console.log(this.x + ":y=" + y ); 7 } 8 B.bind(new A(5),6)();
另外還有一種寫法:
/*express-mysql-session源碼*/ var done = function() { this.setExpirationInterval(); if (cb) { cb.apply(undefined, arguments); } }.bind(this);
6.String.prototype.trim
var str = " hello world "; console.log(str.trim()); //可以忽略jquery的 $.trim() 了 //hello world
7.JSON的兩個方法
//這兩個已經用到很多了 JSON.stringify(obj); //obj ---> str JSON.parse(str); //str ---> json
JSON.stringify(value[, replacer[, space]])
value是需要轉換的值,必選。
replacer可以是函數,也可以是數組,如果是函數,則會顯示函數返回值,參數為value中的key和val,如果是數組,則只會顯示數組中與value對應的值。
space可選,文本添加縮進、空格和換行符
code:
<html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p id="demo"></p> <script> var str = {"name":"菜鳥教程", "site":"http://www.runoob.com"} //{"name":"菜鳥教程","site":"http://www.runoob.com"} str_pretty1 = JSON.stringify(str) document.write( "只有一個參數情況:" ); document.write( "<br>" ); document.write("<pre>" + str_pretty1 + "</pre>" ); document.write( "<br>" ); //9 str_pretty2 = JSON.stringify(str, function(){return 9;}, 4) //使用四個空格縮進 document.write( "使用參數情況:" ); document.write( "<br>" ); document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用於格式化輸出 </script> </body> </html>