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 清空form表单中某种元素的值
Dec 26 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
js实现复制粘贴的两种方法
Dec 04 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Javascript的比较汇总
2016/07/25 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
js编写简易的计算器
2020/07/29 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
什么是属性访问器
2015/10/26 面试题
2014国培学习感言
2014/03/05 职场文书
旅游节目策划方案
2014/05/26 职场文书
募捐感谢信
2015/01/22 职场文书
活动总结模板大全
2015/05/11 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python