for 循环
语法
好处：把声明起始值，循环条件，变化值写在一起，让人一目了然
for循环和while循环有什么区别
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
循环退出
continue ：结束本次循环，继续下次循环
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>
<style>
div {
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
margin: 5px;
background-color: #6cf;
border: 1px solid #33b9fc;
color: #fff;
border-radius: 10px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
text-align: center;
}
</style>
</head>
<body>
<script>
// 有9行，外层循环 1--9
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<div>${j} x ${i} = ${i * j}</div>`)
}
document.write(`<br>`)
}
</script>
</body>
</html>
\
数组
数组是一种可以按顺序保存数据的数据类型
遍历数组
语法
用循环把数组中每个元素都访问到，一般会用for循环遍历
箩筐思想
<script>
// 数组求和 和 平均值 案例
let arr = [2, 6, 1, 7, 4]
// 箩筐思想
// 声明一个变量 箩筐
let sum = 0
for (let i = 0; i < arr.length; i++) {
// sum = sum + arr[i]
sum += arr[i]
}
document.write(`和为${sum},平均值是${sum / arr.length}`)
</script>
打擂思想
// 找数组中的最大值/最小值
<script>
let arr = [100, 1000, 1, 77, 52, 25, 7]
// 创造擂主
let max = arr[0]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
// 创造一个判定条件，遍历arr里面的每一个i,比max大的，重新赋值给max
if (max < arr[i]) {
max = arr[i]
}
// 创造一个判定条件，遍历arr里面的每一个i,比min小的，重新赋值给min
if (min > arr[i]) {
min = arr[i]
}
}
console.log(`最大值为${max},最小值为${min}`);
</script>
操作数组
查询数据
<script>
let arr = ['李狗蛋', '张翠花', '赵铁柱']
// 查看数组中第三个元素(数组编号是从0开始)
console.log(arr[2])
</script>
重新赋值
语法：arr[某个元素] = 值
<script>
let arr = ['李狗蛋', '张翠花', '赵铁柱']
// 选中数组中第三个元素，将其进行重新赋值，修改为‘张全蛋’
arr[2] = '张全蛋'
console.log(arr)
</script>
数组添加新的数据
在元素末尾添加
语法：数组.push(新增的内容)
将一个或多个元素添加到数组的“末尾”，并返回该数组的新长度
在元素开头添加
语法：数组.unshift(新增的内容)
将一个或多个元素添加到数组的开头，并返回该数组的新长度
案例
// 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
<script>
// 创建一个新数组
let newArr = []
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 循环遍历
for (let i = 0; i < arr.length; i++) {
// 加入判定，把大于等于10的元素选出来，并加入到新数组
if (arr[i] >= 10) {
// 在新数组的末尾加入筛选出的数组元素
newArr.push(arr[i])
}
}
console.log(newArr);
</script>
删除数据中的元素
删除数组中最后一个元素
语法：数组.pop()
<script>
let arr = ['李狗蛋', '张翠花', '赵铁柱']
arr.pop()
console.log(arr);
</script>
删除数组中第一个元素
语法：数组.shift()
<script>
let arr = ['李狗蛋', '张翠花', '赵铁柱']
arr.shift()
console.log(arr);
</script>
删除数组中某一个元素
语法：数组.splice(选中某个元素，删除几个)
<script>
let arr = ['李狗蛋', '张翠花', '赵铁柱', '貂蝉', '西施', '王昭君', '杨玉环']
// 如果第二个值省略，则代表一直删除到最后
arr.splice(3,1);
// 当索引为负值的时候，代表选中数组中倒数第几个元素
console.log(arr);
</script>
使用场景
随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
点击删除按钮，相关的数据会从商品数据中删除
\
综合案例
<!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 {
position: relative;
display: flex;
width: 700px;
height: 300px;
border-left: 5px solid #6cf;
border-bottom: 5px solid #6cf;
margin: 200px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box::before {
content: "";
position: absolute;
left: -13px;
top: -25px;
border: 10px solid transparent;
border-bottom: 20px solid #6cf;
}
.box::after {
content: "";
position: absolute;
right: -23px;
bottom: -12px;
border: 10px solid transparent;
border-left: 20px solid #6cf;
}
.box>div {
display: flex;
width: 50px;
background-color: #6cf;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -30px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
// 用户要输入4个季度的数据 生成柱形图
// 用户输入 prompt
// 弹出 4次 -> for循环
// 把数据渲染在页面 生成柱形图 dw
// data里面存储的就是用户输入的四个季度的数据
let data = []
for (let i = 1; i <= 4; i++) {
// 数组追加元素的语法 data.push()
// let temp = +prompt(`请您输入第${i}季度的数据`)
data.push(+prompt(`请您输入第${i}季度的数据`))
}
// console.log(data);
// [100,200,300,400]
// 我们先渲染box的开始标签
document.write(`<div class="box">`)
// 由于中间的柱子有四根 我们希望通过for循环的方式 动态渲染
// 要几根柱子 用户输入了几个数据决定的 data里面就存着用户输入的数据 我们遍历data数组
for (let i = 0; i < data.length; i++) {
document.write(`
<div style="height: ${data[i]}px;">
<span>${data[i]}</span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
// 我们再渲染一个box的结束标签
document.write(`</div>`)
</script>
</body>
</html>
