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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jQuery 联动日历实现代码
May 31 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
Javascript中For In语句用法实例
May 14 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
详解python播放音频的三种方法
2019/09/23 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
护理毕业生自我鉴定
2014/02/11 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python