详解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 相关文章推荐
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
使用javascript获取页面名称
Dec 23 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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
基于mysql的论坛(6)
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
javascript document.referrer 用法
2009/04/30 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python socket编程实例详解
2015/05/27 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
文明市民先进事迹
2014/05/15 职场文书
表扬通报怎么写
2015/01/16 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android