Object.keys() 和 Object.getOwnPropertyNames() 的区别详解


Posted in Javascript onMay 21, 2020

大部分情况下Object.getOwnPropertyNames()与Object.keys(obj)的功能是一样的,我们一般也是用来获取一个JSON对象中所有属性,例如

const obj = {
  property1: 1,
  property2: 2,
};

console.log(Object.keys(obj));
console.log(Object.getOwnPropertyNames(obj));

输出:

> Array ["property1", "property2"]
> Array ["property1", "property2"]

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

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

共同点:都是返回自身的属性,不会返回原型链上的。

区别: Object.keys()返回可枚举的,Object.getOwnPropertyNames()返回所有的。

Person = function(name){
  this.name = name || ''
}
Person.prototype.sayHello = function(){
  console.log('hello')
}
p = new Person('yangyang')
p.age = 18
Object.defineProperties(p, {
  age:{
    enumerable:false
  }
})
console.log(Object.keys(p)) // ["name"]
console.log(Object.getOwnPropertyNames(p)) // ["name", "age"]

参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

到此这篇关于Object.keys() 和 Object.getOwnPropertyNames() 的区别详解的文章就介绍到这了,更多相关Object.keys()和Object.getOwnPropertyNames()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
Vue核心概念Action的总结
Jan 18 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
JavaScript实现HSL拾色器
May 21 #Javascript
js实现拾色器插件(ColorPicker)
May 21 #Javascript
原生js实现日期选择插件
May 21 #Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 #Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 #Javascript
记一次用ts+vuecli4重构项目的实现
May 21 #Javascript
JS实现图片幻灯片效果代码实例
May 21 #Javascript
You might like
php 分页原理详解
2009/08/21 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
php框架知识点的整理和补充
2021/03/01 PHP
Array对象方法参考
2006/10/03 Javascript
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
小程序实现悬浮搜索框
2019/07/12 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python读取oracle函数返回值
2016/07/18 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
读书之星事迹材料
2014/05/12 职场文书
综艺节目策划方案
2014/06/13 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript