javaScript基础
day03
循环 for
for 循环基本使用
语法
for (声明记录循环次数的变量;循环条件;变量值){
循环语句
}
for (起始条件;退出条件;变量值){
循环语句
}
for (let i =1;i<=10;i++){
document.write('for 循环')
}
// 求 1--100 内偶数的和
<script>
let s=0;
for(let i =1;i<=100;i++){
if(i%2===0){
s=s+i
}
}
document.write(s);
// 打印5小心心
<script>
for( let i =1;i<=5;i++){
document.write('*')
}
</script>
<script>
let arry =['赵','钱','孙','李']
for (let i=0;i<=4;i++){
document.write(`第${
i}个${
arry[i]}<br>`);
}
</script>
数组变量名.length 表示数组的长度
如：
arry.length
<script>
let arry1=['赵','钱','孙','李']
for (let i=0;i< arry1.length;i++){
document.write(`第${
i}个：${
arry[i]}<br>`)
}
</script>
退出循环
退出循环使用
continue 和 break
区别
continue //结束本次循环，继续下一次循环
break //退出循环
<script>
for (let i=0;i<6;i++){
if(i===2){
continue;
}
document.write(`${
i}<br>`)
}
</script>
<script>
for (let i=0;i<6;i++){
if(i===2){
break;
}
document.write(`${
i}<br>`)
}
</script>
循环嵌套
for 循环嵌套
语法格式
for(外部循环起始条件;循环条件;变化值){
for(内部循环起始条件;循环条件;变化值){
循环条件
}
}
<script>
for (let i=1;i<6;i++){
document.write(`i的第${
i}次循环<br>`)
for (let j=1;j<6;j++){
document.write(`j的第${
j}次打印：黄<br>`)
}
}
</script>
<script>
for(let i=1;i<6;i++){
document.write(`<br>`)
for(let j=1;j<6;j++){
document.write(`黄`)
}
}
</script>
<script>
for (let i=1;i<6;i++){
for(j=1;j<=i;j++){
document.write(`黄`)
}
document.write(`<br>`)
}
</script>
打印九九乘法表
<script>
for(let i=1;i<=9;i++){
for(let j=1;j<=i;j++){
r=i*j
document.write(`${
j}x${
i}=${
r} `)
}
document.write(`<br>`)
}
</script>
数组
数组是什么
数组（array)是一种可以按顺序保存数据的数据类型
数组的基本使用
1、声明
let数组名 =[‘one’,‘two’,‘three’]
2、取值语法
数组名[下标]
下标从0开始
let arry=['one','two','three']
arry[0] // one
arry[1] // two
3、术语
元素 ：数组中保存的数据
下标 ：数组中数据的编号（0开始）
长度 ：数据中数据的个数，通过length 属性获取长度 ：如：arry.length
let arry=['one','two','three']
arry[0] // one
arry[1] // two
arry.length // 2s
数组的遍历
用循环数组中每个元素访问，一般使用for 循环遍历
语法
for (let i=0;i<=arry.length;i++){
arry[i]
}
例
let arry = ['10','20','30','40','50']
for(let i=0;i<=arry.length;i++){
document.write(arry[i])
}
// 求数组里数据的和评价值<br>
<script>
let arr=[2,6,1,7,4]
let s=0; //和
let aver =0; // 均值
for (let i=0;i<arr.length;i++){
s=s+arr[i];
}
aver=s/arr.length
document.write(`和：${
s} 平均值：${
aver}`)
</script>
数组修改
<script>
let arry1 = ['huang','yu','wu','qing']
arry1[2]='zhang'
console.log(arry1)
</script>
数组新增元素
在尾部添加
数组名.push(新增元素)，把数据插入数组尾部并返回长度
<script>
let arry2=['huang','yu','wu','qing']
arry2.push('zhao',';suo','li')
console.log(arry2)
</script>
在前面增加
<script>
let arry3=['huang','yu','wu','qing']
arry3.unshift('zhao','suo')
console.log(arry3)
</script>
数组的筛选
// 数组筛选,筛选出大于10的数
<script>
let arry4=[2,0,6,1,77,0,52,25,7]
let ary=[]
let ten=10
for (i=0;i<arry4.length;i++){
if(arry4[i]>=ten){
// document.write(arry[i])
ary.push(arry4[i])
}
console.log(ary)
}
</script>
//数组去0
<script>
let arry5=[2,0,6,1,77,0,52,25,7]
let newAry=[]
for (let i=0;i<arry5.length;i++){
if(arry5[i]!==0){
newAry.push(arry5[i])
}
console.log(newAry)
}
</script>
数组删除元素
数组名.pop()
//删除最后一个元素
<script>
let arry6=[2,0,6,1,77,0,52,25,7]
arry6.pop()
console.log(arry6)
</script>
shift() 删除数组中第一个元素
//删除第一个元素
<script>
let arry7=[2,0,6,1,77,0,52,25,7]
arry7.shift()
console.log(arry7)
</script>
删除指定的元素 splice()
语法：
arry.splice(start,deleteCount)
//start 起始位置，指定修改的开始位置
// deleteCount 删除几个元素 。省不写则删除开始之后的所有元素。
案例：
// 使用splice() 删除指定元素
<script>
let arry8=['huang','yu','wu','qing']
arry8.splice(2,1)
console.log(arry8)
</script>
案例
1、冒泡排序
// 冒泡排序
<script>
let arry=[5,4,3,2,1]
// 外循环控制次数
for (let i=0;i<arry.length-1;i++){
// 里层循环控制一趟循环几次
for(let j=0;j<arry.length-i-1;j++){
//变量交换
if(arry[j]>arry[j+1]){
let temp=arry[j]
arry[j]=arry[j+1]
arry[j+1]=temp
}
}
}
console.log(arry)
document.write(arry)
</script>
根据数据生成柱形图
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;padding: 0;}
.one{
display: flex;
height: 300px;
width: 700px;
border-left: 1px solid deeppink;
border-bottom: 1px solid deeppink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align:center;
}
.one>div{
display: flex;
width: 50px;
background-color: deeppink;
flex-direction: column;
justify-content: space-between;
}
.one div span{
margin-bottom: -20px;
}
.one div h4{
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
//1、循环弹出输入框 放入数组
let array=[]
for (i = 1;i<=4;i++){
let data=prompt(`请输入第${
i}个季度的数据`)
array.push(data)
}
console.log(array)
document.write(`<div class="one">`)
for(let i=0;i<array.length;i++){
document.write(`
<div style="height: ${
array[i]}px;color: brown;">
<span>${
array[i]}</span>
<h4>第${
i+1}季度</h4>
</div>`)
}
document.write(`</div>`)
</script>
</body>
</html>