目录
1.for循环
1.1for循环基本使用
// 语法
// for (起始条件; 退出条件; 变换量) {
// 循环语句
// }
<!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>
</head>
<body>
<script>
// 语法
// for (起始条件; 退出条件; 变换量) {
// 循环语句
// }
// for (let i = 1; i <= 10; i++) {
// console.log('月薪过万');
// document.write(`月薪过万<br>`)
// }
// 输出1-100岁
// for (let i = 1; i <= 100; i++) {
// document.write(`我今年${i}岁了<hr>`)
// }
// 求1-100所有偶数的和
// let sum = 0
// for (let i = 1; i <= 100; i++) {
// if (i % 2 === 0) sum = sum + i
// }
// document.write(sum)
// 页面打印五个小星星
for (let i = 0; i < 5; i++) {
document.write('🎇')
}
</script>
</body>
</html>
1.2for和while的区别
// for循环:明确了循环的次数时推荐使用for循环
// while循环:当不明确循环的次数时推荐使用while循环
1.3.退出循环
// 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>
</head>
<body>
<script>
// continue :结束本次循环,继续下次循环
// break:跳出循环,结束循环
for (let i = 1; i < 6; i++) {
if (i === 2) {
continue//退出本次循环,继续下次循环
}
if (i === 4) {
break //直接跳出循环并且结束循环
}
document.write(i)
}
</script>
</body>
</html>
1.4.循环嵌套
一个循环里再套一个循环,一般用在for循环里
// 外面循环执行一次,里面循环执行全部
<!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;
height: 50px;
width: 80px;
text-align: center;
line-height: 50px;
border: 1px solid #000;background-color:#6db86b ;
}
</style>
</head>
<body>
<script>
// 打印五行五列小星星
// for (let i = 0; i < 5; i++) {
// for (let j = 0; j < 5; j++) {
// document.write('🎇')
// }
// document.write('<br>')
// }
// 打印倒三角星星
// for (let i = 1; i <= 5; i++) {
// for (let j = 1; j <= i; j++) {
// document.write("🚀")
// }
// document.write("<br>")
// }
// 打印九九乘法表
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<div>${j}×${i}=${i * j}</div>`)
}
document.write("<br>")
}
</script>
</body>
</html>
2.数组
2.1.数组的基本使用
// 数组 Array 是一种按顺序保存顺序的数据类型
// 声明
//方法一 字面量方法
const names1 = ['王五', '李强', '陈龙']
//方法二
const names2 = new Array('王五', '李强', '陈龙')
console.log(names1);
console.log(names2);
// 取值 数组名[下标] 下标从零开始
// 数组长度 数组名.length
遍历数组:
// let num = [100, 123, 231, 54, 65, 7567]
// for (let i = 0; i < num.length; i++) {
// document.write(num[i]);
// }
// 需求:求数组 [2,6,1,77,52,25,7] 中的最大值
let num = [6, 25, 7, 23, 89, 13]
// 声明最大值的变量
let max = num[0]
// 声明最小值的变量
let min = num[0]
// max和min的初始为第一个数,要和第二个数相比较所以for循环中i以1开始
for (let i = 1; i < num.length; i++) {
if (max < num[i]) {
max = num[i]
}
if (min > num[i]) {
min = num[i]
}
}
document.write(`<hr>最大值为${max}<br>最小值为${min}`)
2.2.操作数组
// 操作数据 : 增删改查
2.2.1.查询数组数据 数组名[下标]
console.log(score[3]);
2.2.2.重新赋值 数组[下标]=新值
score[0] = '齐天大圣'
2.2.3.数据添加新的数据
数组.push() 方法将一个或多个元素添加到数组的 末尾 ,并返回该数组的新长度arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的 开头 ,并返回该数组的新长度
// push添加元素到数组末位,并返回该数组新长度
console.log(score[5]);//此时无内容 undefined
let x = score.push('牛魔王')//添加元素到数组末位
console.log(score[5]);//此时有内容
console.log(x);
// unshift()添加元素到数组首位,并返回该数组新长度
score.unshift('天蓬元帅', '弼马温')
2.2.4.删除数组中的数据
数组.pop() 方法从数组中删除最后一个元素,并返回该元素的值数组.shift() 方法从数组中删除第一个元素,并返回该元素的值数组. splice() 方法 删除指定元素 splice(起始位置,删除几个元素)
// pop() 删除最后一个元素 返回值是删除的元素
console.log(score);
const res = score.pop();
console.log(res);
console.log(score);
// shift 删除第一个元素 返回值是删除的元素
score.shift()
console.log(score);
// splice(起始位置,删除几个元素)指定删除元素
// 起始位置为下标,从0开始
score.splice(3, 1)
console.log(score);
总代码如下:
<!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>
</head>
<body>
<script>
// 操作数据 : 增删改查
const score = ['孙悟空', '花果山', '500', '八九玄功', '五指山']
// 1.查询数组数据 数组名[下标]
console.log(score[3]);
// 2.重新赋值 数组[下标]=新值
score[0] = '齐天大圣'
console.log(score[0]);
// 3.数据添加新的数据
// push添加元素到数组末位,并返回该数组新长度
console.log(score[5]);//此时无内容 undefined
let x = score.push('牛魔王')//添加元素到数组末位
console.log(score[5]);//此时有内容
console.log(x);
// unshift()添加元素到数组首位,并返回该数组新长度
score.unshift('天蓬元帅', '弼马温')
// 4.删除数组中的数据
// pop() 删除最后一个元素 返回值是删除的元素
console.log(score);
const res = score.pop();
console.log(res);
console.log(score);
// shift 删除第一个元素 返回值是删除的元素
score.shift()
console.log(score);
// splice(起始位置,删除几个元素)指定删除元素
// 起始位置为下标,从0开始
score.splice(3, 1)
console.log(score);
</script>
</body>
</html>
结果如图: