场景

在使用 JavaScript 开发或阅读代码时，会遇到forin语法的循环语句。这个循环语句到底会遍历什么数据？

说明

用于迭代具有可枚举属性的对象(除了Symbol内置对象).
迭代可枚举属性的顺序不确定的。
不适用于基于索引顺序的数组，因为不一定按照索引顺序迭代。如果是迭代数组，使用常规for...i循环或者使用数组的内置方法forEach(function(item)).
语法
```
for (variable in object)statement
```
可使用let,const,var来声明variable.
可以在迭代循环里修改属性值.
使用对象内置的hasOwnProperty()方法来判断是否是直接属性，而不是继承过来的。
使用obj.propertyIsEnumerable(prop)来判断是否某个属性是否可枚举。
for...in是为了枚举对象属性构建的，常用在调试时输出到控制台。

例子

<html><body><p id="out">for...in</p></body><script>function print(str){let p = document.createElement("p");p.innerHTML = str;document.body.append(p)}let visitData = {url:"https://blog.csdn.net/infoworld",action:"subcribe"};print("1. 遍历可枚举属性.");print("-- 修改属性前");for(const p in visitData){print(`${p}=${visitData[p]}`);visitData[p] = "hello";}print("-- 修改属性后");for(const p in visitData){print(`${p}=${visitData[p]}`);}function User() {this.color = 'red';}User.prototype = visitData;print("2. 遍历继承的可枚举属性");let user = new User();for(const p in user)print(`${p}=${user[p]}`);print("3. 只遍历自身可枚举属性");print("-- 修改属性前");for(const p in user){if(user.hasOwnProperty(p)){print(`${p}=${user[p]}`);user[p] = "world";}}print("-- 修改属性后");for(const p in user){if(user.hasOwnProperty(p))print(`${p}=${user[p]}`);}print("4. for...in不应该用于迭代一个关注索引顺序的 Array");let jsonArray = ['https://blog.csdn.net/infoworld','Tobey'];for(const i in jsonArray)print(`${i}=${jsonArray[i]}`);print("5. 使用数组forEach方法遍历数组");    jsonArray.forEach(one => {print(one);});print("6. 遍历p元素可枚举属性");const p = document.getElementById("out");for(const prop in p){print(`${prop}=${p[prop]}`);}</script>
</html>

输出

for...in1. 遍历可枚举属性.-- 修改属性前url=https://blog.csdn.net/infoworldaction=subcribe-- 修改属性后url=helloaction=hello2. 遍历继承的可枚举属性color=redurl=helloaction=hello3. 只遍历自身可枚举属性-- 修改属性前color=red-- 修改属性后color=world4. for...in不应该用于迭代一个关注索引顺序的 Array0=https://blog.csdn.net/infoworld1=Tobey5. 使用数组forEach方法遍历数组https://blog.csdn.net/infoworldTobey6. 遍历p元素可枚举属性align=...

参考

let - JavaScript | MDN
for…in - JavaScript | MDN
JavaScript for 循环
Array.prototype.forEach() - JavaScript | MDN
Symbol - JavaScript | MDN
属性的可枚举性和所有权 - JavaScript | MDN

[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]相关推荐

[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]
场景在开发网页时,经常需要枚举NodeList类型的数据,比如通过document.body.childNodes获取的, 通过DOM.querySelectorAll也能获取到NodeList对象 ...
[JavaScript]_[初级]_[使用HTMLElement.dataset快速读写自定义属性]
场景在开发前端页面时,一般会在某些元素上增加自定义的属性来存储额外的数据.比如图片元素<img>上增加big和small属性来存储大图片和小图片,当点击某个按钮时可以通过JavaScri ...
[Java]_[初级]_[使用正则高效替换字符串的多个占位符为多个值]
场景在开发基于模板内容的Java程序时, 比如一个邮件内容模板,在内容里放置一些占位符$email,$name等来作为替换实际内容的符号.那么这时候如何做才可以少生成不必要的String字符串,从而 ...
[JavaWeb]_[初级]_[对Html特殊符号进行转义防止XSS攻击和反转义]
场景在开发Java Web程序时,为了防止XSS的JavaScript攻击, 需要对用户输入转义,使JavaScript脚本不能执行. 在前端可以通过获取<div>的innerHTML属 ...
[Android]_[初级]_[sdk docs reference api 文档打开慢的解决办法]
此题正解:打开firefox, 选中菜单 File->Work Offline,之后打开api文档都是秒开了,缺点就是不能访问在线的网址. 默认菜单是隐藏的,可以移动到Tab页空白处右键Menu ...
[C/C++标准库]_[初级]_[优先队列priority_queue的使用]
2019独角兽企业重金招聘Python工程师标准>>> std::priority_queue 场景: 1. 对于一个任务队列,任务的优先级由任务的priority属性指明,这时候就 ...
[C/C++11]_[初级]_[如何转换带井号的#十六进制颜色字符串到数值]
场景表示颜色的RGB值,一般有两种方法,一种是使用使用数值表示RGB(255,255,255),一种是使用字符串#FE07AB.那么字符串形式的表示如何得到r,g,b各值的数值大小呢? 说明在&l ...
[Python]_[初级]_[使用PyCharm时不识别根包位置和Debug时报ModuleNotFoundError错误]
场景在使用PyCharm开发程序时,当我们Debug某个文件时,会报以下错误,什么原因? Traceback (most recent call last):File "C:\Progra ...
[WTL/ATL]_[初级]_[微调控件CUpDownCtrl的使用]
场景开发WTL/ATL应用时,有时候需要对某些值进行微调,比如0-100的百分比的微调,或者字号的微调,通过键盘操作微调控件,能实时查看某些界面呈现的效果.而WTL提供了CUpDownCtrl控件, ...

[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]

场景

说明

例子

输出

参考

[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]相关推荐

最新文章

热门文章