JS获取对象属性的各种方式和区别（自身/原型属性、可枚举/不可枚举）

2024-04-11 01:40:39

对象的属性有自身属性和原型属性之分，自身属性是对象自己的属性，原型属性是存在于原型链上的属性。

可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性。（in操作符只可以判断对象是否有某个属性，不能判断是自身的，还是原型上的）

对象属性也有可枚举和不可枚举之分，可枚举属性的属性描述符enumerable为true，不可枚举属性的为false。

原生对象的大多数属性都是不可枚举的，比如数组和字符串的length，对象原型上的一些方法和属性，比如toString、constructor、hasOwnProperty等等

下面看下都有哪些方式可以获取对象的属性

Object.keys()

返回自身的可枚举属性组成的数组（不包含symbol）

Object.getOwnPropertyNames()

返回所有的自身属性组成的数组（不包含symbol）

Object.getOwnPropertySymbols()

返回自身所有的Symbol属性组成的数组

for…in

遍历对象的所有可枚举属性

区别

	可枚举	可枚举和不可枚举
仅自身属性	Object.keys	Object.getOwnPropertyNames
自身和原型属性	for…in

没有原生的方法可以获取对象上所有的属性，包含自身和原型、可枚举和不可枚举，需要自己实现，示例如下：

function getAllkeys (obj) {const keys = []let temp = objwhile (temp) {keys.push.apply(keys, Object.getOwnPropertyNames(temp))keys.push.apply(keys, Object.getOwnPropertySymbols(temp))temp = Object.getPrototypeOf(temp)}return keys
}

for…of 和 for…in的区别

for let i in obj 是以任意顺序遍历对象的可枚举属性，i是key

for let value of iterable 是按顺序迭代一个可迭代对象，i是值

iterable可迭代对象包括：Array、Map、Set、String、TypedArray、arguments

JS获取对象属性的各种方式和区别（自身/原型属性、可枚举/不可枚举）相关推荐

php 获取js对象的属性值,js获取对象,数组所有属性键值(key)和对应值(value)的方法示例...
本文实例讲述了js获取对象,数组所有属性键值(key)和对应值(value)的方法.分享给大家供大家参考,具体如下: var values=function(object) { var values ...
js获取对象的父元素,子元素,兄弟元素
今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致[修改]做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮.现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生 ...
JS获取对象的第一个值
JS获取对象(obj)的第一个值 obj[Object.keys(obj)[0]]
js获取对象数组中的id集合
js获取对象数组中的id集合 const ids = Array.from(this.checkList,({ id }) => id); // ["16921C72E0C64002& ...
js获取对象里数据条数
js获取对象里数据条数对象无法使用length获取长度,需要使用js原生方法里的Object.keys方法进行获取,具体用法如下: let obj = {'a1': {'name': '张三''}, ...
js获取时间戳的几种方式、时间转时间戳
js获取时间戳的几种方式.时间转时间戳前言这两个方法的返回值都是 1970/1/1 午夜距离该日期时间的毫秒数如何使用下面的例子中,我们将取得从 1970/01/01 到 2017/03/19 ...
js获取对象数组中指定属性值对象_3分钟学会操作JavaScript内置对象，快来试试吧...
1 - 内置对象 1.1 内置对象 JavaScript 中的对象分为3种:自定义对象 .内置对象. 浏览器对象. 前面两种对象是JS 基础内容,属于 ECMAScript: 第三个浏览器对象属于 ...
JS中对象创建的五中方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
js获取对象的方法，根据id、根据name、根据标签名、根据类名
正文下面的代码中展示了常用的js获取html对象的方法,并且添加了详细的注释说明.快来看看吧. // 页面加载完毕以后再执行window.onload=function(){//1.根据id获取对象 ...

最新文章

热门文章