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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
js实现翻牌小游戏
Jul 31 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
vue+django实现下载文件的示例
javascript实现用户必须勾选协议实例讲解
JavaScript实现前端网页版倒计时
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
jQuery treeview树形结构应用
Mar 24 #jQuery
js实现弹框效果
Mar 24 #Javascript
You might like
php自动跳转中英文页面
2008/07/29 PHP
php 404错误页面实现代码
2009/06/22 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
Yii全局函数用法示例
2017/01/22 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
理解javascript正则表达式
2016/03/08 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python实现图片中文字分割效果
2019/07/22 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
党员公开承诺书2015
2015/01/21 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
python和anaconda的区别
2022/05/06 Python
python运行脚本文件的三种方法实例
2022/06/25 Python