一、循环-for
1.1for循环基本使用
1.for循环语法
- 作用:重复执行代码
- 好处:把声明起始值、循环条件、变化值写到一起,让人一目了然,它是最常使用的循环形式
<script>
let arr = ['刘德华', '黎明', '张国荣', '成龙']
for (let i = 1; i < arr.length; i++) {
document.write(arr[i])
}
</script>
2.退出循环
- continue 退出本次循环,一般用于排除或者跳过某一个选项的时候,可以用continue
- break 退出整个for循环,一般用于结果已经得到了
for循环和while循环有什么区别?
- 如果明确了循环次数,使用for
- 不明确次数,使用while
1.2循环嵌套
1.for循环嵌套
- 一个循环里面再套一个循环,一般用在for循环里
案例:一天记五个,三天记多少
<script>
for (let i = 1; i <= 3; i++) {
document.write(`第${i}天<br>`)
for (let j = 1; j <= 5; j++) {
document.write(`记住了第${j}个单词<br>`)
}
}
</script>
注:外层循环一次,内层循环所有次
案例:
打印倒三角
<script>
for (let i = 1; i <= 5; i++) {
document.write('<br>')
for (let j = 1; j <= i; j++) {
document.write('※')
}
}
</script>
九九乘法表
①:把※换成1 * 1=2
<style>
span {
display: inline-block;
width: 135px;
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;
}
</style>
</head>
<body>
<script>
for (let i = 1; i <= 9; i++) {
document.write('<br>')
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} * ${i} = ${i * j}</span>`)
}
}
</script>
二、数组
2.1数组是什么
- 数组:(Array)是一种可以按顺序保存数据的数据类型
- 场景:多个数据可以用数组保存起来,然后放到一个变量中,管理非常方便
2.2数组的基本使用
1.声明语法
例如:
let arr = ['小包', 1, true]
- 数组是按顺序保存的,所以每个数据都有自己的编号,从0开始
- 在数组中,数据的编号也叫索引或者下标
- 数组可以存储任意类型的数据
2.取值语法
例如:
let arr = ['小包', 1, true]
alert(arr[2])
- 通过下标来获取数据
- 取出来是什么类型,就根据这种类型特点来访问
3.术语
- 元素:数组中保存的每个数据都叫数组元素
- 下标:数组中数据的编号
- 长度:数组中数据的个数,通过数组的length属性获得
4.遍历数组 - 用循环把数组中每个元素都访问到
<script>
let arr = ['小包', 1, true]
for (let i = 0; i < arr.length; i++) {
document.write(arr[i])
}
</script>
求数组和、平均值
<script>
let arr = [2, 6, 1, 7, 9]
let sum = 0
let avg = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
avg = sum / arr.length
alert(`和为${sum},平均值为${avg}`)
</script>
求最大值和最小值
- ①:声明一个保存最大元素的变量
- ②:默认最大值可以取数组中的第一个元素
- ③:遍历数组,把里面的每个元素和max比较
- ④:如果这个元素大于max,就把这个元素保存到max,继续下一轮比较
- ⑤:最后输出max
<script>
let arr = [2, 6, 1, 7, 9]
let min = arr[0]
let max = arr[0]
for (let i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
if (min >= arr[i]) {
min = arr[i]
}
}
alert(`最大值为${max},最小值为${min}`)
</script>
2.3操作数组
-
- 数组的本质是数据集合,操作数组无非是增删改查语法:
- 数组的本质是数据集合,操作数组无非是增删改查语法:
修改
再次赋值(不用声明)
let arr = [2, 1, 45, 23, 12]
alert(arr[1])
arr[1] = 3
alert(arr[1])
新增
- 数组.push()方法将一个或者多个元素添加到数组的末尾,并返回该数组的新长度(重点)
语法:
例如:
- arr.unshift()方法将一个或者多个元素添加到数组的开头,并返回该数组的新长度
- 语法:
- 例如
数组筛选
需求:将数组中大于10的元素选出来,放入新数组
分析:
①:声明一个新的数组用于存放新数据newArr
②:遍历原来的旧数组,找出大于等于10的元素
③:依次追加给新数组newArr
<script>
let arr = [2, 1, 45, 23, 12]
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
newArr.push(arr[i])
}
}
alert(newArr)
</script>
删除
- 数组.pop()方法从数组中删除最后一个元素,并返回该元素的值
- 语法
- 例如:
- arr.shift()删除第一个元素
- 数组.splice()方法删除指定元素
- 语法:
- deleteCount:
表示要移除的数组元素的个数
可选的。如果省略则默认从指定的起始位置删除到最后
2.4数组案例
需求:用户输入四个季度的数据,可以生成柱状图
分析:
①:需要输入4次,可以把4个数据放到一个数组里
②:遍历数组,根据数据生成4个柱形图,渲染打印到页面中
- 柱状图就是div盒子,设置宽度固定,高度是用户输入的数据
- div里面包含显示的数字和第n季度
<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>
</head>
<body>
<script>
let arr = []
for (let i = 1; i <= 4; i++) {
arr.push(prompt(`请输入第${i}个数字`))
}
// 盒子开头
document.write(`<div class="box">`)
for (let i = 0; i < 4; i++) {
document.write(`
<div style="height: ${arr[i]}px;"
<span>123<span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
//盒子结尾
document.wtite(`</div>`)
</script>
</body>
排序
- 数组.sort()方法可以排序
- 语法: