详解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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
JS模板实现方法
Apr 03 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
javascript中的with语句学习笔记及用法
Feb 17 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数据库密码的找回的步骤
2011/01/12 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
php依赖注入知识点详解
2019/09/23 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
JavaScript的setter与getter方法
2017/11/29 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python 错误处理 assert详解
2020/04/20 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
食堂员工工作职责
2013/12/18 职场文书
监察建议书范文
2014/03/12 职场文书
党风廉政建设责任书
2014/04/14 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
关于保护环境的建议书
2019/06/24 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers