JS Day 3
循环 for
基本使用
for(声明记录循环次数的变量;循环条件;变化值){
循环体
}
for循环:适用于明确循环次数
while循环:适用于不明确循环次数
退出循环
循环结束:
continue-结束本次循环,继续下次循环
break-跳出所在的循环
循环嵌套
for循环里面写for循环
数组
定义
数组:一种可以按驯熟保存数据的数据类型
基本使用
声明语法
let 数组名=[data1,data2,...,datan]
let names=['Morley','Olsen']
索引/下标:数据编号
取值语法
数组名[下标]
names[0]
names[1]
通过下标取数据
取出来是什么类型,就根据该类型特点来访问
一些术语
console.log(names[0])
console.log(names.length)
元素:数组中保存的每个数据
长度:数组中数据的个数,通过length属性获取
遍历数组
通过循环遍历数组中的每个元素
for (let i=0;i<数组名.length;i++){
数组名[i]
}
for(let i=0;i<names.length;i++){
document.write(names[i])
}
操作数组
增删查改
增加
尾加法:返回数组长度
arr.push(element1,...,elementn)
头加法:返回数组长度
arr.unshift(element1,...,elementn)
删除
尾删法:返回删除元素值,不带参数
arr.pop()
头删法:返回删除元素值,不带参数
arr.shift()
指定删除:
start 起始位置;deleteCount 删除几个元素(不写默认删除到最后)
arr.splice(start,deleteCount)
冒泡排序
一次比较两个元素,互相交换位置
2层for循环解决
Day 3 EXAMPLE
根据数据生成柱形图:用户输入四个季度的数据
<!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>EXAMPLE 1</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid navy;
border-bottom: 1px solid navy;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: navy;
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 < 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>