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 相关文章推荐
js监听键盘事件示例代码
Jul 26 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
vue+django实现下载文件的示例
javascript实现用户必须勾选协议实例讲解
JavaScript实现前端网页版倒计时
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
jQuery treeview树形结构应用
Mar 24 #jQuery
js实现弹框效果
Mar 24 #Javascript
You might like
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php适配器模式简单应用示例
2019/10/23 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
python实现扫雷小游戏
2020/04/24 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
安全事故检讨书
2014/01/18 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
六年级作文之自救
2019/12/19 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Python+Tkinter打造签名设计工具
2022/04/01 Python
Django框架模板用法详解
2022/06/10 Python