目录
一、循环结构
1、for语句
(1)for循环语法
- 作用:重复执行代码
- 好处:把声明起始值、循环条件、变化值写到一起,让人一目了然,它是最常使用的循环形式
2、for循环案例
(1)利用for循环输出1~100岁
示例代码如下:
for (let i = 1; i <= 100; i++) {
document.write(`今年我${i}岁了 <br>`)
}
(2)求1-100之间所有的偶数和
示例代码如下:
let sum = 0
for (let i = 1; i <= 100; i++) {
if (i % 2 === 0) {
// 把i加到sum里面去
// sum = sum + i
sum += i
}
}
document.write(`1~100之间的偶数和是: ${sum}`)
(3)页面中打印5个小星星
示例代码如下:
for (let i = 1; i <= 5; i++) {
document.write('★')
}
3、for循环嵌套及案例
- for循环嵌套
- 一个循环里再套一个循环,一般用在for循环里
案例1:假如每天记住5个单词,3天后一共能记住多少单词?
示例代码如下:
<script>
// 外层循环打印 第 n 天
for (let i = 1; i <= 3; i++) {
document.write(`第${i}天<br>`)
// 里层循环打印 第几个单词
for (let j = 1; j <= 5; j++) {
document.write(`记住了第${j}个单词<br>`)
}
}
</script>
案例2:打印5行5列的星星
示例代码如下:
<script>
let row = +prompt('请输入行数:')
let col = +prompt('请输入列数:')
// 外层循环打印行数
for (let i = 1; i <= row; i++) {
// 里层循环打印几个星星
for (let j = 1; j <= col; j++) {
document.write('☆')
}
// 进行换行显示
document.write('<br>')
}
</script>
案例3:打印倒三角形星星
示例代码如下:
<script>
// 1. 外层循环控制行数
for (let i = 1; i <= 5; i++) {
// 2. 里层循环控制列数(几个星星)
for (let j = 1; j <= i; j++) {
document.write('◆')
}
// 换行
document.write('<br>')
}
</script>
案例4:九九乘法表
思路:
(1)只需要把刚才倒三角形星星做改动
(2)★ 换成 1 x 1 =2 格式
示例代码样式如下:
<style>
span {
display: inline-block;
width: 100px;
padding: 5px 10px;
border: 1px solid pink;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
background-color: rgba(255, 192, 203, .1);
text-align: center;
color: hotpink;
}
</style>
示例代码行为如下:
<script>
// 1. 外层循环控制行数
for (let i = 1; i <= 9; i++) {
// 2. 里层循环控制列数
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} X ${i} = ${i * j}</span>`)
}
// 换行
document.write('<br>')
}
</script>
4、while语句
(1)循环:重复执行一些操作, while:在....期间,所以 while循环就是在满足条件期间,重复执行某些代码。
(2)语法:
(3)while循环需要具备三要素:
- 变量起始值
- 终止条件(没有终止条件,循环会一直执行,造成死循环)
- 变量变化量(用自增或者自减)
示例代码如下:
<script>
// // 1. 变量的起始值
// let i = 1
// // 2. 终止条件
// while (i <= 3) {
// document.write('我要循环三次 <br>')
// // 3. 变量的变化量
// i++
// }
// 1. 变量的起始值
let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {
document.write('我要循环三次 <br>')
// 3. 变量的变化量
i++
}
</script>
5、continue关键字
continue退出本次循环,一般用于排除或者跳过某一个选项的时候,可以使用continue
6、break关键字
break退出整个for循环,一般用于结果已经得到,后续的循环不需要的时候可以使用
二、初识数组
1、什么是数组
数组:(Array)是一种可以按顺序保存数据的数据类型为什么要数组?
2、为什么要数组
(1)思考:如果我想保存一个班里所有同学的姓名怎么办?
(2)场景:如果有多个数据可以用数组保存起来,然后放到一个变量中,管理非常方便
3、数组的基本使用
(1)声明语法
- 数组是按顺序保存,所以每个数据都有自己的编号
- 计算机中的编号从O开始,所以小明的编号为0,小刚编号为1,以此类推
- 在数组中,数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
(2)取值语法
- 通过下标取数据
- 取出来是什么类型的,就根据这种类型特点来访问
示例代码如下:
<script>
// 1. 字面量声明数组
let arr = [1, 2, 'pink', true]
// 2. 使用new Array 构造函数声明 了解
let arr1 = new Array(1, 2, 3, 4)
console.log(arr1)
</script>
(3)数组一些术语
- 元素:数组中保存的每个数据都叫数组元素
- 下标:数组中数据的编号
- 长度:数组中数据的个数,通过数组的length属性获得
(4)遍历数组
- 用循环把数组中每个元素都访问到,一般会用for循环遍历
- 语法
三、数组案例
1、数组求和及平均值
题目:求数组[2,6,1,7,4]里面所有元素的和以及平均值
示例代码如下:
let arr = [2, 6, 1, 7, 4]
// 1. 求和的变量 sum
let sum = 0
// 2.遍历累加
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
// sum = sum + arr[i]
sum += arr[i]
}
console.log(`数组的和的结果是: ${sum}`)
// 3. 平均值 和 / arr.length = 4
console.log(`数组的平均值结果是: ${sum / arr.length}`)
// sum = sum + arr[0]
// console.log(sum)
</script>
2、数组求最大值和最小值
示例代码如下:
<script>
let arr = [2, 6, 1, 7, 400, 55, 88, 100]
// max里面要存的是最大值
let max = arr[0]
// min 要存放的是最小值
let min = arr[0]
// 遍历数组
for (let i = 1; i < arr.length; i++) {
// 如果max 比 数组元素里面的值小,我们就需要把这元素赋值给 max
// if (max < arr[i]) max = arr[i]
max < arr[i] ? max = arr[i] : max
// 如果min 比 数组元素大, 我们就需要把数组元素给min
// if (min > arr[i]) {
// min = arr[i]
// }
min > arr[i] ? min = arr[i] : min
}
// 输出 max
console.log(`最大值是: ${max}`)
console.log(`最小值是: ${min}`)
</script>
四、操作数组
数组本质是数据集合,操作数据无非就是增删改查语法:
1、数组操作-----修改
示例代码如下:
<script>
// let arr = []
// console.log(arr)
// // console.log(arr[0]) // undefined
// arr[0] = 1
// arr[1] = 5
// console.log(arr)
let arr = ['pink', 'red', 'green']
// 修改
// arr[0] = 'hotpink'
// console.log(arr)
// 给所有的数组元素后面加个老师 修改
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
arr[i] = arr[i] + '老师'
}
console.log(arr)
</script>
2、数组操作-----新增
- 数组.push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度(重点)
- 语法
- arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
- 语法
示例代码如下:
<script>
let arr = ['pink', 'hotpink']
// 新增 push 推末尾
// console.log(arr.push('deeppink')) // 3
// arr.push('deeppinnk', 'linghtpink')
// console.log(arr)
// 开头追加
arr.unshift('red')
console.log(arr)
</script>
数组筛选案例:将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来,放入新数组
示例代码如下:
<script>
// 重点案例
let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
// 1. 声明新的空的数组
let newArr = []
// 2. 遍历旧数组
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 3. 满足条件 追加给新的数组
newArr.push(arr[i])
}
}
// 4. 输出新的数组
console.log(newArr)
</script>
数组去0案例:将数组[2,0,6,1,77,0,52,0,25,7]中的О去掉后,形成一个不包含0的新数组
示例代码如下:
<script>
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 1. 声明一个新的数组
let newArr = []
// 2. 遍历筛选
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newArr.push(arr[i])
}
}
// 输出新数组
console.log(newArr)
</script>
3、数组操作-----删除
- 数组.pop()方法从数组中删除最后一个元素,并返回该元素的值
- 语法:
- 数组.shift()方法从数组中删除第一个元素,并返回该元素的值
- 语法:
- 数组. splice()方法删除指定元素
- 语法:
示例代码如下:
<script>
let arr = ['red', 'green', 'blue']
// console.log(arr.pop()) // blue
// 1.pop() 删除最后一个元素
// arr.pop()
// arr.pop()
// console.log(arr)
// 2. shift() 删除第一个元素
// arr.shift()
// console.log(arr)
// 3. splice 删除指定元素 splice(起始位置-索引号, 删除几个)
arr.splice(1, 1) // 是从索引号1的位置开始删, 只删除1个
// arr.splice(1) // 从green 删除到最后
console.log(arr)
</script>
4、综合案例
(1)根据数据生成柱形图
CSS代码如下:
<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: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
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>
JS代码如下:
<script>
// 1. 四次弹框效果
// 声明一个新的数组
let arr = []
for (let i = 1; i <= 4; i++) {
// let num = prompt(`请输入第${i}季度的数据:`)
// arr.push(num)
arr.push(prompt(`请输入第${i}季度的数据:`))
// push记得加小括号,不是等号赋值的形式
}
// console.log(arr) ['123','135','345','234']
// 盒子开头
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>
(2)冒泡排序
原理:跟交换变量的思路其实差不多,记住里面的趟数和交换次数总结一下规律
- 冒泡排序是一种简单的排序算法。
- 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。
- 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
- 比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5]或者[5,4,3,2,1]
示例代码如下:
<script>
let arr = [2, 4, 3, 5, 1]
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
// 开始交换 但是前提 第一个数大于第二个数才交换
if (arr[j] > arr[j + 1]) {
// 交换2个变量
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr)
</script>