一、循环-for
1. for循环基本使用
for (声明记录循环次数的变量; 循环条件; 变化值) {
循环体
}
for循环和while循环的区别:
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
// 1. 利用for循环输出1-100岁
for (let i = 1; i <= 100; i++) {
document.write(`我今年${i}岁了 <br>`)
}
// 2. 求1-100所有的偶数和
let sum = 0
for (let j = 1; j <= 100; j++) {
if (j % 2 === 0) {
sum += j
}
}
document.write(sum)
// 3. 页面中打印5个小星星
for (let z = 1; z <= 5; z++) {
document.write('*')
}
// 数组循环/遍历
let arr = ['马超', '赵云', '张飞', '关羽', '黄忠', '貂蝉']
// console.log(arr)
// document.write(arr)
// arr length 长度,通过它可以告诉我们数组里面有几个元素
document.write(arr.length)
for (let i = 0; i < arr.length; i++) {
document.write(`${arr[i]} <br>`)
}
2. 退出循环
for (let i = 1; i < 6; i++) {
if (i === 2) {
continue // 退出本次循环,继续下一次循环
break //结束循环,退出整个循环
}
document.write(i)
}
3. 循环嵌套
// 循环嵌套
for (let i = 1; i < 6; i++) {
for (let j = 1; j < 6; j++) {
document.write('*')
}
}
// 外面循环执行一次,里面循环执行全部
记单词案例
for (let i = 1; i < 4; i++) {
document.write(`第${i}天 <br>`)
for (let j = 1; j < 6; j++) {
document.write(`第${j}个单词 <br>`)
}
}
打印倒三角
for (let i = 1; i < 6; i++) {
for (let j = 1; j < i + 1; j++) {
document.write('&')
}
document.write('<br>')
}
99乘法表
<!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 {
/* 转换为行内块 */
display: inline-block;
width: 80px;
height: 25px;
/* 垂直居中 */
line-height: 25px;
/* 外边距 */
margin: 5px;
/* 背景颜色 */
background-color: pink;
/* 内边距 */
padding: 0 10px;
/* 边框线 */
border: 1px solid hotpink;
/* 字体颜色 */
color: deeppink;
/* 边框圆角 */
border-radius: 5px;
/* 盒子阴影 */
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
/* 文本居中 */
text-align: center;
}
</style>
</head>
<body>
<script>
for (let i = 1; i < 10; i++) {
for (let j = 1; j < i + 1; j++) {
document.write(`
<div>${j} x ${i} = ${i * j}</div>
`)
}
document.write('<br>')
}
</script>
</body>
</html>
二、数组
数组(Array)是一种可以按照顺序保存数据的数据类型
- 元素:数组中保存的每个数据都叫数组元素
- 下标:数组中数据的编号
- 长度:数组中数据的个数,通过数组的length属性获得
数组求和
let arr = [2, 6, 1, 7, 4]
let sum = 0
let average = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
average = sum / arr.length
document.write(`这个数组总和为${sum},平均值为${average}`)
数组求最大值最小值
let arr = [2, 6, 1, 77, 52, 25, 7]
// 声明最大值的变量
let max = arr[1]
// 声明最小值的变量
let min = arr[1]
for (let i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
if (min > arr[i]) {
min = arr[i]
}
}
document.write(`最大值:${max} 最小值:${min}`)
数组本质是数据集合,操作数据无非就是增 删 改 查
数组增加新的数据
数组.push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度 (重点)
let arr = ['red', 'green']
// 把blue放到arr的后面
arr.push('blue', 'skyblue')
// 返回值是新的数组长度
console.log(arr.push('yellow'))
console.log(arr)
arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
数组删除元素
数组. pop() 方法从数组中删除最后一个元素,并返回该元素的值
数组. shift() 方法从数组中删除第一个元素,并返回该元素的值
let arr = ['pink', 'green', 'red']
// 删除最后一个元素
arr.pop()
// 删除第一个元素
arr.shift()
// 返回值是删除的元素
console.log(arr.pop())
console.log(arr.shift())
console.log(arr)
数组. splice() 方法删除指定元素
arr.splice(start, deleteCount)
arr.splice(起始位置, 删除几个元素)
冒泡排序
let arr = [2, 3, 1, 5, 4, 6, 0]
// 1. 外层循环控制趟数
for (let i = 0; i < arr.length - 1; i++) {
// 2. 里层循环控制交换次数
for (let j = 0; j < arr.length - i - 1; j++) {
// 交换两个变量
if (arr[j] > arr[j + 1]) {
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr)
三、综合案例
根据用户输入数据生成季度柱状图
<!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 {
/* 弹性布局 */
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
/* justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 */
/* 均匀排列每个元素,每个元素周围分配相同的空间 */
justify-content: space-around;
/* 元素位于容器的结尾。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 */
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
/* flex-direction 属性规定灵活项目的方向。 */
/* 灵活的项目将垂直显示,正如一个列一样。 */
flex-direction: column;
/* 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<!-- <div class="box">
<div style="height: 123px;">
<span>123</span>
<h4>第1季度</h4>
</div>
<div style="height: 156px;">
<span>156</span>
<h4>第2季度</h4>
</div>
<div style="height: 120px;">
<span>120</span>
<h4>第3季度</h4>
</div>
<div style="height: 210px;">
<span>210</span>
<h4>第4季度</h4>
</div>
</div> -->
<script>
// 1. 利用循环弹出四次输入框,会得到4个数据,放到数组里面
let arr = []
for (let i = 1; i < 5; i++) {
// prompt(`请输入第 ${i} 季度的数据`)
arr.push(prompt(`请输入第 ${i} 季度数据`))
}
document.write(`<div class="box">`)
// 循环柱子
for (let i = 0; i < arr.length; i++) {
document.write(`
<div style="height: ${arr[i]}px;">
<span>${arr[i]}</span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
document.write(`</div>`)
</script>
</body>
</html>
代码练习
// 使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]
let arr = [5, 8, 9, 2, 1, 5, 10]
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
document.write(sum)
// 使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11]
let arr = [4, 9, 5, 20, 3, 11]
let sum = 0
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 5) {
sum += arr[i]
}
}
document.write(sum)
// 使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]
let arr = [15, 19, 21, 33, 18, 24]
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
let average = sum / arr.length
document.write(average)
// 打印数组里所有的奇数 [5, 2, 8, 10, 3, 7]
let arr = [5, 2, 8, 10, 3, 7]
let Arr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 2 !== 0) {
Arr.push(arr[i])
}
}
document.write(Arr)
// 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和
let arr = [2, 6, 18, 15, 40, 30]
let sum = 0
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
sum += arr[i]
}
}
document.write(sum)
// 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数
let arr = [2, 6, 18, 15, 40, 30]
let Arr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
Arr.push(arr[i])
}
}
document.write(Arr.length)
// 给一个数字数组,该数组中有很多数字0,将不为0的数据存入到一个新的数组中
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 0, 18, 0]
let Arr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
Arr.push(arr[i])
}
}
document.write(Arr)
Caroline Finish 2022/12/1