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实现轮显新闻标题链接
Aug 13 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JS功能代码集锦
2016/05/04 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
python2.7的编码问题与解决方法
2016/10/04 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python logging设置level失败的解决方法
2020/02/19 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
机械设计及其自动化专业求职信
2014/06/09 职场文书
团日活动总结模板
2014/06/25 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
《包身工》教学反思
2016/02/23 职场文书