1、定義一個(gè)對(duì)象
let obj = {
name: 'Tom',
age: '20',
sex: '男',
};
obj.weight = '70kg';
// obj的原型上定義屬性
Object.prototype.height = '180cm';
Object.prototype.major = function() {
console.log('專業(yè):計(jì)算機(jī)應(yīng)用技術(shù)');
};
console.log('obj', obj);
控制臺(tái)輸出的obj中,原型Object上添加了height和major
2、使用 for…in 循環(huán)遍歷對(duì)象的屬性
for…in遍歷屬性時(shí),包含該實(shí)例對(duì)象的自有屬性和該實(shí)例對(duì)象上的原型屬性,不包含不可枚舉的屬性
for (let key in obj) {
console.log(key, ':', obj[key]);
}
控制臺(tái)輸出結(jié)果:
根據(jù)輸出結(jié)果可知for……in 遍歷對(duì)象會(huì)遍歷實(shí)例對(duì)象原型上添加的屬性。
3、Object.prototype.hasOwnProperty()
hasOwnProperty()用來(lái)檢測(cè)某個(gè)屬性是否是實(shí)例對(duì)象的自有屬性,返回一個(gè)布爾值,若返回true,則是實(shí)例對(duì)象的自有屬性,若返回false,則不是。
hasOwnProperty() 是定義在 Object.prototype 對(duì)象上的的原型方法,Object 的所有實(shí)例對(duì)象都會(huì)繼承該方法。
console.log('name: ', obj.hasOwnProperty('name')); // true
console.log('weight: ', obj.hasOwnProperty('weight')); // true
console.log('height: ', obj.hasOwnProperty('height')); // false
console.log('major: ', obj.hasOwnProperty('major')); // false
控制臺(tái)輸出結(jié)果:
所以可以使用for……in結(jié)合hasOwnProperty()遍歷實(shí)例對(duì)象的自有屬性
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, ':', obj[key]);
}
}
控制臺(tái)輸出結(jié)果:
4、使用Object.keys()方法獲取實(shí)例對(duì)象的所有屬性,然后使用forEach()方法遍歷屬性
Object.keys()
靜態(tài)方法返回一個(gè)由給定對(duì)象自身的可枚舉的字符串鍵屬性名組成的數(shù)組。
console.log(Object.keys(obj));
Object.keys(obj).forEach((key) => {
console.log(key, ':', obj[key]);
})
控制臺(tái)輸出結(jié)果:
根據(jù)輸出結(jié)果可知Object.keys()方法不會(huì)獲取到實(shí)例對(duì)象的原型上添加的屬性。
5、Object.getOwnPropertyNames()結(jié)合forEach()
Object.getOwnPropertyNames()靜態(tài)方法返回一個(gè)數(shù)組,其包含給定對(duì)象中所有自有屬性(包括不可枚舉屬性,但不包括使用 symbol 值作為名稱的屬性)。
console.log(Object.getOwnPropertyNames(obj));
Object.getOwnPropertyNames(obj).forEach((key) => {
console.log(key, ':', obj[key]);
})
控制臺(tái)輸出結(jié)果:
參考:
1、Object.keys()
2、Object.prototype.hasOwnProperty()文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-805172.html
3、Object.getOwnPropertyNames()文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-805172.html
到了這里,關(guān)于JS遍歷對(duì)象的方法及特點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!