前端开发面试题—JavaScript循环语句

简介: 今天分享一下我遇到的一个面试题,是一个很简单、很基础、很常规的题目,问的是JavaScript的循环语句有哪些?

今天分享一下我遇到的一个面试题,是一个很简单、很基础、很常规的题目,问的是JavaScript的循环语句有哪些?

🧩循环语句

  • 在程序中,一组被重复执行的语句称为循环体,能否重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句称为循环语句
  • 我们在理解条件语句的时候,我们可以想象JavaScript解释器在源代码中会经过不同的路径,而循环语句则是把这些路径弯曲又回到起点,以重复执行代码中的某些部分。在JavaScript中有五种循环语句:for语句、while语句、do/while语句、for/of语句(及其变体for/await语句)和for/in语句。

while语句

就像if语句是JavaScript的基本条件控制语句一样,while语句是JavaScript的基本循环语句

  • 语法结构
while (条件表达式) {
// 循环体}


  • 执行while语句时,解释器首先会求值表达式。如果这个表达式的值是假值,则解释器会跳过作为循环体的语句,继续执行程序中的下一条语句。而如果表达式是真值,则解释器会执行语句并且重复,即跳回循环的开头再次求值表达式。另一种解释方式是,解释器会在表达式为真值时重复执行语句。注意,使用while(true)可以创造一个无穷循环
  • 通过while循环打印数值0到9的例子
letnum=0while(num<10){
console.log(num)
num++}

  • while循环流程图

do/while语句

do…while语句的功能和while语句类似,其区别在于,do…while会无条件地执行一次循环体中的代码,然后再判断条件,根据条件决定是否循环执行;而while是先判断条件,再根据条件决定是否执行循环体。

  • 语法结构
do {
// 循环体} while (条件表达式);

  • 从语法上看,do/while循环与while循环有两个区别。首先,do循环要求使用两个关键字:do(标记循环开始)和while(标记循环结束并引入循环条件)。其次,do循环必须始终以分号终止。而while循环在循环体使用花括号时不需要分号。
  • 使用do…while计算1~100之间的所有整数的和的例子
letsum=0leti=1do {
sum+=ii++} while(i<=100)
console.log(sum) // 输出结果:5050


  • do…while循环流程图


for语句

for语句提供了比while语句更方便的循环结构。for语句简化了遵循常见模式的循环。多数循环都有某种形式的计数器变量,这个变量在循环开始前会被初始化,然后循环的每次迭代都会测试它的值。另外,计数器变量在循环体结束时、在被再次测试之前会递增或者更新。在这种循环模式下,初始化、测试和更新是对循环变量的三个关键操作。

  • 语法结构
for (初始化变量; 条件表达式; 操作表达式) {
// 循环体}

image.gif

  • 在上述语法中,“初始化变量”用来初始化一个用来作为计数器的变量,通常使用var关键字声明一个变量,并给变量赋一个初始值。“条件表达式”用来决定每一次循环是否继续执行,也就是循环的终止条件。“操作表达式”是每次循环最后执行的代码,通常用于对计数器变量进行更新(递增或递减)。
  • 通过for循环打印数值0到9的例子
for(leti=0;i<10;i++) {
console.log(i);
}


  • for循环流程图

for/of语句

ES6定义了一个新循环语句:for/of。这种新循环虽然使用for关键字,但它与常规for循环是完全不同的两种循环。for/of循环专门用于可迭代对象,for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

  • 语法结构
for (variableofiterable) {
//statements}


  • variable:在每次迭代中,将不同属性的值分配给变量。
  • iterable:被迭代枚举其属性的对象。
  • 迭代Array例子
letarray= [10, 20, 30]
for (letvalueofarray) {
value+=1console.log(value)
}
// 输出// 11// 21// 31


  • 迭代String例子
letstring="abc";
for (letvalueofstring) {
console.log(value);
}
// 输出// "a"// "b"// "c"
  • image.gif
  • 其他可迭代对象就不一一列举了

for/in语句

for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。

  • 语法结构
for (variableinobject)
statement

  • variable:在每次迭代时,variable 会被赋值为不同的属性名。
  • object:非 Symbol 类型的可枚举属性被迭代的对象。
  • statement:是作为循环体的语句或语句块
  • for ... in是为遍历对象属性而构建的,不建议与数组一起使用,它最常用的地方应该是用于调试,可以更方便的去检查对象属性(通过输出到控制台或其他方式)。尽管对于处理存储数据,数组更实用些,但是你在处理有key-value数据(比如属性用作“键”),需要检查其中的任何键是否为某值的情况时,还是推荐用for ... in。
  • 下面的函数接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。
varobj= {a:1, b:2, c:3}
for (varpropinobj) {
console.log("obj."+prop+" = "+obj[prop])
}
// 输出// "obj.a = 1"// "obj.b = 2"// "obj.c = 3"

image.gif

  • for...of与for...in的区别
    无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。
    for...in 语句以任意顺序迭代对象的可枚举属性。
    for...of 语句遍历可迭代对象定义要迭代的数据。
相关文章
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
223 6
JS循环for、for...of、for...in
|
JavaScript 前端开发
js循环有几种
js循环有几种
200 0
|
JavaScript
js 循环数组取值
js 循环数组取值
298 122
|
10月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
948 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
150 2
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
272 1
|
前端开发 小程序 JavaScript
信前端里的循环显示如何编写代码?
信前端里的循环显示如何编写代码?
201 5
|
JavaScript 前端开发 索引