1.循环的分类
1.while循环
1.使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
2.while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断,比如判断用户名和密码
3.代码结构
while (条件) {
//循环代码
}
2.do while 循环
1.do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
2.代码结构
1.先执行一次循环体代码
2.再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码
do{
//循环代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件)
4.使用方法
<!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>Document</title>
</head>
<body>
<script>
/* // 1.do while 循环 语法结构
do {
// 循环体
} while (条件表达式)
// 2. 执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真,则继续执行循环体,否则退出循环
// 3. 代码验证 */
var i = 1;
do {
document.write('how are you?');
i++;
} while (i <= 0)
// 4. 我们的do while 循环体至少执行一次
</script>
</body>
</html>
3.for循环
1.也是重复执行代码
2.好处:把声明起始值、循环条件、变化值写到一起,让人一目了然
3.当如果明确了循环的次数的时候推荐使用for循环
4.当不明确循环的次数的时候推荐使用while循环
5.代码结构
for (声明记录循环次数的变量; 循环条件;变化值) {
循环体
}
2.while循环
1.循环的语法
while(循环条件) {
要重复执行的代码(循环体)
}
1.循环:重复执行某段代码, 而 while : 在…. 期间
2.跟if语句很像,都要满足小括号里的条件为true才会进入执行代码
3.while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到 小括号判断条件,直到括号内条件不满足,即跳出
2.while循环注意事项
let i=1
while(i <=3){
document.write(`我会循环3次<br>`)
i++
}
1.循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。 所以,循环需要具备三要素:
1.变量起始值 let i=1
2.终止条件(没有终止条件,循环会一直执行,造成死循环) i <=3
3.变量变化量(用自增或者自减) i++
3.综合案列
1.while循环案列
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>
<script>
let num = +prompt('请输入一个数字')
while (num>0){
document .write(`月薪过万就来黑马程序员<br>`)
num--
}
</script>
</body>
</html>
2.你爱我吗案列
1.用户输入 爱 结束循环
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>
<script>
let love = prompt('你爱我吗')
while (love !== '爱') {
// alert('你到底爱不爱我')
love = prompt('你爱我吗')
}
console.log(love);
</script>
</body>
</html>
3.简易ATM存取款机案列
1.当用户取款时 进行余额的减法
2.当用户存款时 进行余额的加法
3.当用户查询时 查询当前余额
4.当用户退出时 直接退出操作
5.3.加减法补充
money = money + 10; // 加10
money += 10; // 加10
两种写法相同
money = money - 10;// 减10
money -= 10; //减10
<!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>
<script>
/* 步骤1.声明一个变量提示用户操作 sum
let sum = prompt(`请选择您的操作
1.取款
2.存款
3.查看余额
4.退出 `);
*/
/* 步骤2.当用户输入对应的信息时 会有对应的功能
1.用户输入 1
还会继续弹窗 问一遍 上面1的内容
2.用户输入 2
还会继续弹窗 问一遍 上面1的内容
3.用户输入 3
还会继续弹窗 问一遍 上面1的内容
4.用户输入4
结束使用
*/
// 只要不是输入 4 输入任何东西都会提示弹窗 输入1 2 3 会展现功能
/* 步骤3.
1.定义一个变量: money 余额
2.用户输入1 取款 withdrawal
1.在弹出一个单独的弹窗 让用户输入想要取款的数量
2.取款: 余额-取款数量
money -= withdrawal
3.用户输入2 存款 deposit
1.在弹出一个单独的弹窗 让用户输入想要存款的数量
2.存款: 存款数量 + 余额
money += deposit
4.用户输入3 余额 money
1.在弹出一个单独的弹窗 显示用户的余额
2. 输出 money 余额
5.用户输入 4 结束使用
*/
//1.提示用户输入
let sum;//提示
//2.用户余额
let money = 0; //余额
//功能实现
while (sum!==4){
//当用户输入不等于4的时候弹窗 输入4的时候结束
sum = +prompt(`请选择您的操作
1.取款
2.存款
3.查看余额
4.退出
`)
if (sum===1) {
//当用户输入1时 进行取款功能的实现
let withdrawal=+prompt('请输入取款金额')
money -= withdrawal
} else if (sum===2) {
//当用户输入2时 进行存款功能的实现
let deposit=+prompt('请输入存款金额')
money += deposit
} else if (sum===3) {
//当用户输入3时 进行余额查询的功能
alert(money)
}
}
</script>
</body>
</html>
3.for循环
1.for循环语法与基本使用
1.也是重复执行代码
2.好处:把声明起始值、循环条件、变化值写到一起,让人一目了然
3.当如果明确了循环的次数的时候推荐使用for循环
4.当不明确循环的次数的时候推荐使用while循环
5.代码结构
for (声明记录循环次数的变量; 循环条件;变化值) {
循环体
}
2.循环退出
1.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>Document</title>
</head>
<body>
<script>
let num =0
for (let index = 0; index <=100; index++) {
if (index%2 ===0){
continue
}
num += index
}
console.log(num);
</script>
</body>
</html
2.break:跳出所在的循环-终止循环
<!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>
<script>
let num =0
for (let index = 0; index <=100; index++) {
num +=index
if (num>500)
break
// num 大于500时停止循环
}
console.log(num);
</script>
</body>
</html>
3.嵌套循环
1.一个循环里再套一个循环,一般用在for循环里
2.代码结构
for (声明记录循环次数的变量; 循环条件;变化值) {
for (声明记录循环次数的变量; 循环条件;变化值) {
循环体
}
}
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>
<script>
let sum = 0;
for (let index = 1; index <= 100; index++) {
if(index %2 === 0) {
sum += index
}
}
console.log(sum);
</script>
</body>
</html>
4.综合案列
1.打印小星星
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>
<script>
let num = +prompt("输入数字")
for (let index = 0; index <= num; index++) {
document.write(`${index}⭐<br>`)
}
</script>
</body>
</html>
2.几天记多少单词
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>
<script>
let day = +prompt('请输入天数')
let count = +prompt('请输入单词数量')
for (let index = 1; index <=day ; index++) {
document.write (`第${index}天<br>`)
for (let index1 = 1; index1 <=count; index1++) {
document.write(`记住${index1}个单词<br>`)
}
}
</script>
</body>
</html>
3.倒三角
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>
<script>
let day = +prompt('请输入天数')
let count = +prompt('请输入单词数量')
for (let index = 1; index <=day ; index++) {
document.write (`第${index}天<br>`)
for (let index1 = 1; index1 <=count; index1++) {
document.write(`记住${index1}个单词<br>`)
}
}
</script>
</body>
</html>
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>
<script>
let num = +prompt('请输入行数')
for (let index = num; index >= 1; index--) {
for (let index1 = 1; index1 <= index; index1++) {
document.write(`⭐`)
}
document.write (`<br>`)
}
</script>
</body>
</html>
4.九九乘法表
<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
display: inline-block;
background-color: pink;
text-align: center;
color: #fff;
padding: 0 10px;
margin-right: 10px;
margin-bottom: 10px;
height: 30px;
line-height: 30px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- <div>9 * 9 = 81</div> -->
<script>
for (let index = 1; index <= 9; index++) {
for (let index1 = 1; index1 <=index; index1++) {
document.write(`<div>${index} * ${index1} = ${index *index1}</div>`)
}
document.write(`<br>`)
}
</script>
</body>
</html>
4.数组
1.什么是数组
1.数组(Array)是一种可以按顺序保存数据的数据类型
2.为什么要数组?
如果我想保存一个班里100个人的姓名怎么办?
如果有多个数据可以用数组保存起来
2.数组的基本使用
1.声明语法
let 数组名 = [数据1,数据2,数据3,............,数据n]
1,举例
let name = ['关羽','张飞','赵云','马超','黄忠']
2.数组是按顺序保存,所以每个数据都有自己的编号
3.计算机中的编号从0开始,所以关羽的编号为0,张飞编号为1,以此类推
4.在数组中,数据的编号也叫 索引或下标
5.数组可以存储任意类型的数据
2.取值语法
数组名[下标]
1.举例
let name = ['关羽','张飞','赵云','马超','黄忠']
name[0] //关羽
name[1] //张飞
2.通过下标取数据
3.取出来是什么类型的,就根据这种类型特点来访问
3.术语
1.元素:数组中保存的每个数据都叫数组元素
2.下标:数组中数据的编号
3.长度:数组中数据的个数,通过数组的length属性获得
let name = ['关羽','张飞','赵云','马超','黄忠']
console.log(name[0]) //关羽
console.log(name[1]) //张飞
console.log(name.length) // 5
4.遍历数组
1.用循环把数组中每个元素都访问到,一般会用for循环遍历
2.语法
for (let index = 0; index < 数组名.length ; index++) {
数组名[index]
}
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>
<script>
//1.声明一个数组 name
let name = ['关羽','张飞','赵云','马超','黄忠']
// 注意:数组[0,1,2,3,4,5]
//.获取这个数组中的第二个元素
console.log(name[2]);//赵云
// 告诉我这个数组里面有几个元素 (数组的长度)
// name.length 表示该数组的长度
console.log(name.length);//5
console.log(name[100]);
//不会有一个正常的结果 undefined
</script>
</body>
</html>
3.综合案列
1.数组的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-数组的循环.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 定义一个数组
let arr=[10,20,30,40,50];
// 挨个打印数组里面的元素
arr[0]; // 10
arr[1]; // 20
arr[2]; // 30
arr[3]; // 40
arr[4]; // 50
// arr[5]; // undefined
// 通过循环 挨个打印数组里面的元素
for (let index = 0; index < 5 ; index++) {
// index = 1 , 2 ,3 ,4 , 5 arr[5]
// arr[index] 1 没有输出 arr[0] 2 输出 arr[5] undefined
// 综上所述 我们发现 下标 index 的范围只能是 0 - 4
// let index = 0;
// index <= 4 或者 index < 5 因为 数组的长度 arr.length = 5
// index < 5 => index < arr.length
/*
小结:
1 我们使用 数组做for循环的时候
1 let index= 0 ;
2 判断循环的条件 index < 数组的长度
*/
}
</script>
</body>
</html>
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>
<script>
// 1.声明一个数组
let arr = [2,6,1,7,4];
// 2.声明一本变量 存放数据
let sum = 0;
// 3.循环
for (let index = 0; index < arr.length; index++) {
// 4.计算总和
sum += arr[index];
}
// 5.打印总和
console.log(sum);
//6.平均值
console.log(sum / arr.length);
</script>
</body>
</html>
3.数组求最大值
1.求最大值
2.if(arr[index] <max) 求最小值
<!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>
<script>
// 1.定义一个数字
let arr = [2,6,1,77,52,25,7]
// 2.假设一个最大值 数组的第0个元素
let max =arr[0]
// 3.循环
for (let index = 0; index < arr.length; index++) {
//如果当前的数组元素 大于 max
if(arr[index] > max){
//设置 max 等于 你这个数组元素
max=arr[index]
}
}
console.log(max);
</script>
</body>
</html>
4.数组-增加
1.push 是把新的元素 设置到 数组的末位
2.unshift 是把新的元素 设置到数组的开头
3.splice 把元素添加到指定位置
<script>
//1.定义一个数组
let name = ['关羽','张飞','赵云','马超','黄忠']
//多增加一个元素
name.push('刘备')
console.log(name);
</script>
5.数组的过滤
<!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>
<script>
//1.定义第一个数组
let arr1= [2,0,6,1,77,0,52,0,25,7];
//2.定义第二个数组用来存放过滤后的值
let arr2 = [];
//3.循环第一个数组
for (let index = 0; index < arr1.length; index++) {
//判断当前循环的元素 和10 之间的关系
if(arr1[index]>10)//判断当前元素时候大于10{
//把当前元素添加到新的数组里面
arr2.push(arr1[index])
}
//打印第二个数组
console.log(arr2);
</script>
</body>
</html>
6.数组的删除
1.pop 删除最后一个元素
2.shift 删除第一个元素
3.splice 删除指定位置的元素
1.splice[1.3.''流氓']
2.第一个数字 代表数组里面的位置
2.第二个数字 代表删除从这个元素 往后一个元素(包括自身) 如果为0 则表示不删除
3.第三个值 代表当前位置前增加的元素
<script>
/*
1 push 和 unshift 都可以做到 给数组添加新元素
2 这两个代码在执行的时候 还可以返回 数组的长度
*/
// 数组 删除最后一个元素 pop
// 数组 删除第一个元素 shift
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉最后的一个元素 麻瓜 不要
// arr.pop();
// console.log(arr); // ['西瓜', '香蕉']
// 希望删除掉第一个元素
arr.shift();
console.log(arr);//['香蕉','麻瓜']
</script>
7.指定位置删除与增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>20-数组指定元素来删除.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// 现在想要删除 香蕉
// splice("想要删除的元素的下标","想要删除几个");
// 删除数组中的下标为1的元素,
// 从 1 的位置开始 想要删除几个
// arr.splice(1, 2);
//
// console.log(arr);
// 指定位置来插入元素
// splice("想要删除的元素的下标","想要删除几个","在该下标位置添加元素");
// 在 1的位置,删除0个元素,增加一个红薯
// let arr = ['西瓜', '香蕉', '麻瓜'];
// ['西瓜', '红薯', '香蕉', '麻瓜'];
arr.splice(1, 1, '红薯');
console.log(arr);
</script>
</body>
</html>
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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
display: flex;
width: 1000px;
height: 600px;
background-color: skyblue;
margin: 100px auto;
list-style: none;
justify-content: space-around;
align-items: flex-end;
}
li {
width: 100px;
background-color: pink;
position: relative;
}
span {
position: absolute;
left: 50%;
top: -30px;
transform: translate(-50%);
}
div {
position: absolute;
top: 100%;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<!-- 1.静态布局
<ul>
<li><span>1</span><div>第几季度</div></li>
<li><span>1</span><div>第几季度</div></li>
<li><span>1</span><div>第几季度</div></li>
<li><span>1</span><div>第几季度</div></li>
</ul> -->
<script>
//1.定义一个数组 用于接收用户输入的信息
let liheight = []
//2.定义一个数组 用于输出用户的信息
let ul = `<ul>`;
//3.第一个循环 接收用户的数据
for (let index = 0; index <4; index++) {
let height =+prompt(`请输入第${index+1}季度的数据`)
// 4.将用户数据添加到数组
liheight.push(height)
}
// 5.第二个循环 用户将用户的数据输出
for (let index = 0; index <4; index++) {
ul += `<li style="height:${liheight[index]}px;">
<span>${liheight[index]}</span>
<div>第${index+1}季度</div>
</li>`
}
//数组结尾
ul += `</ul>`
document.write(ul)
</script>
</body>
</html>
9.数组的补充
1.获取数组的最后一个元素
arr[arr.length - 1]
数组[数组长度 -1]
2.新增或者修改数组元素
arr[10]='南瓜'
1 如果 10这个位置已经有元素 那么 就是修改
2 如果 10这个位置没有元素 添加就可以了 最终数组的度变成 10+1
3.数组 可以存放任意类型的数据 可以这么做,但是不建议 我们建议 一个数组内的数据类型要统一!!
let arr = ['西瓜', 100, null, true, NaN, undefined, 80];
可以这么做 但是没必要 不优雅
4.数组快速清空 或者删除元素的方式
<script>
arr.length = 0
数组长度为0 清空数组所有元素
// let arr = ['西瓜', '香蕉', '麻瓜','香瓜','苦瓜','傻瓜'];
// // let arr = ['西瓜', '香蕉', '麻瓜'];
// // 获取数组中最后的一个元素
// // arr.length - 1
// console.log(arr[arr.length - 1]);
// let arr = ['西瓜', '香蕉', '麻瓜'];
// 想要把香蕉修改成葡萄
// arr[1] = '葡萄'; // 修改
// console.log( arr[3] );// 输出什么 undefined
// 添加元素
// arr[3] = '南瓜';
// console.log(arr);
// arr[10] = '南瓜';
// console.log(arr[8]);
// 存放其他类型 数据
// let arr = ['西瓜', 100, null, true, NaN, undefined, 80];
let arr = ['西瓜', 100, null, true, NaN, undefined, 80];
// 把数组 清空掉!! 不想要里面的元素了!!
// arr = [];
// 保留 3个元素 其他不要了
// arr.length = 3;
arr.length = 0;
console.log(arr);
</script>