深入理解枚举属性与for-in和for-of
首先要分清什么是可枚举属性,什么是不可枚举属性
1.可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。
1.1怎么判断属性是否可枚举
js中基本包装类型的原型属性是不可枚举的,如Object, Array, Number等,如果你写出这样的代码遍历其中的属性:
var num = new Number();
for(var pro in num) {
console.log("num." + pro + " = " + num[pro]);
}
它的输出结果会是空。这是因为Number中内置的属性是不可枚举的,所以不能被for…in访问到。
Object对象的propertyIsEnumerable()方法可以判断此对象是否包含某个属性,并且这个属性是否可枚举。
需要注意的是:如果判断的属性存在于Object对象的原型内,不管它是否可枚举都会返回false。
1.2枚举性的作用
举个例子:
Object.prototype.objCustom = function () { };
function Person() {
this.name = "KXY";
}
Person.prototype = {
constructor: Person,
job: "student",
};
var kxy = new Person();
Object.defineProperty(kxy, "sex", {
value: "female",
enumerable: false
});
则用for in 来遍历的话
for(var pro in kxy) {
console.log("kxy." + pro + " = " + kxy[pro]);
}
// kxy.name = KXY
// kxy.constructor = function Person() {
// this.name = "KXY";
// }
// kxy.job = student
// kxy.objCustom = function () { }
在这个kxy实例对象之中,我们可以发现我们可以遍历出四个可枚举属性,这个单纯看的话,很难理解为什么会有这四个属性,于是我画了张图,给大家解释下,红色部分表示不可枚举属性,绿色表示可枚举属性。这张图呢如果一看一脸懵逼,大家可以去参考《JavaScript高级程序设计》这本书的原型讲解的那一部分,我之前也发过随笔单独做了原型那一部分的笔记,也可以去翻一翻。
其中sex
不可以枚举是因为设置了enumberle
这个属性,而object
是因为他是JS基本包装类,所以他的任何属性都不可以被枚举。
我们for-in的事这个实例,他有proto
和sex
这两个属性,sex
不行,所以顺着__proto__
是往下翻,可以接收到他的原型的constructor
, job
, __proto__
其中job
可以直接枚举,然后剩下两个constructor
和__proto__
可以接着往下找,constructor
是连接着构造函数,构造函数里有一个name
所以将他输出,然后这一条路结束了。然后看原型的__proto__
就是Object
,因为他是JS的基本包装类,所以他里面的任何自带属性都不能被枚举,而我们自定义的objCustom方法是可以被枚举的,他不是自带的属性。所以综上所述,最后迭代出四个属性。所以for-in的大致过程就是这样。
1.3 Object.keys() 和JSON.stringify()
这两个方法也可以帮助我们判断属性是否可以枚举。
首先 Object.keys() 这个方法是专门用来返回一个对象的所有可枚举属性的字符串的。所以用它可以达到和for-in近似的效果。唯一不同的就是不能取到所有属性的值。
而JSON.stringify()这个只能stringify可枚举属性的值,如果不可枚举的是不会显示的。
2.for-in和for-of
2.1for-in
上面讲了那么多,感觉for-in讲的已经差不多了,for-in的主要作用就是迭代一个对象里的可枚举属性。
用法是:
for (variable in object) {...}
variable
在每次迭代时,将不同的属性名分配给变量。
object
被迭代枚举其属性的对象。
实例:
<script>
function Person() {
this.name = "KXY";
}
var kxy = new Person();
for (var pro in kxy) {
kxy[pro] = 'yxk'
console.log("kxy." + pro + " = " + kxy[pro]);
}
console.log(kxy);
</script>
结果:
值得一提的是,for-in 和for-of在迭代的过程中如果修改了属性的值,会直接作用在对象上。但是不推荐这么做因为这里并不保证是否一个被添加的属性在迭代过程中会被访问到,不保证一个修改后的属性(除非是正在被访问的)会在修改前或者修改后被访问,不保证一个被删除的属性将会在它被删除之前被访问。
另外for-in不推荐去迭代一个数组,因为数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。不能保证for ... in
将以任何特定的顺序返回索引。
2.1.1 hasOwnProperty()
asOwnProperty()
方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是是否有指定的键)
最开始的枚举属性的例子for-in不仅会将实例的属性迭代,而且会将原型上的属性一并迭代,如果只想迭代自身属性的话,那么就要配合上hasOwnProperty()这个属性了。
实例:
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i);
}
}
// 结果:
// logs 0, 1, 2, "foo"
for (let i in iterable) {
console.log(i);
}
// 结果:
// logs 0, 1, 2, "foo", "arrCustom", "objCustom"
2.2 for-of
for...of语句在可迭代对象上(包括Array,Map,Set,String,TyedArray,arguments对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句
用法
for (variable of iterable) {
//statements
}
variable
在每次迭代中,将不同属性的值分配给变量。
iterable
被迭代枚举其属性的对象。
for-of同样可以直接修改迭代对象的值,而且不像for-in会去迭代可枚举属性的值。
For-of除了遍历最基本的数组,还经常用在迭代字符串上。
具体更多的方法就参考文档吧,for-of感觉并没有什么难点。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of
更多的遍历数组可以看我上一篇随笔:https://www.cnblogs.com/wangzirui98/p/11226781.html
就写这么多吧,只是很简单的总结,如果有什么问题请大家指正。
深入理解枚举属性与for-in和for-of的更多相关文章
- JavaScript 面向对象的程序设计(一)之理解对象属性
首先,JavaScript 面向对象的程序设计,主要分三部分. 理解对象属性: 理解并创建对象: 理解继承. 本文主要从第一方面来阐述: 理解对象属性 首先我们来理解Javascript对象是什么?在 ...
- 【WPF】如何把一个枚举属性绑定到多个RadioButton
一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...
- 实体类的枚举属性--原来支持枚举类型这么简单,没有EF5.0也可以
通常,我们都是在业务层和界面层使用枚举类型,这能够为我们编程带来便利,但在数据访问层,不使用枚举类型,因为很多数据库都不支持,比如我们现在用的SqlServer2008就不支持枚举类型的列,用的时候也 ...
- JS 对象属性相关--检查属性、枚举属性等
1.删除属性 delete运算符可以删除对象的属性 delete person.age //即person不再有属性age delete person['age'] //或者这样 delete只是断开 ...
- JavaScript的检测属性、属性特性、枚举属性
/* 检测属性 检测属性可以通过三种方式 1.通过in运算符 2.通过hasOwnPerperty() 如果给定的属性是继承属性将返回false 3.通过propertyIsEnumerable(): ...
- 《JS权威指南学习总结--6.5枚举属性》
内容要点: 一.for/in循环 1.for/in循环可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承的属性),把属性名称赋值给循环变量.对象继承的内置方法不可枚举,但在代码中给对象添加的 ...
- C# Enum 获取枚举属性
Enum使用 获取枚举属性 注意:扩展方法必须定义为静态类,静态方法中. public enum EnumPatientSource { [Description("住院")] I ...
- JS中的可枚举属性与不可枚举属性以及扩展
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...
- 【Javascript-基础-getOwnPropertyNames】Object.getOwnPropertyNames() 获取对象自身可枚举属性
可枚举属性和不可枚举属性 在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for-in查找遍历到. 可枚举属性 e ...
随机推荐
- Android框架之EventBus的使用
简介 EventBus是由greenrobot组织贡献的一个Android事件发布/订阅的轻量级框架.EventBus是一个Android端优化的publish/subscribe消息总线,简化了应用 ...
- Python用Pandas读写Excel
Pandas是python的一个数据分析包,纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具.Pandas提供了大量能使我们快速便捷地处理数据的函数和方法. Pandas官方文档 ...
- Centos系统配置bond0
版权声明:本文为博主原创文章,支持原创,转载请附上原文出处链接和本声明. 本文链接地址:https://www.cnblogs.com/wannengachao/p/11942254.html 1.查 ...
- requests---重定向
通常我们抓包的过程中,都会看到302的状态码,那么这个过程发生了什么? 什么是重定向 就是通过各种方法将各种网络请求重新定个方向转到其它位置,本来应该从a出发到达b但是最终到达了c,这种场景就叫做重定 ...
- 21.Java基础_String类
String类构造方法 package pack1; //推荐使用直接赋值的方式得到字符串 public class test { public static void main(String[] a ...
- 实例透彻分析CMS垃圾收集器执行过程
CMS收集器收集步骤: 在上一次[https://www.cnblogs.com/webor2006/p/11055468.html]中已经对CMS的垃圾收集器有了一定的理论上的了解,其中提到了CMS ...
- 爬虫 xpath 获取方式
回顾 bs4 实例化bs对象,将页面源码数据加载到该对象中 定位标签:find('name',class_='xxx') findall() select() 将标签中的文本内容获取 string t ...
- 面向对象程序设计(JAVA) 第10周学习指导及要求
2019面向对象程序设计(Java)第10周学习指导及要求 (2019.11.1-2019.11.4) 学习目标 1.掌握java异常处理技术: 2.了解断言的用法: 3.了解日志的用途: 4.掌 ...
- arXiv网站
arXiv 原先是由物理学家保罗·金斯巴格在1991年建立的网站, 我们会将预稿上传到arvix作为预收录,因此这就是个可以证明论文原创性(上传时间戳)的文档收录网站.
- session.invalidate() 退出登录
当浏览器第一次请求时,服务器创建一个session对象,同时生成一个sessionId,并在此次响应中将sessionId 以响应报文的方式传回客户端浏览器内存或以重写url方式送回客户端,来保持整个 ...