前端开发面试题—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 前端开发 API
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16851 23
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1428 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
522 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
1290 5
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
653 4
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
926 1
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
2008 2
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
3604 0