JavaScript中Object.keys、Object.getOwnPropertyNames区别

简介: 定义 Object.keys 定义:返回一个对象可枚举属性的字符串数组; Object.getOwnPropertyNames 定义:返回一个对象可枚举、不可枚举属性的名称;   属性的可枚举性、不可枚举性 定义:可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性,对于通过直接的赋值和属性初始化的属性,该标识值默认为即为 true,对于通过 Object.defineProperty 等定义的属性,该标识值默认为 false。

定义

Object.keys

定义:返回一个对象可枚举属性的字符串数组;

Object.getOwnPropertyNames

定义:返回一个对象可枚举、不可枚举属性的名称;

 

属性的可枚举性、不可枚举性

定义:可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性,对于通过直接的赋值和属性初始化的属性,该标识值默认为即为 true,对于通过 Object.defineProperty 等定义的属性,该标识值默认为 false。

 

例子

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", writable: false });
console.log(Object.keys(obj).length);           //output:1
console.log(Object.getOwnPropertyNames(obj).length);    //output:2

console.log(Object.keys(obj));           //output:Array[1] => [0: "prop1"]
console.log(Object.getOwnPropertyNames(obj));    //output:Array[2] => [0: "prop1", 1: "prop2"]

 

内置的判断,访问和迭代方法

功能 可枚举 可枚举、不可枚举
判断
propertyIsEnumerable
 in/hasOwnProperty
访问  Object.keys  Object.getOwnPropertyNames
迭代  for..in..  Object.getOwnPropertyNames

 

 

 

 

 

 

 

 

实战

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", writable: true });

console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true

console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false

console.log('prop1' in obj);    //output: true
console.log('prop2' in obj);    //output: true

for (var item in obj) {
    console.log(item);
}
//output:prop1

for (var item in Object.getOwnPropertyNames(obj)) {
    console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]

 

相关链接

Object.hasOwnProperty()
Object.propertyIsEnumerable()
Object.getOwnPropertyNames()
Object.keys()

属性的可枚举性和所有权 

 

img_fa0be433d68c8212b2b0b3b1a564ccb1.png
如果本文对你有所帮助,请打赏——1元就足够感动我:)
支付宝打赏 微信打赏
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号: img_9bde0f31ac4a0eca10b1bd7414b78faf.png


作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。

相关文章
|
2天前
|
移动开发 JavaScript 前端开发
uni-app和Vue.js二者之间有什么区别?
1. uni-app是一个使用Vue.js开发所有前端应用的框架,支持一次编译多端运行。开发者编写的基础代码只需进行一次编写,就可以发布到多个平台,包括App、H5、微信小程序等。 2. Vue.js是一个渐进式JavaScript框架,用于构建用户界面。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。
4 0
|
3天前
|
Web App开发 JavaScript 前端开发
Ecmascript 和javascript的区别
Ecmascript 和javascript的区别
8 0
|
4天前
Object.prototype.toString.call() 和 instanceOf 和 Array.isArray() 区别以及优缺点
Object.prototype.toString.call() 和 instanceOf 和 Array.isArray() 区别以及优缺点
7 0
|
5天前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
11 0
|
14天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
14天前
|
存储 前端开发 JavaScript
【Web 前端】JS数据类型有哪些?区别?
【4月更文挑战第22天】【Web 前端】JS数据类型有哪些?区别?
|
14天前
|
JavaScript 前端开发 数据安全/隐私保护
【专栏】JavaScript中的`==`和`===`运算符有重要区别,本文将从三个部分详细探讨
【4月更文挑战第29天】JavaScript中的`==`和`===`运算符有重要区别。`==`进行类型转换后比较,而`===`不转换类型,要求完全相等。在比较对象时,`==`只比较引用,`===`比较内容。推荐使用`===`以确保准确性,但在需要类型转换时可谨慎使用`==`。注意特殊值如`null`和`undefined`的比较。在数据验证、类型判断和条件判断等场景中,应根据需求选择合适的运算符。理解两者差异能提升代码质量和稳定性。
|
14天前
|
JavaScript 前端开发
【专栏】Javascript 对象的深浅拷贝的区别以及如何实现它们
【4月更文挑战第29天】JavaScript中的对象拷贝分为浅拷贝和深拷贝。浅拷贝仅复制对象引用,修改拷贝会影响原始对象,如使用直接赋值、`Object.assign()`、扩展运算符和`Array.prototype.concat()`。深拷贝则创建独立副本,修改不影响原始对象,可通过递归、`JSON.stringify()`和`JSON.parse()`、Lodash的`cloneDeep()`或jQuery的`jQuery.extend()`实现。
|
16天前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中,`let` 和 `const` 是新增的变量声明关键字,与 `var` 存在显著差异。`let` 允许重新赋值,而 `const` 不可,且两者都具有块级作用域。`var` 拥有函数级作用域,并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化,而 `var` 不需。根据需求选择使用:局部作用域用 `let`/`const`,全局或函数范围用 `var`,不可变值用 `const`。
23 2
|
16天前
|
安全 Java 编译器
【JAVA】泛型和Object的区别
【JAVA】泛型和Object的区别