详解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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
React实现轮播效果
Aug 25 Javascript
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
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
python使用opencv进行人脸识别
2017/04/07 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
详解Python self 参数
2019/08/30 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
阿尔卡特(中国)的面试题目
2014/08/20 面试题
乡镇信息公开实施方案
2014/03/23 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
品牌推广策划方案
2014/05/28 职场文书
公司活动总结范文
2014/07/01 职场文书
介绍信格式样本
2015/05/05 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js