专栏首页coding for loveJS常用方法整理-遍历对象

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 条评论
登录 后参与评论

相关文章

  • JS原生引用类型解析1-Object类型

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • JS 数据类型的四种检测方法

    我们在代码中经常要对数据类型进行判断,大家熟知的应该是 typeof,那么它有什么不足,有没有其他方法来进行类型检测呢?

    love丁酥酥
  • JS入门难点解析2-JS的变量提升和函数提升

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 深入理解ES6之—对象

    在js中比较两个值时,你可能会用相等运算符==或者严格相等运算符 ===。为了避免在比较时发生强制类型转换,许多开发者更倾向于使用后者。

    寻找石头鱼
  • 【ES6基础】Object的新方法

    Object对象可谓是JS的重要核心内容,在你使用JS的过程中,你会发现自己的工作大部分都是在操作对象,ES6、ES7、ES8引入了不少新的方法,本篇文章笔者将...

    前端达人
  • 机器学习笔记之Boosting算法

    集成学习是通过训练弱干个弱学习器,并通过一定的结合策略,从而形成一个强学习器。有时也被称为多分类器系统(multi-classifier system)、基于委...

    Jetpropelledsnake21
  • uni-app入门教程(7)第三方登录和分享

    本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uni-app实...

    cutercorley
  • Ensemble Learning

    集成学习(ensemble [ɒnˈsɒmbl] learning)通过构建并结合多个学习器来完成任务,有时也被称为多分类器系统(multi-classifie...

    老肥码码码
  • .Net语言 APP开发平台——Smobiler学习日志:获取或存储图像路径设置

    获取或设置图像存储路径,默认设置为“image”,表示的ResourcePath是在程序运行路径下的Image文件夹(bin\Debug\Image);

    Amanda.li
  • 开发利器:提升效率

    阿杜

扫码关注云+社区

领取腾讯云代金券