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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 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
PHP4在Windows2000下的安装
2006/10/09 PHP
php开发文档 会员收费1期
2012/08/14 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python动态加载模块的3种方法
2014/11/22 Python
python实现的简单文本类游戏实例
2015/04/28 Python
Python之os操作方法(详解)
2017/06/15 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
请解释在new与override的区别
2012/10/29 面试题
银行服务明星推荐材料
2014/05/29 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
大学生党课心得体会
2016/01/07 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript