平時(shí)在寫的代碼過程中,經(jīng)常會(huì)遇到對(duì)對(duì)象Object的數(shù)據(jù)處理。而在對(duì)對(duì)象的數(shù)據(jù)處理中,操作最頻繁的是“數(shù)據(jù)引用”、“值的修改”、“獲取關(guān)鍵字(屬性)”。平時(shí)最煩的也是“獲取關(guān)鍵字”,經(jīng)常忘記怎么去獲取,這里做一下整理。
既然要"獲取關(guān)鍵字",那么得首先有一個(gè)對(duì)象才行。創(chuàng)建對(duì)象的方式很多,我自己慣用的方式有三種:
1、通過原始構(gòu)造函數(shù) new Object();創(chuàng)建一個(gè)對(duì)象,然后賦值;
var testObj= new Object(); testObj.name = "shangguan"; testObj.age= 25; testObj.action = function () { return this.name; }
2、直接新建對(duì)象,不通過構(gòu)造函數(shù)(而且直接新建速度比構(gòu)造器還快一些!)
var testObj={}; testObj.name = "shangguan"; testObj.age= 25; testObj.action = function () { return this.name; };
3、重載構(gòu)造器,讓構(gòu)造器在構(gòu)造對(duì)象時(shí)按預(yù)定的屬性構(gòu)建。
// 創(chuàng)建一個(gè)對(duì)象的構(gòu)造方法
function newObj(name, age) { this.name = name; this.age= age; this.action = function () { return this.name; } } // 創(chuàng)建一個(gè)對(duì)象
var testObj= new newObj("shangguan", 25);
1、對(duì)象內(nèi)置屬性方法:Object.keys();該方法返回一個(gè)數(shù)組,數(shù)組內(nèi)包括對(duì)象內(nèi)可枚舉屬性以及方法名稱。數(shù)組中屬性名的排列順序和使用 for...in
遍歷該對(duì)象時(shí)返回的順序一致。
// 通過調(diào)用Object.keys()方法,獲取對(duì)象上已定義(可枚舉)的屬性和方法
var keys= Object.keys(testObj); console.log(keys); // 輸出 keys ["name", "age", "action"]
注意:在ES5里,如果此方法的參數(shù)不是對(duì)象(而是一個(gè)原始值),那么它會(huì)拋出 TypeError。而在ES2015中,非對(duì)象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個(gè)對(duì)象。
Object.keys("testObj"); // TypeError: "testObj" is not an object (ES5 code)
Object.keys("testObj"); //["name", "age", "action"] (ES2015 code)
2、Object.getOwnPropertyNames():
方法返回一個(gè)指定對(duì)象所有自身屬性的屬性名(包括不可枚舉屬性但不包括Symbol值作為名稱的屬性)組成的數(shù)組。
該數(shù)組是 obj
自身擁有的枚舉或不可枚舉屬性名稱字符串集合。 數(shù)組中枚舉屬性的順序與通過 for...in
循環(huán)(或 Object.keys()
)迭代該對(duì)象屬性時(shí)一致。數(shù)組中不可枚舉屬性的順序未定義。
var keys = Object.getOwnPropertyNames(testObj); console.log(keys); // 輸出 keys ["name", "age", "action"]

3、當(dāng)然除了以上兩個(gè)外,還有最原始的 for...in 循環(huán)(估計(jì)是平時(shí)循環(huán)用的多了,反倒是這個(gè)不怎么用!)
var keys =[]; for(var i in testObj){ keys.push(i); } console.log(keys); // keys ["name", "age", "action"]

下面通過一個(gè)實(shí)例,直觀說明三者之間的區(qū)別:
var testObj = Object.create({}, { getFoo: { value: function () { return this.foo; }, enumerable: false } }); testObj.name = "shangguan"; testObj.age = 25; testObj.action = function(){ return this.name; }; function getKeys() { // 獲取對(duì)象可枚舉和不可枚舉的屬性
console.log(Object.getOwnPropertyNames(testObj)); //輸出:["getFoo", "name", "age", "action"]
// 獲取對(duì)象可枚舉的屬性
console.log(Object.keys(testObj)); //輸出:["name", "age", "action"]
// 獲取對(duì)象可枚舉的屬性
for (var i in testObj) { console.log(i); //輸出 name,age,action
} //返回直接定義在該對(duì)象上的可枚舉屬性,非繼承。通過hasOwnProperty()方法可以將那些屬性是對(duì)象自身(非繼承)屬性篩選出來,從而將不可枚舉屬性排除出去
//obj.hasOwnProperty(prop): prop要檢測(cè)的屬性,字符串 名稱或者 Symbol。 返回值:用來判斷某個(gè)對(duì)象是否含有指定的屬性 的Boolean值
for (var i in testObj) { if(testObj.hasOwnProperty(i)) { console.log(i); } //輸出 name,age,action
} }

總結(jié):如果只需要獲取可枚舉屬性,那么Object.keys()
或for...in
循環(huán)迭代即可(Object.getOwnPropertyNames()也可以獲取到原型鏈上的可枚舉屬性,不過需要通過hasOwnProperty()
方法過濾掉不可枚舉屬性)。