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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
vue+django实现下载文件的示例
javascript实现用户必须勾选协议实例讲解
JavaScript实现前端网页版倒计时
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
jQuery treeview树形结构应用
Mar 24 #jQuery
js实现弹框效果
Mar 24 #Javascript
You might like
PHP PDO操作MySQL基础教程
2017/06/05 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python迭代dict的key和value的方法
2018/07/06 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python实现飞机大战游戏
2020/10/26 Python
Python assert语句的简单使用示例
2019/07/28 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
特教教师先进事迹
2014/05/21 职场文书
公司离职证明样本
2014/09/13 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电