详解Js里的for…in和for…of的用法


Posted in Javascript onMarch 28, 2019

之前看编程方法学,for循环的基本格式是

for(init;test;step ){
 statement
}
//例如
for(int i=0,i<10;i++){
 ...
}

后来接触了python,for循环的格式更加的简单优雅,只要一个for ……in语句就可以直接遍历对象。

for i in arry

今天看廖雪峰的官网,居然看到了js里更神奇的操作,for ……of循环,这个类似于python的for ……in循环了,虽然js里也有for ……in循环,可是遍历的是对象的属性,类似于键值对里的键key,当它遍历array的时候遍历的是array的索引,

var a = ['A', 'B', 'C'];
for (var i in a) {
 alert(i); // '0', '1', '2'
 alert(a[i]); // 'A', 'B', 'C'
}

or … of循环是ES6引入的新的语法,用for … of循环遍历集合,用法如下:

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
 alert(x);//'A', 'B', 'C'
}
for (var x of s) { // 遍历Set
 alert(x);//'A', 'B', 'C'
}
for (var x of m) { // 遍历Map
 alert(x[0] + '=' + x[1]);//1='x',2='y',3='z'
}

for … in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。
当我们手动给Array对象添加了额外的属性后,for … in循环将带来意想不到的意外效果:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
 alert(x); // '0', '1', '2', 'name'
}

for … in循环将把name包括在内,但Array的length属性却不包括在内。

for … of循环则完全修复了这些问题,它只循环集合本身的元素:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
 alert(x); // 'A', 'B', 'C'
}

以上所述是小编给大家介绍的Js里的for…in和for…of的用法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
js中创建对象的几种方式
Feb 05 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
ES7之Async/await的使用详解
Mar 28 #Javascript
详解vue-cli3多环境打包配置
Mar 28 #Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 #Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 #Javascript
详解一个基于套接字实现长连接的express
Mar 28 #Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 #Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 #Javascript
You might like
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php筛选不存在的图片资源
2015/04/28 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python字符串的常用操作方法小结
2016/05/21 Python
python实时监控cpu小工具
2018/06/21 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
总经理任命书范本
2014/06/05 职场文书
村党组织公开承诺书
2015/04/30 职场文书
Go语言grpc和protobuf
2022/04/13 Golang