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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
JavaScript 语言的递归编程
May 18 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
vue+django实现下载文件的示例
javascript实现用户必须勾选协议实例讲解
JavaScript实现前端网页版倒计时
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
jQuery treeview树形结构应用
Mar 24 #jQuery
js实现弹框效果
Mar 24 #Javascript
You might like
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
一个简单实现多条件查询的例子
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue实现购物车的监听
2020/04/20 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python装饰器知识点补充
2018/05/28 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python get获取页面cookie代码实例
2018/09/12 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
CSS3 简写animation
2012/05/10 HTML / CSS
上海世博会口号
2014/06/19 职场文书
退税申请报告怎么写
2015/05/18 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android