JS基础第四天
一、for循环
1.for循环基本使用
1.for循环语法：
for(声明记录循环次数的变量；循环条件；变化值){
循环体
}
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然
如：
for(let i =1;i<= 100;i++){
console.log(i)
}//输出1—100的数字
for循环和while循环有什么区别：
- 当如果明确了循环的次数的时候推荐使用for循环
- 当不明确循环的次数的时候推荐使用while循环
2.退出循环
循环结束：
- continue：结束本次循环，继续下次循环
- break：跳出所在的循环
continue:
for (let index = 1; index <= 10; index++) {
if (index % 2 !== 0) {
// 是奇数的话 就跳过这次循环
continue//继续下次循环 输出偶数 跳过奇数
}
console.log(index);//最终输出是偶数
}
break:
for (let index = 1; index <= 10; index++) {
// 如果当前的index = 5 ，就不再往下 循环了，就终止循环
if (index === 5) {
break;
}
<!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>21-continue和break.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
for
控制循环结束
1 continue 跳过本次循环 继续开启下次循环 （不是必须）
continue 想要跳过这个循环 不一定通过它
我们自己 if else 也能实现类似的功能
2 break 直接 循环结束 不玩了
也不是必须 ， 我们也是可以通过 if-else 来实现它的功能
但是如果可以 使用break的话 尽量使用它 （性能更加好） 因为break会终止剩下的循环
如果当前的index 是一个奇数 下面的代码就不要再运行了 开启下一个循环
*/
// 只显示 奇数 单数
// for (let index = 1; index <= 10; index++) {
// // 判断当前的index是不是奇数
// if (index % 2 !== 0) {
// // console.log(index);
// continue;
// }
// console.log(index,"⭐");
// }
// 只显示 奇数 单数
for (let index = 1; index <= 10; index++) {
// 判断当前的index是不是奇数
if (index % 2 !== 0) {
// 奇数
console.log(index);
}else{
// 偶数
console.log(index,"⭐");
}
}
/*
continute 功能 其实 也是可以通过 if else 来模拟和实现
if else 根据条件来执行某段代码
continute 跳过循环（不想执行某段代码）
*/
// 只输出偶数
// for (let index = 1; index <= 10; index++) {
// if (index % 2 === 0) {
// // 是偶数了才输出
// console.log(index);
// }
// }
for (let index = 1; index <= 10; index++) {
if (index % 2 !== 0) {
// 是奇数的话 就跳过这次循环
continue//继续下次循环 输出偶数 跳过奇数
}
console.log(index);//最终输出是偶数
}
for (let index = 1; index <= 10; index++) {
// 如果当前的index = 5 ，就不再往下 循环了，就终止循环
if (index === 5) {
break;
}
// // index===5&&break // 不能简写 报错！！
console.log(index);
// if (index < 5) {
// console.log(index);
// }
console.log("代码调用的次数",index);//程序在第5次循环时打断了 ，此时输出的次数为前4次
}
</script>
</body>
</html>
3.循环嵌套
注意：一个循环里再套一个循环，一般用在for循环里
二、数组
数组是什么：数组(Array)是一种可以按顺序保存数据的数据类型
1.数组的基本使用
1.声明语法
let arr=[a,b,c,......,n]
注意：
- 数组是按顺序保存，所以每个数据都有自己的编号
- 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
- 在数组中，数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
- 如果获取的元素超过数组长度，则输出为undefined
- 获取数组长度（数组名.length） 数组的长度为数组数据的多少
2.取值语法
-
数组名[下标]
术语：
- 元素：数组中保存的每个数据都叫数组元素
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的length属性获得
3.遍历数组（重点）
用循环把数组中每个元素都访问到,一般会用for循环遍历
语法：
如：
2.操作数组
1.数组增加新的数据
1.语法：数组.push(元素1，元素2，......，元素n)
方法：将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点 常用)
<script>
// let arr=[`小米，苹果`]
// arr.push('HUAWEI')
// document.write(arr)
let arr=[]
for (let index = 0; index <=4; index++) {
let userName=prompt('输入数据')
arr.push(userName)
}
document.write(arr)
</script>
2.语法：数组.unshift(元素n，元素1，元素2，....，元素m)
方法：将一个或多个元素添加到数组的开头，并返回该数组的新长度
3.小结
- 想要数组末尾增加数据元素利用那个方法？
- 数组.push(元素1，元素2，......，元素n)
- 可以添加一个或者多个数组元素
- 返回的是数组长度
- 想要数组开头增加数据元素利用那个方法？
- 数组.unshift(元素n，元素1，元素2，....，元素m)
- 可以添加一个或者多个数组元素
- 返回的是数组长度
- 常用
- arr.push()
2.数组删除元素
1.语法：数组. pop()
方法：从数组中删除最后一个元素，并返回该元素的值
2.语法：数组. shift()
方法：从数组中删除第一个元素，并返回该元素的值
<script>
//新增
//let arr=['苹果','西瓜','香蕉']
// arr.push('草莓')
// console.log(arr) //push 新增放在数组最后
// arr.unshift('草莓')
// console.log(arr)//unshift 新增的元素放在第一位
//删除
let arr2=['苹果','西瓜','香蕉']
//arr2.pop()
//console.log(arr2) //删除最后一个元素
arr2 .shift()
console.log(arr2)//删除第一个元素
</script>
3.删除指定元素
语法：splice（想要删除元素的下标，想要删除几个）
如：splice（1,1）：从下标为1的元素开始，删除一个元素（就是本身），注意：下标是从0开始；
splice（1,2）：从下标为1的元素开始，删除下标为1,2的两个元素；
4.输出数组最后一个元素
1.语法：数组.length-1 console.log(arr[arr.length-1])
5.添加或替换元素
<script>
let arr=['a','b','c']
//新增元素 或替换元素
arr[2]='d'//将下标为2的元素替换
document.write(arr)//输出 a b d
arr[3]='f'//新增下标为4的元素
document.write(arr)//输出 a b c f
//注意：新增元素后数组长度会发生改变 动态变化
arr[10]='yy'
console.log(arr)
//['a', 'b', 'd', 'f', 空属性 × 6, 'yy']
console.log(arr[5])//输出为undefined 因为此时下标为5的元素为空，注意此时的数组长度为10
</script>
注意：
- 数组可以随意存放任意数据（不建议）
- 数组快速清空或删除多个元素
- 直接让"数组=[ ]"
- 让数组.length=0
- 删除多个元素（减少数组长度）
let arr=[a,b,c,d,e,f,g]
arr.length=3
console.log(arr)//输出为a,b,c
6.小结
1.想要数组末尾删除1个数据元素利用那个方法？带参数吗？
- arr.pop()
- 不带参数
- 返回值是删除的元素
2.想要数组开头删除1个数据元素利用那个方法？带参数吗？
- arr.shift()
- 不带参数
- 返回值是删除的元素
3.想要指定删除数组元素用那个？开发常用吗？有那些使用场景？
- arr.splice(起始位置, 删除的个数)
- 开发很常用，比如随机抽奖，比如删除指定商品等等
三、综合案例
动态生成柱状图
<!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>21-动态生成柱状图.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 1000px;
height: 600px;
margin: 100px auto;
display: flex;
justify-content: space-around;
background-color: aqua;
/* 设置侧轴的对齐方式 下对齐 */
align-items: flex-end;
}
li {
width: 100px;
background-color: pink;
position: relative;
}
span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
div {
position: absolute;
width: 100%;
text-align: center;
/* 相对于父元素的高 */
top: 100%;
background-color: red;
}
</style>
</head>
<body>
<script>
/*
需求分析：（用文字 把看见的需求 描述下来）
1 一打开页面 弹出了4个 输入框
2 用户在每一个输入框 填写数字-控制的是每一个li标签的高度
3 最后一个输入框填写完毕了 页面上出现 4个div
4 4个div的样式部分
1 一行放4个元素
2 每一个元素颜色相同 高度不同
5 操作
1 第4个步骤 我最熟悉了 写布局 css 已经完成了！！
2 先实现 for循环生成4个柱子li(类似之前写过的一个 动态生成table表格)（每一个柱子的高不一样 先不管）
*/
// 用来存放4个li标签的 字符串 原来 ul 不需要 循环 只是 li标签要循环
let liHtml='<ul>'
let liHeight=[]
for (let index = 0; index < 4; index++) {
height=+prompt(`请输入第${index + 1}季度的数据高度`)
liHeight.push(height)
}
//let num=prompt('请输入有多少季度')
for (let index = 0; index < 4; index++) {
liHtml+=`<li style="height:${liHeight[index]}px;">
<span>${liHeight[index]}</span>
<div>第${index + 1}季度</div>
</li>`
}
liHtml+='</ul>'
document.write(liHtml)
// liHTML = `<ul></ul>`
// 把4个li标签 写到页面上
</script>
</body>
</html>
