死磕JS:Reflect.ownKeys() 和 Object.keys() 怎么选?

开发 前端
今天在写一段深拷贝的代码中,思考一个问题:如何遍历 JavaScript 中 Object 的 Keys ,碰到了 Reflect.ownKeys(obj)和 Object.keys(obj) 这两个方法,他俩究竟有什么不同?

[[384915]]

本文转载自微信公众号「前端思维框架」,作者水墨寒。转载本文请联系前端思维框架公众号。  

今天在写一段深拷贝的代码中,思考一个问题:如何遍历 JavaScript 中 Object 的 Keys ,碰到了 Reflect.ownKeys(obj)和 Object.keys(obj) 这两个方法,他俩究竟有什么不同?

我们先看一个例子:

  1. const obj = {a: 5, b: 5}; 
  2. console.log(Reflect.ownKeys(obj)); 
  3. console.log(Object.keys(obj)); 
  4.  
  5. // Result 
  6. // ['a''b'
  7. // ['a''b'

貌似也没什么不一样,去翻两个方法的文档得知:

Object.keys(obj) 返回结果是:一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

而 Reflect.ownKeys(obj)的返回结果 等价于:

  1. Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target)) 

Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。

Reflect.ownKeys(obj) 等于把 给定的对象所有属性以数组的方式返回。

我们通过下面代码来看两者差别:

  1. var testObject = {[Symbol('1')]: 1, a: 2}; 
  2. Object.defineProperty(testObject, 'myMethod', { 
  3.     value: function () { 
  4.         alert("Non enumerable property"); 
  5.     }, 
  6.     enumerable: false 
  7. }); 
  8. console.log(Object.keys(testObject)); 
  9. // ['a'
  10. console.log(Reflect.ownKeys(testObject)); 
  11. // [ 'a''myMethod', Symbol(1) ] 

总结

Object.keys(obj) : 结果是object 上所有可枚举的key;

Reflect.ownKeys(obj) : 结果是所有的 key。

 

责任编辑:武晓燕 来源: 前端思维框架
相关推荐

2017-02-06 07:34:26

JavaScrip

2021-03-06 09:18:51

JS闭包函数

2021-03-01 08:02:55

算法排序操作

2022-05-13 09:05:37

JSObject无序

2021-04-02 07:53:35

js前端手写题

2021-06-03 08:32:18

JVM调优虚拟机

2012-12-27 11:11:54

华为任正非

2021-02-25 07:21:00

JVMJavaava虚拟机

2023-12-14 07:36:16

Java并发原子类

2022-04-14 09:35:03

Vue.js设计Reflect

2022-04-19 21:05:03

JavaScript内置工具

2013-06-05 09:38:27

Intel功耗酷睿

2021-06-01 09:29:43

ArthasJVM内存

2021-02-28 11:58:33

JVM机制语言

2015-04-03 09:23:00

Google for Office 365云工具

2021-11-05 06:57:49

数组对象遍历器

2021-05-25 09:56:42

Jvm类加载机制Java

2017-02-27 10:43:07

Javasynchronize

2013-05-08 09:26:07

ARM22nmAtom

2012-02-13 09:17:54

云计算甲骨文SAP
点赞
收藏

51CTO技术栈公众号