JavaScript - for 循环结构 与 数组
2024-05-10 11:37:26
循环结构
循环结构作用：代码重复执行
1.1-for循环结构
- 1.for循环语法
for( 语句1;语句2;语句3 ){循环体：需要反复执行的代码;
}
- 2.执行步骤：
- 1.执行语句1（定义一个循环变量）
- 2.执行语句2，判断语句2条件是否成立（条件表达式）
- 2.1 如果条件成立，则执行循环体代码
- 执行语句3（循环变量自增），重复步骤2
- 2.2 如果不成立，结束循环，执行大括号后面的代码
- 2.1 如果条件成立，则执行循环体代码
- 2.执行语句2，判断语句2条件是否成立（条件表达式）
- 1.执行语句1（定义一个循环变量）
- 3.for循环好处及注意点
- 好处：循环变量的声明与循环变量自增在一个小括号中，可以更好的避免死循环
- 注意点：原则上语句1，语句2，语句3可以是任意代码，但是不建议乱写，因为会导致死循环
- 语句1：通常是定义循环变量
- 语句2：条件表达式
- 语句3：通常都是循环变量自增/自减（视需求而定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>for循环</title></head><body><script>/* 1. for循环语法for(代码1;代码2;代码3){循环体代码};*///需求：打印三次 大前端爱你们么么哒for (let i = 1; i <= 3; i++) {console.log("大前端爱你们么么哒");}/* for循环注意点 ： 原则上代码1，代码2，代码3可以写任意代码,但是一般不会乱写代码1 ： 声明循环变量代码2 ： 循环条件代码3 ： 循环变量自增*/</script></body></html>
</html>
1.2-for循环练习(箩筐思想求和)
箩筐思想求和
a.声明空箩筐
b.遍历萝卜堆数
c.将萝卜放入箩筐中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>for循环-空框思想求和</title></head><body><script>//4.求累加和/ 平均值 = 累加和/数量/* 箩筐思想 ： 三步法1.声明空箩筐2.遍历萝卜堆数3.将萝卜放入箩筐*///1.声明空箩筐let sum = 0;// 2.遍历萝卜堆数for (let i = 1; i <= 100; i++) {console.log(i); // 遍历出来 1 ~ 100// 3.将萝卜放入箩筐sum += i;}console.log(sum);</script></body>
</html>1.3-for循环练习(擂台思想求最大/小值)
擂台思想求最大/小值
a.声明擂主
b.遍历挑战者
c.依次与擂主PK，交换位置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>for循环-擂台思想求最大值</title></head><body><script>/* 擂台思想 ： 三步法1.声明空擂主 : （第一次挑战者无条件坐擂主）2.遍历挑战者3.依次和擂主PK*///5.求最大值与最小值//请用户输入5个数, 将最大的那个数打印出来// 求最大值:// 定义一个擂主:保存最大值 , 需要的是用户的最大值,定义一个变量一定能够被打赢(定义一个最小值) -Infinitylet max = -Infinity;// 打擂:5次 (for循环遍历)for (let i = 0; i < 5; i++) {let user = +prompt(`请输入第${i + 1}个数`);// console.log(i);// 依次和擂主Pkif (user > max) {// 交换擂主max = user;}}document.write(`您输入的数字中最大的那个数是${max}`);//请用户输入5个数, 将最小的那个数打印出来// 求最小值//1.声明空擂主 : （第一次挑战者无条件坐擂主）let min = Infinity;//2.遍历挑战者(for 循环)for (let i = 1; i <= 5; i++) {let num = prompt("请输入第" + i + "个挑战者");//3.依次和擂主PKif (num < min) {// 交换擂主min = num;}}console.log(min);</script></body>
</html>1.4-break与continue关键字
- 1.break：结束整个语句
- break既可以用于循环结构也可以用于switch分支结构
- 2.continue：结束本次循环体，进入下一次循环判断
- continue只能用于循环结构语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>break与continue关键字</title>
</head>
<body></body>
<script>/*** break：结束整个语句* break既可以用于循环结构也可以用于switch分支结构* continue：结束本次循环体，进入下一次循环判断* continue只能用于循环结构语句*///示例：吃包子：我买了十个包子，包子每次只能吃一个，需要循环吃十个//break：假如吃到第五个我吃饱了，后面的包子就都不用吃了//continue:假如吃到第五个吃出来小强，那我第五个不吃了，但是我没吃饱，后面还是要继续吃let sum = 0;for(let i = 1;i<=10;i++){// continue// if(i == 5) {// console.log ( "吃到小强了，这个包子我不吃了" );// continue;//结束本次循环体（后面的代码不会执行），循环没有结束，还是会依次执行语句3和语句2// };//breakif(i==5){console.log ( "我吃饱了，后面的包子都不想吃了" );break;//结束整个循环语句}console.log ( "我吃的是第" + i + "个包子" );}</script>
</html>
1.5-循环次数不固定02：穷举
穷举：从1遍历到无穷大，找出符合条件的数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>循环次数不固定02：穷举</title></head><body></body><script>//需求：有一群人，如果3个人站一排多出1个人，如果4个人站一排多出2个人，如果5个人站一排多出3个人//请问这群人有多少人for (let i = 1; i < Infinity; i++) {//从1循环到无穷大，也是一种死循环if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {console.log("人数为" + i);break; //找到答案，结束循环}}</script>
</html>1.6-数组遍历
- 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组
- 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
- 2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环
- 3.固定循环语句格式:
for(let i = 0; i < arr.length; i++) {// 数组遍历的固定结构}- 思考：为什么循环变量let i = 0 而不是1呢？
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数组遍历</title></head><body></body><script>/*** * 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组* * 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取* 2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环* 3.固定循环语句格式:* `for(let i = 0; i < arr.length; i++) {* // 数组遍历的固定结构* }`*/let arr = [10, 20, 30, 40, 50];for (let i = 0; i < arr.length; i++) {let item = arr[i]; //获取数组的每一个元素console.log(item);}</script>
</html>1.7 - 翻转数组
//真正使用,一行搞定
console.log( arr.reverse( ) );
1.7.1 - 翻转数组(思维锻炼)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let arr = ["a", "b", "c", "d", "e"];// 0 1 2 3 4// 翻转数组目标:['e','d','c','b','a']// 0 1 2 3 4// 简单的思路解析// 1.创建一个新数组:空的// 2.从原数组最后开始读取元素:读取一个就放到新数组中// 分析:新数组放数据 新数组[新数组.length] = 值// 分析:老数组如何从后面开始读取数据? for循环的变量 从 length - 1 到 0let newArr = [];for (let i = arr.length - 1; i >= 0; i--) {console.log(arr[i]);newArr[newArr.length] = arr[i];}console.log(newArr);</script>
</html>1.7.2 - 交换数组(思维锻炼)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let arr = ["a", "b", "c", "d", "e"];/* 1.2 交换法(1)遍历数组一半(2)下标为 i元素 与 下标为 arr.length-1-i 元素交换*///1.遍历数组的一半for (let i = 0; i < arr.length / 2; i++) {// 第一个与最后一个// i= 0 arr.length - 1// i= 1 arr.length - 1 - 1// i= 2 arr.length - 1 - 2// i === arr.length - 1 - iconsole.log(i); //0,1,2// a = arr[i] b = arr[arr.length - 1 - i]// let temp = a// a = b// b = temp//2. 下标为i元素 和 下标为arr.length-1-i元素交换let temp = arr[i]; // 01-定义一个新变量保存 第 i 个位置的值arr[i] = arr[arr.length - 1 - i]; // 后面的覆盖前面的arr[arr.length - 1 - i] = temp; //}console.log(arr);</script>
</html>1.8 - 二维数组及遍历
二维数组：数组元素又是数组
◆ 一维数组：数组元素都是基础数据类型
◆ 二维数组：数组元素都是一维数组
◆ 二维数组访问：一维一层下标
◆ 一维访问：数组变量[下标] 得到的是数组
◆ 二维访问：数组变量[下标][下标]
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let angle = ["安琪拉", 18, "女", "仍个球"];let fox = ["妲己", 20, "女", "爱心"];let monkey = ["猴子", 22, "男", "棍子"];// 二维数组:将数组扔到数组里let hero = [angle, fox, monkey];console.log(hero);// 二维数组访问// 1.访问一维:数组变量[下标]console.log(hero[1]);// 2.访问二维:在第一维的基础上增加下标访问即可 数组变量[下标][下标]console.log(hero[1][0]);// 二维数组遍历:循环 里面 套循环for (let i = 0; i < hero.length; i++) {// i 是下标,hero[i] 访问元素:也是一个数组console.log(hero[i]);// hero[i] 是一个数组:可以遍历for (let j = 0; j < hero[i].length; j++) {// hero[i] 是一个数组,j 是数组下标 ,访问元素 hero[i][j]console.log(hero[i][j]);}}</script>
</html>1.9 - 数组形式访问字符串
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let str = "我爱你中国";console.log(str);// 字符串:本质的存在是 数组,由下标和lengthconsole.log(str.length);console.log(str[0]);// 字符串具有恒定性:不可修改str[0] = "你";console.log(str); //无效// 变量可以被重新赋值:修改字符串就必须给字符串变量重新赋值str = "你爱我中国";console.log(str);// 总结// 以后但凡有 length 属性的东西,一定可以用数组的形式去访问(由下标):为开发者带来便捷性// 能访问不一定能修改(数组可以,其他都不行)</script>
</html>2.0 - 案例:
01-九九乘法表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>// 需求:做九九乘法表// 九九乘法表 : 有行有列 (二维结构)for (let i = 1; i <= 9; i++) {// 循环:负责输出内容// 列的数量跟行有关:第几行就有几列for (let j = 1; j <= i; j++) {// i 代表行, j 代表列document.write(`${i} * ${j} = ${i * j} `);}// 换行document.write(`<br>`);}</script>
</html>02 - 动态生成柱状图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {display: flex;align-items: flex-end;justify-content: space-evenly;width: 1200px;height: 400px;border: 3px solid rgb(241, 30, 30);}/* .box > div {width: 400px;height: 300px;background-color: rgb(12, 221, 236);} */</style></head><body><!-- <div class="box"><div></div></div> --></body><script>// 1.获取用户输入let sum = +prompt("请输入柱状图柱子的数量");// 柱子宽度let width = 1200 / (sum * 2 + 1);// 渲染大盒子 一半document.write('<div class="box">');// 遍历每一个柱子for (let i = 0; i < sum; i++) {// 柱子的高度,颜色rgb都随机let h = Math.ceil(Math.random() * 400);let r = Math.round(Math.random() * 255);let g = Math.round(Math.random() * 255);let b = Math.round(Math.random() * 255);// 渲染柱子document.write(`<div style="width:${width}px;height:${h}px;background-color: rgb(${r}, ${g}, ${b});"></div>`);}// 结束渲染大盒子document.write("</div>");</script>
</html>03- for循环 - 起始值,结束值 for (; start <= end; start++)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 100px;height: 100px;background-color: #6cf;float: left;margin: 10px;}</style></head><body></body><script>// 需求:用户指定要生成的div次数// let user = +prompt("请输入要生成的div数量");// for (let i = 0; i < user; i++) {// document.write("<div></div>");// }let start = +prompt("请输入起始值:");let end = +prompt("请输入结束值:");for (; start <= end; start++) {document.write("<div></div>");}</script>
</html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=, initial-scale=1.0" /><title>Document</title></head><body></body><script>// // 求 1 - 10 之间的所有整数之和// // 定义一个空框// let num = 0;// // 遍历// for (let i = 1; i <= 10; i++) {// // 求和// num += i;// }// // 打印// console.log(num);let sum = 0;let start = +prompt("请输入初始值");let end = +prompt("请输入结束值");for (; start <= end; start++) {sum += start;console.log(start);}console.log(sum);</script>
</html>循环补充
while循环结构
- 1.语法：
while(条件 true/false){循环体/需要重复执行的代码;}
- 执行步骤：
- 1.判断条件是否成立
- 1.1 如果成立，执行循环体代码，然后重复步骤1
- 1.2 如果不成立，结束循环，执行大括号后面的代码
- 1.判断条件是否成立
- 3.注意点
- （1）小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立
- （2）避免写一个死循环
do-while循环结构
- 1.语法:
do{循环体;
}while( 条件 );
- 2.执行过程
- 1.先执行循环体代码
- 2.执行条件语句
- 如果结果为true，执行循环体代码
- 如果为false，循环结束
- 3.重复步骤2
- 3.do-while和while实现的循环其实是一样的，只有一个不同点：do-while循环不管怎样先执行一次循环体代码，然后再判断条件
- while循环：先奏后斩（先判断条件再执行循环体）
- do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>/* 1. 学习目标 ： do-while循环 2. 学习路线(1)复习while语法特点(2)学习do-while语法(3)介绍do-while语法应用场景*///1.while循环://let i = 1;// while(i > 5){// //循环条件不成立，循环体一次都不执行// console.log ( "哈哈哈哈" );// i++// }//2.do-while循环/**do-while语法：(用的很少)do{循环体;}while( 条件 );特点：无论如何先执行一次循环体，然后再去判断条件*/let i = 1;do{console.log ( "呵呵呵呵呵" );i++;}while (i > 5);//while循环：先奏后斩（先判断条件再执行循环体）//do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）//3.do-while循环与while循环应用场景//无论如何需要先执行一次循环体，使用do-while代码更简洁//例子：让用户输入账号和密码，如果输入正确就登陆成功，如果输入错误就让他一直输入//while循环实现// let username = prompt('请输入账号');// let password = prompt('请输入密码');//// while(username != 'admin' || password != '123456'){// username = prompt('请输入账号');// password = prompt('请输入密码');// }//do-while实现do{let username = prompt('请输入账号');let password = prompt('请输入密码');}while(username != 'admin' || password != '123456')</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>循环补充</title></head><body></body><script>// while循环: 解决不确定次数的循环// while (条件 true / false) {// 循环体 / 需要重复执行的代码;// 一般, while循环都会结合break// }// 需求: 猜数字let rand = Math.ceil(Math.random() * 100); // 1-100// while循环: 不确定猜的次数let flag = true;// while (flag) {// // 死循环// let user = +prompt('请输入0-100之间的数字')// if (user > rand) {// alert('猜大了')// } else if (user < rand) {// alert('猜小了')// } else {// alert('猜中了,就是' + rand)// // break // 结束循环// flag = false// }// }// 不论for循环还是while循环: 条件如果不满足: 循环不执行for (; false; ) {console.log("1");}// 需求: 循环必须执行,哪怕只有一次?// do {// 循环体;// } while (条件);// 先干了再说do {console.log(2);} while (false);// do-while的特点: 保证循环体一定执行1次(最少)// 循环体执行的次数 与条件判定的次数一样// 总结: 三种循环的选择// 1. 如果指定次数: for循环(有起始有结束)// 2. 如果不确定次数: while// for替代: for(;;){}// 3. 如果要求循环体必须执行: do-while// for替代: for(let flag = true; flag;){}</script>
</html>三种循环结构总结
- 1.原则上，三种循环结构语句之间可以互转，只不过每一种语句的适用场景不一样
- 2.最常用：for循环：适合循环次数固定
- 3.while循环：适合循环次数不固定
- 4.do-while循环：适合循环次数不固定，但是循环体代码至少要执行一次
JavaScript - for 循环结构 与 数组相关推荐
- c 结构体在声明时赋值_Java基础知识 初识Java 循环结构进阶 数组 数据类型 各种运算符...
今天给大家带来的是初级Java基础部分的知识:包括初始Java.变量.常量.数据类型.运算符.各种选择结构.循环结构.数组等Java的基础语法部分!最后还有****循环结构的进阶****,步骤超详细, ...
- php数组循环便利,浅析PHP中for与foreach两个循环结构遍历数组的区别
遍历一个数组是编程中最常见不过的了,这里跟大家讨论下for和foreach两种方法.用这两种方法执行遍历的场景太多太多了,这里我们只针对以下两个数组作为例子来讨论.所谓管中窥豹,多少能理清一点两者的区 ...
- LuaForUnity3：Lua的分支结构、循环结构与数组
一.分支结构与循环结构 如果学过C/C++/C#就很简单了,代码中有注释 print("-----------------------------------------------&quo ...
- Labview循环结构创建数组的例子
创建数组过程中可能会出现很多重复的内容,所以,大多时候可以利用循环结构来创建数组.下面通过生成100以内的随机整数创建一个4×4的二维数组.可按照以下步骤进行. 步骤一 创建一个VI,在程序框图中添加 ...
- C语言基础1（数据类型、常变量、运算符、基本语句、选择结构、循环结构、数组、字符串、函数、指针）
数据类型及运算 数据类型 一.整形(int) 整形变量的定义.输入和输出 打印格式 含义 %d 输出一个有符号的10进制int类型 %o(字母o) 输出8进制的int类型 %x 输出16进制的int类 ...
- java数组循环_Java之循环结构及数组
循环结构 for循环for(条件初始化;条件判断;条件变化){ 重复执行的代码: } for循环的执行流程: 1.条件初始化 2.条件判断 3.不满足条件结束循环,满足条件执行,执行循环体语句 4.条 ...
- java笔记(基础+修饰符+选择结构+分支结构+循环结构+方法+数组+面对对象+三大特性)
文章目录 语言基础 变量 概念 全局变量 局部变量 实例变量 声明 数据类型 常用 基本数据类型 引用数据类型 Unicode编码表 ASCII字符表 运算符 算术运算符 赋值运算符 关系运算符 逻辑 ...
- java基础知识之循环结构与数组
1.for循环:for(循环变量的初始化1:循环的条件2:循环变量的变化3){ 循环体4: } 执行顺序为:1,2,4,3,2,4,3,2,4,3,2,4,3.....当2为false时结束循环 2. ...
- Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)
一.Js简介和入门 继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button οnclick="javas ...
最新文章
- 互联网大厂技术面试内幕@霞落满天
- oracle profile
- 又一个高等级数据中心着火了！
- 【Round #36 (Div. 2 only) B】Safe Spots
- 旧项目适配iphone6和iphone plus
- 软件测试中需求分析谁去做的,软件项目在进入需求分析阶段，测试人员应该开始介入其中。 - 问答库...
- LevelDb实现原理
- JAVA入门级教学之（你是否理解HelloWorld的这段经典的代码的注释）
- “骗子”成民企院士第一人：把认真当信仰，人生就会开挂
- unixODBC配置文件
- mysql中的trigger
- ipc-rpc-xmlrpc
- C++ 复杂、内存漏洞，2019 年的软件开发并不安全！
- 手把手教你搭建FastDFS集群（上）
- libav(ffmpeg)简明教程（1）
- Synchronized快
- GB28181协议——布防和报警订阅
- 游戏测试-笔试/面试（一）
- 智能AI源码机器人电销机器人智能电话机器人拨号机器人语音机器人
- 朴素贝叶斯——R语言