JS常用方法整理-遍历对象

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏彭湖湾的编程世界

【java】java反射初探 ——“当类也学会照镜子”

反射的作用 开门见山地说说反射的作用 1.为我们提供了全面的分析类信息的能力 2.动态加载类 我理解的“反射”的意义 (仅个人理解哈) 我理解的java反射机制...

27010
来自专栏DT乱“码”

Java 枚举类型enum 的使用

Java 枚举类型enum 的使用 最近跟同事讨论问题的时候,突然同事提到我们为什么java 中定义的常量值不采用enmu 枚举类型,而采用public fin...

2939
来自专栏前端儿

JS 对象属性相关--检查属性、枚举属性等

delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性  看到delete a.p之后b.x仍然为1

1112
来自专栏代码拾遗

反射基础之Constructor

构造器的声明包含了:名字,修饰符,参数和异常。可以通过java.lang.reflect.Constructor类获取这些信息。 下面的例子描述了如何获取构造器...

991
来自专栏谈补锅

JS面向对象笔记

0、匿名函数定以后直接调用:(function(numA, numB) { alert(numA + numB); })(3,4);//弹窗7

5135
来自专栏java达人

java枚举类型enum的使用

最近跟同事讨论问题的时候,突然同事提到我们为什么java 中定义的常量值不采用enmu 枚举类型,而采用public final static 类型来定义呢?以...

24310
来自专栏编程坑太多

JS实现运算符重载

4612
来自专栏Hongten

python开发_python中的函数定义

1052
来自专栏微信公众号:Java团长

Java反射初探 ——“当类也学会照镜子”

镜子(反射机制)照出(反射)了人的全貌(类的全方位的信息,例如方法,成员变量和构造器等的相关信息)

793
来自专栏二进制文集

JDK源码分析 反射

对于JDK源码分析的文章,仅仅记录我认为重要的地方。源码的细节实在太多,不可能面面俱到地写清每个逻辑。所以我的JDK源码分析,着重在JDK的体系架构层面,具体源...

2786

扫码关注云+社区

领取腾讯云代金券