JavaScript 语句之常用 for 循环详解

JavaScript中循环语句不少,for、for in、for of和forEach循环,今天对比Array、Object、Set(ES6)、Map(ES6)四种数据结构循环语句支持的情况及区别。

Posted in Javascript onMarch 29, 2021

新建四种数据类型的测试数据

let arr = [1, 2, 3, 4, 5, 6];
let obj = { a: 1, b: 2, c: 3 };
let map = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
let set = new Set(['a', 'b', 'c']);

1 for

普通for循环在 Array 中可以使用。 遍历数组时,是遍历数组 下标 索引,通过下标去取值。

for (let i = 0; i < arr.length; i++) { // i是下标(索引)
  console.log(i)
  console.log(arr[i])
}

2 for in

for in 在 Array 和 Object 中都可以使用。需要注意的是,在原型上的属性,也会被循环出来。

Array

let arr = [1, 2, 3, 4, 5, 6];
Array.prototype.a = "1"
 
for (let i in arr) {  // i是下标(索引)
  console.log(i)
  console.log(arr[i])
}

可以看到原型上的也被循环出来了,只并不是我们想要的,我们可以通过 hasOwnProperty过滤掉原型上的属性。

let arr = [1, 2, 3, 4, 5, 6];
Array.prototype.a = "1"
 
for (let i in arr) {  // i是下标(索引)
  if (arr.hasOwnProperty(i)) {
    console.log(i)
    console.log(arr[i])
  }
}

Object

let obj = { a: 1, b: '2', c: 3 };
Object.prototype.d = 4
 
for (let key in obj) {  // key是键
  console.log(key)
  console.log(obj[key])
}

对于Object也是会存在同样问题,原型上的也会被循环出来,同样也可以通过 hasOwnPr operty 过滤 掉原型上的属性 。

for (let key in obj) {  // key是键
  if (obj.hasOwnProperty(key)) {
    console.log(key)
    console.log(obj[key])
  }
}

3 for of

for of在Array、Object、Set、Map中都可以使用。

Array

Array本质上也是对象,所以我们可以在隐式原型(__proto__)上可以找到定义好的方法。

for (let key of arr.keys()) {  // key是下标
  console.log(key)
}
for (let value of arr) {     // value是值
  console.log(value)
}
for (let value of arr.values()) { // value是值
  console.log(value)
}
for (let [key, value] of arr.entries()) { // key是下标 value是值
  console.log(key,value)
}

Object

for (let [key, value] of Object.entries(obj)) { // key是下标 value是值
  console.log(key, value)
}

Set

由于Set是没有重复的,所以keys和values是一致的,也就是说下面四个输出是一致的

for (let key of set.keys()) {  
  console.log(key)
}
for (let value of set) {     
  console.log(value)
}
for (let value of set.values()) { 
  console.log(value)
}
for (let [key, value] of set.entries()) { 
  console.log(key, value)
}

Map

for (let key of map.keys()) { 
  console.log(key)
}
for (let value of map) {     
  console.log(value)
}
for (let value of map.values()) { 
  console.log(value)
}
for (let [key, value] of map.entries()) { 
  console.log(key, value)
}

可以使用break,continue语句跳出循环,或者使用return从函数体返回。

for (let key of arr.keys()) {  // key是下标
  if (key == 3) {
    return
  }
  console.log(key)
}
for (let key of arr.keys()) {  // key是下标
  if (key == 3) {
    break
  }
  console.log(key)
}
for (let key of arr.keys()) {  // key是下标
  if (key == 3) {
    continue
  }
  console.log(key)
}

4 forEach

forEach循环在Array、Set、Map中都可以使用。但是方法不能使用break,continue语句跳出循环,或者使用return从函数体返回。

Array

arr.forEach((value, index) => {
  console.log(value, index)
})

Set

set.forEach((value, key) => {
  console.log(value, key)
})

Map

map.forEach((value, key) => {
  console.log(value, key)
})

break,continue和return

使用continue会提示

Illegal continue statement: no surrounding iteration statement

使用break会提示

Illegal break stateme

5 总结

普通 for 循环在 Array 中可以使用。遍历数组时,是遍历数组下标索引,通过下标去取值;for in 在 Array 和 Object 中都可以使用。但需要注意的是,在原型上的属性,也会被循环出来;for of 在Array、Object、Set、Map中都可以使用。也可以使用break,continue和return;forEach循环在Array、Set、Map中都可以使用。但是方法不能使用break,continue语句跳出循环,或者使用return从函数体返回。

Javascript 相关文章推荐
json2.js的初步学习与了解
Oct 06 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
JS搜狐面试题分析
Dec 16 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
vue+django实现下载文件的示例
javascript实现用户必须勾选协议实例讲解
JavaScript实现前端网页版倒计时
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
jQuery treeview树形结构应用
Mar 24 #jQuery
js实现弹框效果
Mar 24 #Javascript
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python复数属性和方法运算操作示例
2017/07/21 Python
python可视化实现KNN算法
2019/10/16 Python
python plotly画柱状图代码实例
2019/12/13 Python
python实现简单学生信息管理系统
2020/04/09 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
联强国际笔试题面试题
2013/07/10 面试题
创先争优制度
2014/01/21 职场文书
社会实践活动总结报告
2014/04/29 职场文书
活动总结报告格式
2014/05/09 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
西岭雪山导游词
2015/02/06 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
教师研修随笔感言
2015/11/18 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
python保存图片的四个常用方法
2022/02/28 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers