详解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 相关文章推荐
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 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常用函数小技巧
2008/09/11 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
使用TensorFlow实现SVM
2018/09/06 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
工商技校毕业生自荐信
2013/11/15 职场文书
接受捐赠答谢词
2014/01/27 职场文书
志愿者事迹材料
2014/12/26 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
小学运动会通讯稿
2015/07/18 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电