JavaScript 中遍历对象的属性
原文链接
JavaScript 中遍历对象的属性
参考
JavaScript中的属性:如何遍历属性
《JavaScript 高级程序设计》
概述
遍历 JavaScript 对象中的属性没有其他语言那么简单,因为两个因素会影响属性的遍历:对象属性的属性描述符 (property descriptor) 的 [[Enumerable]]
特性为 true
(可枚举)才能被 for-in
访问;如果在对象本身没有找到属性,接下来会在原型链上查找,访问属性时会沿着整个原型链从下到上查找属性。所以说遍历属性时,要考虑这两个因素。
开始遍历
先定义两个类吧:Person 和 Student,后者继承前者。然后再声明并初始化一个 Student 的实例 p1。其中自身属性有 grade(可枚举) 和 tel(不可枚举),从原型链继承属性 type.
可枚举意思是属性的 [[Enumerable]]
值为 true
,自身的属性意思是 不是 从 原型链 继承的属性
// ES3 ES5
function Person(name) {this.name = name;
}Person.prototype.type = 'people';function Student(name, grade) {Person.call(this, name);this.grade = grade;
}if (Object.setPrototypeOf) {Object.setPrototypeOf(Student.prototype, Person.prototype);
} else {Student.prototype = Object.create(Person.prototype);Object.defineProperty(Student.prototype, 'constructor', {enumerable: false,writable: true,configurable: true,value: Student});
}var p1 = new Student('Zero', 'Junior');
Object.defineProperty(p1, 'tel', {value: 123456,enumerable: false
});
// ES6+
class Person {constructor(name) {this.name = name;}
}Person.prototype.type = 'people';class Student extends Person {constructor(name, grade) {super(name);this.grade = grade;}
}var p1 = new Student('zero', 'Junior');
Object.defineProperty(p1, 'tel', {value: 123456,enumerable: false
});
遍历可枚举的、自身的属性
使用 Object.keys()
或是 for..in
+ hasOwnProperty()
// Object.keys()返回可枚举、自身的属性
// 再用for..of对返回的数组进行遍历
for (let prop of Object.keys(p1)){console.log(prop);
}
// 得到可枚举、自身+继承的属性
for (let prop in p1) {// 过滤继承属性if (p1.hasOwnProperty(prop)) {console.log(prop);}
}
结果是:name 和 grade 属性
注: Object.keys()
的使用环境是 ES5+
遍历所有(可枚举的&不可枚举的)、自身的属性
// 使用 `Object.getOwnPropertyNames()`
for (let prop of Object.getOwnPropertyNames(p1)) {console.log(prop);
}
结果是:name 、 grade 和 tel 属性
遍历可枚举的、自身+继承的属性
// 使用 `for..in`
for (let prop in p1) {console.log(prop);
}
结果是:name 、 grade 和 type 属性
遍历所有的、自身+继承的属性
var getAllPropertyNames = (obj) => {var props = [];do {props = props.concat(Object.getOwnPropertyNames(obj));} while (obj = Object.getPrototypeOf(obj));return props;
};for (let prop of getAllPropertyNames(p1)) {console.log(prop);
}
结果很多:包括自身属性 name 、 grade 等,继承属性 type 、 toString 、valueOf 等
EOF
JavaScript 中遍历对象的属性相关推荐
- JavaScript 中遍历对象的属性 1
JavaScript 中遍历对象的属性 原文链接 JavaScript 中遍历对象的属性 参考 JavaScript中的属性:如何遍历属性 <JavaScript 高级程序设计> 概述 遍 ...
- JavaScript中的对象的属性名和属性值
1.属性名 创建一个对象 var obj =new Object(); 向对象中添加属性 obj.name ="Jerry"; 那么,name就是属性名,"Jerry&q ...
- JavaScript中的可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for-in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...
- java 遍历对象_java中some(),every()循环遍历,Object.getOwnPropertyNames()遍历对象的属性...
由于java知识的应用具有一定的广泛性,所以它经常会应用到我们的日常使用当中.那么今天就为大家介绍一下java中some(),every()循环遍历,Object.getOwnPropertyName ...
- 如何遍历JavaScript中的对象
Once in a while, you may need to loop through objects in JavaScript. The only way to do so before ES ...
- 对象删除某个属性_充分了解JavaScript中【对象】的概念(二)
点击上方「蓝字」关注我们 之前的文章: 充分了解JavaScript中[对象]的概念(一) 这篇文章我们继续来讲解JavaScript中[对象]的概念,因为这是一系列的文章,所以建议从第一篇文章开始看 ...
- 如何在Javascript中访问对象的第一个属性?
本文翻译自:How to access the first property of an object in Javascript? Is there an elegant way to access ...
- javascript遍历对象的属性
不同类型的循环 JavaScript 支持不同类型的循环: for - 多次遍历代码块 for/in - 遍历对象属性 while - 当指定条件为 true 时循环一段代码块 do/while - ...
- JavaScript学习(四十四)—in关键字的使用和for in循环遍历对象的属性
JavaScript学习(四十四)-in关键字的使用和for in循环遍历对象的属性 一.in关键字的使用 作用:判断某个属性是否属于对象 格式:属性名称 in 对象名称 ; 返回值:如果返回的结果为 ...
最新文章
- 脚本征集大赛开启啦!100%有奖!
- 动态规划4--最佳加法表达式
- SAP PM 初级系列19 - IP10为维修计划触发维修工单的同时也自动触发了维修通知单!
- JS中的this对象详解
- 【题解】luogu p1156 垃圾陷阱
- I.MX6开发板移植Linux4.1.15内核之TSC2007触摸屏设备树信息的添加
- svg标签的CSS3动画特效 - 经典特效
- 如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置
- 怎么才能成为一名PHP专家?
- linux下dns视图配置
- windows10 快捷代码
- 中望3d快捷键命令大全_中望CAD常用快捷键集合
- python 设计单张扑克牌类Card 设计整副扑克牌类Cards
- Mybatis面试题总结
- “探月计划”来袭,美国米德天文望远镜助孩子观月赏月
- c语言报告西电,c语言课程设计报告西安电子科技大学.docx
- 在CMD上运行javac前应该这样做
- 计算机二级云计算ppt,全国计算机等级考试二级officeppt演示文稿題目.docx
- 使用python 绘制统计图,(折线图,条形统计图,扇形统计图)
- 项目进度推进——工作成果呈现