for循环
语法
- 跟while一样也是执行重复代码
- 好处 把声明起始值 循环条件 变化值写到一起 一目了然 while循环
let i = 1
while (i<=10) {
document.write(i)
document.write('<br>')
i++
}
for循环
for (let i = 0; i < 10; i++) {
document.write(i)
document.write('<br>')
}
-
- 当如果明确了循环的次数的时候推荐使用for循环
-
- 当不明确循环的次数的时候推荐使用while循环
for案例
// 1. 利用for循环输出1~100岁
for (let i = 0; i <= 100; i++) {
console.log(`${i}岁`);
}
// 2. 求1-100之间所有的偶数和
let sum = 0
for (let i = 0; i < 100; i++) {
if (i % 2 === 0) {
sum += i
}
}
console.log(sum);
// 3. 页面中打印4个小❤
// let str = '☆'
let str = '❤'
for (let i = 0; i < 4; i++) {
document.write(str)
}
// 4. 请将 数组['马超', '赵云', '张飞', '关羽', '黄忠']依次打印出来
array = ['马超', '赵云', '张飞', '关羽', '黄忠']
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
退出循环
-
- continue：结束本次循环，继续下次循环
-
- break：跳出所在的循环
<script>
// 假设你在餐馆吃饭
let arr = ['虾饺', '蒸排骨', '虫子', '红米肠', '糯米鸡']
for (let i = 0; i < arr.length; i++) {
if (arr[i] == '虫子') {
console.log('口区，吃到了虫子耶，我吃不下了');
// 退出循环！
// continue
break
}
console.log('我成功的吃了' + arr[i]);
}
</script>
循环嵌套
一个循环里再套一个循环，一般用在for循环里
- 循环嵌套案例 1
<script>
// 记忆单词案例
// 分析
// 1. 外面的循环 记录第n天
// 2. 内层的循环 记录每天记忆的单词
for (let i = 0; i < 3; i++) {
console.log(`今天是第${i + 1}天`);
for (let j = 0; j < 5; j++) {
console.log(`我记住了今天第${j + 1}个单词`);
}
console.log('\n');
}
</script>
-
循环嵌套案例2: 打印 ★ ★
<script>
// 用户输入对应的行数和列数 打印对应的星星★
let row = +prompt('请输入行数')
let column = +prompt('请输入列数')
for (let i = 0; i < row; i++) {
for (let j = 0; j < column; j++) {
document.write(`★`)
}
document.write('<br>')
}
</script>
- 循环嵌套案例3: 打印99乘法表
<!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 * 9 乘法表
// 1. 打印几行？ 9行
// 2. 每行打印几个div? 当前行数个div
// 外层循环 1 - 9
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`
<div>${i} x ${j} = ${i * j}</div>
`)
}
document.write(`<br>`)
}
document.write(`<br>-------------------------------------------------------------------------------------------------------------------------------------------------------`)
// 倒三角的
document.write(`<br><br>倒三角的:<br><br>`)
for (let i = 9; i >= 1; i--) {
for (let j = 1; j <= i; j++) {
document.write(`
<div>${i} x ${j} = ${i * j}</div>
`)
}
document.write(`<br>`)
}
</script>
</body>
</html>
数组
数组(Array)是一种可以按顺序保存数据的数据类型
声明数组
let names = ['小明', '小刚', '小红', '小丽', '小米']
-
- 数组是按顺序保存，所以每个数据都有自己的编号
-
- 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
-
- 在数组中，数据的编号也叫索引或下标
-
- 数组可以存储任意类型的数据
使用数组
-
取值语法
- let names = ['小明', '小刚', '小红', '小丽', '小米'] names[0] //小明 names[1] //小刚
-
- 通过下标取数据
-
- 取出来是什么类型的，就根据这种类型特点来访问
-
术语
-
- 元素：数组中保存的每个数据都叫数组元素
-
- 下标：数组中数据的编号
-
- 长度：数组中数据的个数，通过数组的length属性获得
-
-
遍历数组
for (let i = 0; i < 数组名.length; i++) {
数组名[i]
}
let nums = [10, 20, 30, 40, 50]
for (let i = 0; i < nums.length; i++) {
document.write(nums[i])
}
- 数组求和 、平均值
<script>
// 数组求和 和 平均值 案例
let sum = 0
let arr = [2, 6, 1, 7, 4]
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
// for (let key in arr) {
// sum += arr[key]
// }
console.log('和: ' + sum);
console.log('平均值: ' + sum / arr.length);
</script>
- 求数组最大值、最小值
<script>
let arr = [100, 1000, 1, 77, 52, 25, 7]
let max = min = arr[0]
for (let i = 1; i < arr.length; i++) {
// 求最大值max
if (arr[i] > max) {
max = arr[i]
}
// 求最小值min
if (arr[i] < min) {
min = arr[i]
}
}
console.log(`最大值max为: ${max}`);
console.log(`最小值min为: ${min}`);
</script>
<script>
// 用三元表达式法
let arr = [11100, 1000, 1, 77, 522222, 25, -1, 7]
// 先定义数组中下标为0的元素为最大值
let max = min = arr[0]
// 循环遍历数组 如果遍历数组中的元素大于max值，则将该项赋值给max，然后继续比较, 直到循环结束
for (let i = 1; i < arr.length; i++) {
max = arr[i] > max ? arr[i] : max
min = arr[i] < min ? arr[i] : min
}
document.write(`
最大值为max为: ${max}, 最小值为: ${min}
`)
</script>
- 数组操作
查、改
script>
let arr = ['李狗蛋', '张翠花', '赵铁柱']
// 查
console.log(arr[2]); //赵铁柱
console.log(arr[0]); //李狗蛋
// 改
arr[0] = '狗腿子'
console.log(arr[0]); //狗腿子
</script>
追加数组元素
<script>
let arr = ['red', 'green']
// 数组前面增加元素
arr.unshift('first', 'second')
// 数组后面增加元素
arr.push('end')
console.log(arr);
</script>
筛选数组元素
<script>
// 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr.push(arr[i]) //数组后面追加元素
}
}
console.log(newArr);
</script>
删除数组元素
<script>
// arr.pop() 从数组中删除最后一个元素，并返回删除元素的值
let arr = ['李狗蛋', '张翠花', '赵铁柱']
arr.pop()
console.log(arr);
// arr.shift() 从数组中删除第一个元素，并返回删除元素的值
let arr1 = ['李狗蛋', '张翠花', '赵铁柱']
arr1.shift()
console.log(arr1);
// arr.splice(起始索引, 删除几个元素) 删除几个元素的值如果不写则代表从起始位置删到最后, 第二个值省略则从代表一直删到最后
// 当索引为负值的时候 代表数组中倒数第几个元素
// 并返回删除的数组
let arr2 = ['李狗蛋', '张翠花', '赵铁柱', '貂蝉', '西施', '王昭君', '杨玉环']
arr2.splice(2, 4) //删除arr[2]开始5个数组元素:赵铁柱、貂蝉、西施、王昭君
console.log(arr2);
</script>
-
冒泡排序
-
- 冒泡排序是一种简单的排序算法。
-
- 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列
-
- 的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
-
- 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
-
- 比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]
-
<script>
let arr = [5, 4, 3, 2, 1]
// 1. 创建外层循环控制遍历轮数，轮数为数组长度 - 1
// arr.length = 5
for (let i = 1; i <= arr.length - 1; i++) {
// 轮次为 i 交换次数为x i + x = arr.length
// 所以 x = arr.length - i
// console.log(arr.length - i);
// document.write(`第${i}轮循环<br>`);
for (let j = 1; j <= arr.length - i; j++) {
// document.write(`每轮循环的第${j}次<br>`)
if (arr[j] < arr[j - 1]) {
let temp
temp = arr[j]
arr[j] = arr[j - 1]
arr[j - 1] = temp
}
}
}
console.log(arr);
/* let a = 12
let b = 100
// 声明一个临时变量，用作数据中转站
let temp
temp = a
a = b
b = temp
console.log(a, b);
*/
</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>
<!-- <div class="box">
<div style="height: 123px;">
<span>123</span>
<h4>第1季度</h4>
</div>
<div style="height: 300px;">
<span>300</span>
<h4>第2季度</h4>
</div>
<div style="height: 120px;">
<span>120</span>
<h4>第3季度</h4>
</div>
<div style="height: 210px;">
<span>210</span>
<h4>第4季度</h4>
</div>
</div> -->
<script>
// 1. 准备一个数组存放用户输入的四个数据
let arr = []
// 2. 利用循环，实现4次prompt弹窗
for (let i = 0; i < 4; i++) {
arr.push(prompt(`请输入第${i + 1}季度的数据`))
}
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>
