专栏首页小码农学习笔记一文总结 JavaScript 对象遍历的几种方式
原创

一文总结 JavaScript 对象遍历的几种方式

对象遍历的几种方式

方式一:for...in...

要使用 (const i in obj) 而不是 (i in obj),因为后者将会创建一个全局变量。

// Object 原型链上扩展的方法也会被遍历出来
Object.prototype.fun = () => {};
const obj = { name: 'zhangsan', age: 13 };
for (const i in obj) {
  console.log(i, ':', obj[i]);
} 
// name : zhangsan
// age : 13
// fun : () => {}

使用 for...in... 循环时,返回的是所有能够通过对象访问的、可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例。如果只需要获取对象的实例属性,可以使用 hasOwnProperty 进行过滤。

// 不属于自身的属性将被 hasOwnProperty 过滤
Object.prototype.fun = () => {};
const obj = { name: 'zhangsan', age: 13 };
for (const i in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, i)) {
    console.log(i, ':', obj[i]);    
  }
}
// name : zhangsan
// age : 13

for...in... 的循环顺序,参考《JavaScript 权威指南(第7版)》6.6.1。

  • 先列出名字为非负整数的字符串属性,按照数值顺序从最小到最大。这条规则意味着数组和类数组对象的属性会按照顺序被枚举。
  • 在列出类数组索引的所有属性之后,在列出所有剩下的字符串名字(包括看起来像整负数或浮点数的名字)的属性。这些属性按照它们添加到对象的先后顺序列出。对于在对象字面量中定义的属性,按照他们在字面量中出现的顺序列出。
  • 最后,名字为符号对象的属性按照它们添加到对象的先后顺序列出。

方式二:Object.keys

用于获取对象自身所有的可枚举的属性值,但不包括原型中的属性,然后返回一个由属性名组成的数组。

Object.prototype.fun = () => {};

const str = 'helloworld';
console.log(Object.keys(str));
// ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));
// ["0", "1", "2"]

const obj = { name: 'zhangsan', age: 13 };
console.log(Object.keys(obj));
// ["name", "age"]

方式三:Object.values

用于获取对象自身所有的可枚举的属性值,但不包括原型中的属性,然后返回一个由属性值组成的数组。

Object.prototype.fun = () => {};

const str = 'helloworld';
console.log(Object.values(str));
// ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

const arr = ['a', 'b', 'c'];
console.log(Object.values(arr));
// ["a", "b", "c"]

const obj = { name: 'zhangsan', age: 13 };
console.log(Object.values(obj));
// ["zhangsan", 13]

方式四:Object.entries

用于获取对象自身所有的可枚举的属性值,但不包括原型中的属性,然后返回二维数组。每一个子数组由对象的属性名、属性值组成。

是一种可以同时拿到属性名与属性值的方法。

const str = 'hello';
for (const [key, value] of Object.entries(str)) {    
  console.log(`${key}: ${value}`);
}
// 0: h
// 1: e
// 2: l
// 3: l
// 4: o

const arr = ['a', 'b', 'c'];
for (const [key, value] of Object.entries(arr)) {    
  console.log(`${key}: ${value}`);
}
// 0: a
// 1: b
// 2: c

const obj = { name: 'zhangsan', age: 13 };
for (const [key, value] of Object.entries(obj)) {    
  console.log(`${key}: ${value}`);
}
// name: zhangsan
// age: 13

方式五:Object.getOwnPropertyNames

用于获取对象自身所有的可枚举的属性值(不包括 Symbol 值作为名称的属性),但不包括原型中的属性,然后返回一个由属性名组成的数组。

Object.prototype.fun = () => {};
Array.prototype.fun = () => {};

const str = 'hello'
console.log(Object.getOwnPropertyNames(str));
// ["0", "1", "2", "3", "4", "length"]

const arr = ['a', 'b', 'c'];
console.log(Object.getOwnPropertyNames(arr));
// ["0", "1", "2", "length"]

const obj = { name: 'zhangsan', age: 13 };
const symbol1 = Symbol('symbol1')
const symbol2 = Symbol('symbol2')
obj[symbol1] = 'hello'
obj[symbol2] = 'world'
console.log(Object.getOwnPropertyNames(obj));
// ["name", "age"]

方式六:Object.getOwnPropertySymbols()

用于获取指定对象的所有 Symbol 属性名。该方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

const obj = { name: 'zhangsan', age: 13 };
const symbol1 = Symbol('symbol1')
const symbol2 = Symbol('symbol2')
obj[symbol1] = 'hello'
obj[symbol2] = 'world'
console.log(Object.getOwnPropertySymbols(obj));
// [Symbol(symbol1), Symbol(symbol2)]

方式七:Reflect.ownKeys()

返回一个数组,包含对象自身的所有属性,不管是属性名是 Symbol 或字符串,也不管是否可枚举。

const obj = { name: 'zhangsan', age: 13 };
const symbol1 = Symbol('symbol1')
const symbol2 = Symbol('symbol2')
obj[symbol1] = 'hello'
obj[symbol2] = 'world'
console.log(Reflect.ownKeys(obj));
// ["name", "age", Symbol(symbol1), Symbol(symbol2)]

文章持续更新,本文 GitHub 前端修炼小册 已经收录,欢迎 Star。如对文章内容有不同见解,欢迎留言交流。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 总结 JavaScript 数组遍历的几种方式

    有一种说法是,通过使用临时变量,将长度缓存起来,避免重复获取数组长度,这样当数组较大时能产生比较明显的优化效果,如下代码所示:

    文渊同学
  • PHP数组遍历的几种常见方式总结

    conut($arr);用于统计数组元素的个数。 for循环只能用于遍历,纯索引数组!!!! 如果存在关联数组,count统计时会统计两种数组的总个数,使用...

    砸漏
  • JS中轻松遍历对象属性的几种方式

    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一...

    前端小智@大迁世界
  • Java遍历Map对象的四种方式

    关于java中遍历map具体哪四种方式,请看下文详解吧。 方式一 这是最常见的并且在大多数情况下也是最可取的遍历方式。在键值都需要时使用。 Map<I...

    似水的流年
  • Java遍历Map对象的四种方式

    如果只需要map中的键或者值,你可以通过keySet或values来实现遍历,而不是用entrySet。

    似水的流年
  • Java遍历Map对象的四种方式

    如果只需要map中的键或者值,你可以通过keySet或values来实现遍历,而不是用entrySet。该方法比entrySet遍历在性能上稍好(快了10%),...

    诺浅
  • JavaScript的几种创建对象的方式

    除了使用 new 操作符并把 使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。

    木子星兮
  • JavaScript中遍历数组的一些方法总结

    Js里面数组是很重要的一块内容,其实就是我们做项目的时候也是很重要的一种数据格式,大部分的数据都不会是一个个或者两个,那么数据多的时候一般是以数组的形式的存放的...

    何处锦绣不灰堆
  • 第184天:js创建对象的几种方式总结

    javascript 创建对象简单的来说,无非就是使用内置对象或各种自定义对象,当然还可以使用JSON,但写法有很多,也能混合使用。

    半指温柔乐
  • ES6复制拷贝数组,对象,json的几种方式总结

    数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。

    用户2323866
  • javascript 面向对象(实现继承的几种方式)

     1、原型链继承 核心: 将父类的实例作为子类的原型 缺点: 父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了 function...

    柴小智
  • php文件包含的几种方式总结

    PHP中有四个加载文件的语句:include、require、include_once、require_once。

    砸漏
  • 稳扎稳打JavaScript(三)——创建对象的几种方式

    有了前面两篇文章的基础后,我们来谈一谈在JS中创建对象的几种方式。 建议大家先预习下先前的两篇博客: 稳扎稳打JavaScript(一)——作用域链 ...

    大闲人柴毛毛
  • Python获取对象属性的几种方式小结

    PS:其实第四种方法是调用第三种方法的,只是简单封装了一下,我们看看operator.attrgetter实现就知道了:

    砸漏
  • 数组的三种声明方式总结、多维数组的遍历、Arrays类的常用方法总结

    泰斗贤若如
  • 架构师JavaScript 的对象继承方式,有几种程序写法?

    其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 ...

    Java架构师进阶技术
  • JavaScript 面向对象(封装、继承、多态)多种方式实现完全总结

    封装就是把抽象出来的数据和对数据的操作封装在一起,数据被保护在内部,程序的其它部分只有通过被授权的操作(成员方法),才能对数据进行操作。 创建对象实现封装可...

    csxiaoyao
  • Android 进阶13:几种进程通信方式的对比总结

    不花时间打基础,你将会花更多时间解决那些不必要的问题。 RPC 是什么 RPC 即 Remote Procedure Call (远程过程调用) 是一种计算机通...

    张拭心 shixinzhang
  • Android中对xml文件解析的3种方式总结

    xml 是数据传输的一种格式,Android 中的布局文件、设置文件等都采用它来表示。Android 中对 xml 文件的解析也有多种方式,下面介绍常用的 3 ...

    砸漏

扫码关注云+社区

领取腾讯云代金券