当前位置: 首页 > news >正文

【前端从0开始】JavaSript——循环控制语句

循环控制语句

while语句

While 循环会在指定条件为真时循环执行代码块。
While循环,先进行条件判断,再执行循环体的代码

while (条件表达式){循环体
}

注意:当前循环中,如果不满足条件,一次都不会执行

var i= 1;
while(i<=10){console.log(i);i++;
}

do…while

do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
do while循环,先执行循环体代码,再进行条件判断。至少执行一次循环体的代码。

do {代码段
} while (条件表达式)

注意:当前循环中,代码至少执行一次

var i=1;do{i++; // 2console.log(i);}while(i<=10)

for

    for (循环变量初始化表达式; 循环条件表达式; 更新循环变量表达式) {循环体
}

注意:
1
循环变量可以定义在for 循环结构体外
2
没有更新循环变量会变成死循环
3
循环条件中的‘;’不能省略

基础案例:循环输出5个div标签

for(var i=0;i<5;i++){document.write('<div>1</div>')
}

基础案例:循环输出1-100

for(var i=1;i<=100;i++){document.write(i);
}

案例:计算1+2+…100=5050的和

var sum=0
for(var i=1;i<=100;i++){sum += iif(i<100){document.write(i+'+');}else{document.write(i+'='+sum)}
}
console.log(sum)

案例二:循环输出table表格,创建四行5列的表格

document.write('<table border="1">')for(var j=1;j<=4;j++){document.write('<tr>')for(var i=0;i<=3;i++){document.write('<td>@</td>');}document.write('</tr>')}
document.write('</table>')

案例三:打印一个五行四列的表格(隔行换色)
案例四:点击显示一张图片,点击显示多张图片
案例五:判断数组中值哪些是数字类型
var arr = [ ‘100px’, ‘abc’-6, [], -98765, 34, -2, 0, ‘300’, , function(){alert(1);}, null, document, [], true, ‘200px’-30,‘23.45元’, 5, Number(‘abc’), function(){ alert(3); }, ‘xyz’-90 ];
案例六:循环实现金字塔效果
在这里插入图片描述
案例七:循环实现九九乘法表
在这里插入图片描述
案例八:循环实现阶梯效果
在这里插入图片描述

for…in

for (变量 in 对象) {代码段
}

●for…in 语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里
●在无法预知对象的任何信息,和循环次数的时候使用

var arr = [{"name":"Java编程思想","price":78.9},{"name":"python入门宝典","price":59},{"name":"JavaScript程序设计","price":69}
];
for(var i=0;i<arr.length;i++){// console.log(arr[i]);// json - {"name":"Java编程思想","price":78.9}for(key in arr[i]){console.log(arr[i][key]);}
}

相关文章:

【前端从0开始】JavaSript——循环控制语句

循环控制语句 while语句 While 循环会在指定条件为真时循环执行代码块。 While循环&#xff0c;先进行条件判断&#xff0c;再执行循环体的代码 while (条件表达式){循环体 }注意&#xff1a;当前循环中&#xff0c;如果不满足条件&#xff0c;一次都不会执行 var i 1; whi…...

【Elasticsearch】spring-boot-starter-data-elasticsearch的使用以及Elasticsearch集群的连接

更多有关博主写的往期Elasticsearch文章 标题地址【ElasticSearch 集群】Linux安装ElasticSearch集群&#xff08;图文解说详细版&#xff09;https://masiyi.blog.csdn.net/article/details/131109454基于SpringBootElasticSearch 的Java底层框架的实现https://masiyi.blog.c…...

Python学习笔记_进阶篇(四)_django知识(三)

本章内容&#xff1a; Django 发送邮件Django cookieDjango sessionDjango CSRF Django 发送邮件 我们常常会用到一些发送邮件的功能&#xff0c;比如有人提交了应聘的表单&#xff0c;可以向HR的邮箱发邮件&#xff0c;这样&#xff0c;HR不看网站就可以知道有人在网站上提…...

指针(初阶)

1. 指针是什么&#xff1f; 指针是什么&#xff1f; 指针理解的2个要点&#xff1a; 1. 指针是内存中一个最小单元的编号&#xff0c;也就是地址 2. 平时口语中说的指针&#xff0c;通常指的是指针变量&#xff0c;是用来存放内存地址的变量 总结&#xff1a;指针就是地址&…...

Flink内核源码解析--Flink中重要的工作组件和机制

Flink内核源码 1、掌握Flink应用程序抽象2、掌握Flink核心组件整体架构抽象3、掌握Flink Job三种运行模式4、理解Flink RPC网络通信框架Akka详解5、理解TaskManager为例子&#xff0c;分析Flink封装Akka Actor的方法和整个调用流程6、理解Flink高可用服务HighAvailabilityServ…...

Linux 压缩解压(归档管理):tar命令

计算机中的数据经常需要备份&#xff0c;tar是Unix/Linux中最常用的备份工具&#xff0c;此命令可以把一系列文件归档到一个大文件中&#xff0c;也可以把档案文件解开以恢复数据。 tar使用格式 tar [参数] 打包文件名 文件 tar命令很特殊&#xff0c;其参数前面可以使用“-”&…...

spring boot集成mqtt协议发送和订阅数据

maven的pom.xml引入包 <!--mqtt--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-integration</artifactId><version>2.3.6.RELEASE</version></dependency><dependency…...

【数据库】详解数据库架构优化思路(两主架构、主从复制、冷热分离)

文章目录 1、为什么对数据库做优化2、双主架构双主架构的工作方式如下&#xff1a;双主架构的优势包括&#xff1a;但是一般不用这种架构&#xff0c;原因是&#xff1a; 3、主从复制主从复制的工作方式如下&#xff1a;主从复制的优势包括&#xff1a;主从复制的缺点 4、冷热分…...

el-table 实现动态表头 静态内容 根据数据显示动态输入框

直接放代码了 <el-table:data"form.tableDataA"borderstripestyle"width: 100%; margin-top: 20px"><el-table-columnv-for"(category, categoryIndex) in form.tableDataA":key"categoryIndex":label"category.name&qu…...

Reids 的整合 Spring Data Redis使用

大家好 , 我是苏麟 , 今天带来强大的Redis . REmote DIctionary Server(Redis) 是一个由 Salvatore Sanfilippo 写的 key-value 存储系统&#xff0c;是跨平台的非关系型数据库。 Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选…...

3D数据转换工具HOOPS Exchange概览

HOOPS Exchange SDK是一组C软件库&#xff0c;使开发团队能够快速为其应用程序添加可靠的2D和3D CAD导入和导出功能。这允许访问广泛的数据&#xff0c;包括边界表示&#xff08;BREP&#xff09;、产品制造信息&#xff08;PMI&#xff09;、模型树、视图、持久ID、样式、构造…...

【从零开始的rust web开发之路 一】axum学习使用

系列文章目录 第一章 axum学习使用 文章目录 系列文章目录前言老规矩先看官方文档介绍高级功能兼容性 二、hello world三、路由四&#xff0c;handler和提取器五&#xff0c;响应 前言 本职java开发&#xff0c;兼架构设计。空闲时间学习了rust&#xff0c;目前还不熟练掌握。…...

oracle警告日志\跟踪日志磁盘空间清理

oracle警告日志\跟踪日志磁盘空间清理 问题现象&#xff1a; 通过查看排查到alert和tarce占用大量磁盘空间 警告日志 /u01/app/oracle/diag/rdbms/orcl/orcl/alert 跟踪日志 /u01/app/oracle/diag/rdbms/orcl/orcl/trace 解决方案&#xff1a; 用adrci清除日志 确定目…...

【vue】el-table 数据更新后,刷新表格数据

表格里面的数据更新后&#xff0c;可以通过以下方法来刷新表格 方法1 用更新后的数据&#xff0c;覆盖之前的数据 var newTableData[];for(var i0;i<that.tableData.length;i){ if(aIdthat.selectStationId&&bIdthat.selectDeviceId){that.tableData[i].physica…...

AVL——平衡搜索树

✅<1>主页&#xff1a;我的代码爱吃辣&#x1f4c3;<2>知识讲解&#xff1a;数据结构——AVL树☂️<3>开发环境&#xff1a;Visual Studio 2022&#x1f4ac;<4>前言&#xff1a;AVL树是对二叉搜索树的严格高度控制&#xff0c;所以AVL树的搜索效率很高…...

TCP通信流程以及一些TCP的相关概念

1.TCP和UDP区别 都为传输层协议 UDP&#xff1a;用户数据报协议&#xff0c;面向无连接&#xff0c;可以单播&#xff0c;多播&#xff0c;广播&#xff0c;面向数据报&#xff0c;不可靠 TCP&#xff1a;传输控制协议&#xff0c;面向连接的&#xff0c;可靠的&#xff0c;基…...

PyTorch学习笔记(十七)——完整的模型验证(测试,demo)套路

完整代码&#xff1a; import torch import torchvision from PIL import Image from torch import nnimage_path "../imgs/dog.png" image Image.open(image_path) print(image)# 因为png格式是四个通道&#xff0c;除了RGB三通道外&#xff0c;还有一个透明度通…...

WPF开篇

一、为什么要学习WPF 大环境不好&#xff0c;公司要求逐年提高&#xff0c;既要会后端又要会客户端WPF相对于WinForm来说用户界面效果更好&#xff0c;图像更加立体化也是给自己增加一项技能&#xff0c;谨记一句话&#xff0c;技多不压身&#xff1b;多一份技能就多一份竞争力…...

linux 压缩解压缩

压缩解压缩 linux中压缩和解压文件也是很常见的 zip格式 zip格式的压缩包在windows很常见&#xff0c;linux中也有zip格式的压缩包 #压缩#zip [选项] 压缩包名 文件(多个文件空格隔开)zip 1.zip 123.txt 456.txt zip -r 2.zip /home/user1 ---------------------- -r 压缩目录 …...

centos9 mysql8修改数据库的存储路径

一、环境 系统&#xff1a;CentOS Stream release 9 mysql版本&#xff1a;mysql Ver 8.0.34 for Linux on x86_64 (MySQL Community Server - GPL) 二、修改mysql的数据库&#xff0c;存储路径 查看目录数据存储的位置 cat /etc/my.cnf操作 1、新建存放的目录&#xff0c;…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...