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

 更新时间:2020年05月21日 14:07:55   作者:周羊羊  
这篇文章主要介绍了Object.keys() 和 Object.getOwnPropertyNames() 的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

大部分情况下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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js的es6常用新特性详解

    js的es6常用新特性详解

    ES6(ECMAScript 6,也称为ES2015)是JavaScript的一个重要更新版本,引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发,ES6的主要变化归纳为:语法糖、新机制、更好的语义、更多的内置对象和方法
    2023-11-11
  • javascript前端埋点上报的几种方式

    javascript前端埋点上报的几种方式

    本文将介绍前端埋点上报的几种常见方式,并详细阐述如何在项目中运用这些方式进行数据上报,以帮助开发者更好地进行数据收集和分析,感兴趣的可以了解一下
    2023-11-11
  • js实现数组转换成json

    js实现数组转换成json

    本文给大家分享的是使用javascript实现的数组转换json的代码,非常简单实用,相当于JSON.stringify(array);,有需要的小伙伴可以参考下。
    2015-06-06
  • 用函数模板,写一个简单高效的 JSON 查询器的方法介绍

    用函数模板,写一个简单高效的 JSON 查询器的方法介绍

    本篇文章小编将为大家介绍,用函数模板,写一个简单高效的 JSON 查询器的方法介绍,需要的朋友可以参考一下
    2013-04-04
  • JavaScript操作localStorage实现保存本地json文件

    JavaScript操作localStorage实现保存本地json文件

    这篇文章主要为大家详细介绍了JavaScript如何操作localStorage实现保存本地json文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • JS实现横向跑马灯效果代码

    JS实现横向跑马灯效果代码

    这篇文章主要介绍了JS实现横向跑马灯效果代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • 找到一点可怜的关于dojo资料,谢谢作者!

    找到一点可怜的关于dojo资料,谢谢作者!

    找到一点可怜的关于dojo资料,谢谢作者!...
    2006-12-12
  • javascript实现淡蓝色的鼠标拖动选择框实例

    javascript实现淡蓝色的鼠标拖动选择框实例

    这篇文章主要介绍了javascript实现淡蓝色的鼠标拖动选择框,可实现鼠标拖动出现淡蓝色选择框的效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下
    2015-05-05
  • 解决Layui中templet中a的onclick参数传递的问题

    解决Layui中templet中a的onclick参数传递的问题

    今天小编就为大家分享一篇解决Layui中templet中a的onclick参数传递的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 关于AOP在JS中的实现与应用详解

    关于AOP在JS中的实现与应用详解

    这篇文章主要给大家介绍了关于AOP在JS中的实现与应用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05

最新评论