JS常用方法整理-遍历对象
JS常用方法整理-遍历对象
love丁酥酥
发布于 2018-08-27 15:46:42
发布于 2018-08-27 15:46:42
1. 简介
JS中经常需要对对象的属性进行遍历，下面我们来总结一下JS遍历对象属性的几种方法。
2. for...in...
for...in...循环会遍历对象自身的和继承的可枚举属性（不含Symbol属性）。
// demo2
function SuperType() {
this.superVal = 'super';
};
SuperType.prototype.saySuperVal = function () {
console.log(this.superVal);
};
function SubType() {
this.subValOne = 'subOne';
this.subValTwo = 'subTwo';
};
SubType.prototype = new SuperType();
SubType.prototype.saySubValOne = function () {
console.log(this.subValOne);
};
var obj = new SubType();
Object.defineProperty(obj, 'notEnum', {
value: 'notEnum',
enumerable: false
});
for (let key in obj) {
console.log(`${key}:${obj[key]}`);
}
// subValOne:subOne
// subValTwo:subTwo
// superVal:super
/* saySubValOne:function () {
console.log(this.subValOne);
}*/
/* saySuperVal:function () {
console.log(this.superVal);
}*/3.Object.entries()
Object.keys()方法接收一个对象为参数，返回该对象自身可枚举属性的键值对数组，其排列与使用for...in...循环循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。
// 接demo2
console.log(Object.entries(obj)); // [["subValOne", "subOne"], ["subValTwo", "subTwo"]]4. Object.keys()
Object.keys()方法接收一个对象为参数，返回一个数组，包含该对象自身的（不含继承的）可枚举属性的key值（不含Symbol属性）。
// 接demo2
console.log(Object.keys(obj)); // ["subValOne", "subValTwo"]5. Object.values()
Object.values()方法接收一个对象为参数，返回一个数组，包含该对象自身的（不含继承的）可枚举属性得value值（不含Symbol属性）。
// 接demo2
console.log(Object.values(obj)); // ["subOne", "subTwo"]6. Object.getOwnPropertyNames()
Object.getOwnPropertyNames()方法接收一个对象为参数，返回一个数组，包含该对象自身的所有属性（不含Symbol属性，但是包含不可枚举属性）
// 接demo2
Object.getOwnPropertyNames(obj); // ["subVal", "notEnum"]7. Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols()方法接收一个对象为参数，返回一个数组，包含该对象自身的所有Symbol属性。
8. Reflect.ownKeys()
Reflect.ownKeys()方法接收一个对象为参数，返回一个数组，包含该对象自身的所有属性（包含Symbol和不可枚举属性）。
注：7，8涉及到ES6新增类型Symbol，我会在ES6知识中详细讲解。
参考
如何遍历JS对象中所有的属性 包括enumerable=false的属性？ javaScript遍历对象、数组总结 【探秘ES6】系列专栏（八）：JS的第七种基本类型Symbols MDN-Object
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.02.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录