JavaScript 语句之常用 for 循环详解
JavaScript中循环语句不少，for、for in、for of和forEach循环，今天对比Array、Object、Set(ES6)、Map(ES6)四种数据结构循环语句支持的情况及区别。
新建四种数据类型的测试数据
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)
})
Se t
set.forEach((value, key) => {
console.log(value, key)
})
M ap
map.forEach((value, key) => {
console.log(value, key)
})
break,continue和return
使用continue会提示
Illegal continue statement: no surrounding iteration statement
使用break会提示
Illegal break statement
使用return，并不会返回，而是继续循环
5 总结
普通 for 循环在 Array 中可以使用。遍历数组时，是遍历数组下标索引，通过下标去取值；for in 在 Array 和 Object 中都可以使用。但需要注意的是，在原型上的属性，也会被循环出来；for of 在Array、Object、Set、Map中都可以使用。也可以使用break,continue和return；forEach循环在Array、Set、Map中都可以使用。但是方法不能使用break，continue语句跳出循环，或者使用return从函数体返回。
到此这篇关于JavaScript 语句之常用 for 循环详解的文章就介绍到这了,更多相关js for 循环内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
js中forEach，for in，for of循环的用法示例小结
本文实例讲述了js中forEach,for in,for of循环的用法.分享给大家供大家参考,具体如下: 一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i++) { console.log(i,array[i]); } 二.用for in的方遍历数组,得到的是索引 var array = [1,2,3,4,5,6,7]; for(let index in array) { console
-
JS forEach跳出循环2种实现方法
假设当我们只需知道某个数组有没有某个属性,如果找到了直接跳出循环,省略掉剩下的循环步骤是较优化的操作,但是for中是可以利用break跳出循环,但break在forEach中无效,那么forEach能不能跳出循环呢?当然是可以. 1.正常for循环break跳出循环 let strArr = ['a', 'b', 'c', 'd'], i = 0, length = strArr.length; for (; i < length; i++) { console.log(strArr[i]);/
-
如何在js代码中消灭for循环实例详解
前言 这篇文章基于我在公司内部分享会整理而成.欢迎探讨补充. 补充一:看来很多人没看完文章就评论了.我在文章末尾说了,是不写 for 循环,不是不用 for 循环.简单陈述不写 for 循环的理由:for 循环易读性差,而且鼓励写指令式代码和执行副作用.更多参考这篇文章 补充二:回应大家的一些反对意见.本来准备专门写文章回应的,但是没时间,就简短回复,直接扔链接了. 1.for 循环性能最好.回应:微观层面的代码性能优化,不是你应该关注的.我在文章中演示了,对百万级数据的操作,reduce 只比
-
详谈js中标准for循环与foreach(for in)的区别
js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //foreach循环 for(var i in array){ alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为
-
JavaScript for循环 if判断语句(学习笔记)
今天学习了JavaScript里面的for循环以及if的判断语句 for(初始值:循环条件:操作){ 满足条件要执行的代码语句 } 初始值:循环前的初始化变量,通常为赋值表达式:建议用var赋值,可以加快运行速度. 循环条件:每次循环前要计算的条件,是运算符类别中的条件运算符,返回值为true或false,当返回值为true时执行循环,为false时退出循环.(往往是i>=n;或用逻辑运算符) 操作:每循环一次以后要计算的表达式,通常是递增++或递减--等赋值表达式. for语句中的三个参数,第
-
JavaScript使用类似break机制中断forEach循环的方法
JavaScript数组对象,有一个forEach方法,可枚举每一个数组元素,但并不支持类似for循环的break语法,中断循环: [1,2,3].forEach(function(item) { // if(!item) break; 不支持 }); 解决办法,可抛出一个特殊异常,来中断forEach循环,原理: var BreakException = {}; try { [1, 2, 3].forEach(function(el) { console.log(el); if (el ===
-
js for终止循环 跳出多层循环
今天我们小编写带代码的时候遇到一段代码,需要终止运行for,通过遍历json数据实现判断 <script> var Tid="55555"; var jb51cp = [ {id:66666,Cpurl:"https://baidu.com"}, {id:55555,Cpurl:"https://www.jb51.net"} ]; for(var i = 0; i < jb51cp.length; i++){ if(jb51cp
-
浅谈vue.js中v-for循环渲染
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="
-
JavaScript 语句之常用 for 循环详解
JavaScript中循环语句不少,for.for in.for of和forEach循环,今天对比Array.Object.Set(ES6).Map(ES6)四种数据结构循环语句支持的情况及区别. 新建四种数据类型的测试数据 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
-
关于javascript的一些知识以及循环详解
javascript的一些知识点: 1.常用的五大浏览器:chrome,firefox,Safari,ie,opera 2.浏览器是如何工作的简化版: 3.Js由ECMAjavascript;DOM;BOM组成: 4.js是弱类型语言(即需要游览器解析了才知道是什么类型的): 5.js是脚本语言(边解析边执行): 6.script也分行内样式,嵌套样式和外联样式. 外联样式一般写在body的最后,因为放在前面会先加载js代码然后再干其他的,影响用户体验. 7.同步和异步 同步:一行一行依次执行.
-
Go语言基础for循环语句的用法及示例详解
目录 概述 语法 注意 示例一 死循环,读取文件 示例二 打印乘法表 示例三 遍历字符串,数组,map 概述 for循环是一个循环控制结构,可以执行指定次数的循环 语法 第一种 for {} //无线循环 第二种 for 条件语句{} 第三种 for 初始语句; 条件语句; 迭代后语句 {} 第四种 for key,value:=range 表达式/变量{} 注意 省略初始条件,相当于while循环体必须用 { } 括起来初始化语句和后置语句是可选的如果只剩下条件表达式了,那么那两个分号也
-
JavaScript类型系统之布尔Boolean类型详解
前面的话 布尔值Boolean类型可能是三种包装对象Number.String和Boolean中最简单的一种.Number和String对象拥有大量的实例属性和方法,Boolean却很少.从某种意义上说,为计算机设计程序就是与布尔值打交道,作为最基本的事实,所有的电子电路只能识别和使用布尔数据.本文将介绍布尔Boolean类型 定义 布尔Boolean类型表示逻辑实体,它只有两个值,保留字true和false,分别代表真和假这两个状态 Boolean包装类型是与布尔值对应的引用类型,在布尔表达式
-
Java for循环详解
对于java中的for循环,我们用的最多的无非就是下面这个语句: for (int i = 0; i < 10; i++) { System.err.println(i); } 但是对于for循环来说,它也有很多变体,如果不清楚了解for循环的结构原理,遇上一些变体的for循环,可能一时不太明白它的含义,for循环虽然有很多变体,但都离不开括号内3条语句的模式(除了增强for循环模式,后面再讨论) for循环的结构: for(语句A; 语句B; 语句C){ //循环体 } 其中,语句A在整个循环
-
python列表生成器常用迭代器示例详解
目录 列表生成式基础语法 1. 使用列表生成式,一行解决for循环 2. 双层循环 3. 加判断语句,条件过滤 4. 加入函数 5. 常见几种迭代器:range. zip . enumerate . filter . reduce 列表生成式基础语法 [exp for iter_var in iterable (if conditional)] 原理: 首先迭代 iterable 里所有内容,每一次迭代,都把iterable里相应的内容放在iter_var中,再把表达式exp应用该iter_va
-
JavaScript Generator异步过度的实现详解
目录 异步过渡方案Generator 1. Generator 的使用 2. Generator 函数的执行 2.1 yield 关键字 2.2 next 方法与 Iterator 接口 3. Generator 中的错误处理 4. 用 Generator 组织异步方法 5. Generator 的自动执行 5.1 自动执行器的实现 5.2 基于Promise的执行器 5.3 使用 co 模块来自动执行 异步过渡方案Generator 在使用 Generator 前,首先知道 Generator
-
JavaScript原始数据类型Symbol的用法详解
目录 Symbol介绍与创建 设置Symbol属性的注意点 Symbol属性名的遍历 Symbol内置值 Symbol.hasInstance Symbol.isConcatSpreadable Symbol.unscopables Symbol.match Symbol.replace Symbol.search Symbol.split Symbol.iterator Symbol.toPrimitive Symbol.toStringTag Symbol.species Symbol介绍与
-
JavaScript面试Module Federation实现原理详解
目录 基本概念 1.什么是 Module Federation? 2.Module Federation核心概念 3.使用案例 4.插件配置 工作原理 1.使用MF后在构建上有什么不同? 2.如何加载远程模块? 3.如何共享依赖? 应用场景 1.代码共享 2.公共依赖 总结 基本概念 1.什么是 Module Federation? 首先看一下官方给出的解释: Multiple separate builds should form a single application. These sep
-
Python asyncio常用函数使用详解
目录 协程的定义 协程的运行 多个协程运行 关于loop.close() 回调 事件循环 协程的定义 需要使用 async def 语句 协程可以做哪些事: 1.等待一个future结果 2.等待另一个协程(产生一个结果或引发一个异常) 3.产生一个结果给正在等它的协程 4.引发一个异常给正在等它的协程 协程的运行 调用协程函数,协程不会开始运行,只是返回一个协程对象 要让协程对象运行有两种方式: 1.在另一个已经运行的协程中用await等待它 2.通过ensure_future函数计划它的执行