for循环重复执行某些代码，好处是把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式。
for 语句
<script>
// 变量起始值； 判断条件；变量变化量
for (let i = 1; i <= 3; i++) {
document.write('月薪过万')
}
</script>循环练习
利用for循环输出1~100岁
<script>
for (let age = 1; age <= 100; age++) {
document.write(`我今年${age}岁了<br>`)
}
</script>求1-100之间所有的偶数和
<script>
let sum = 0
for (let i = 1; i <= 100; i++) {
if (i % 2 === 0) {
sum = sum + i
}
}
document.write(`1~100之间的偶数和是：${sum}`)
</script>页面中打印5个小星星
<script>
for (let i = 1; i <= 5; i++) {
document.write(`⭐️`)
}
</script>循环数组
需求：请将 数组[‘马超’,’赵云’,’张飞’,’关羽’,’黄忠’]依次打印出来
<script>
let arr = ['张无忌', '张三丰', '张之洞', '张学友', '张居正',]
for (let i = 0; i <= 4; i++) {
console.log(arr[i])
}
// 遍历数组：优化后终止终止条件：起始值小于数组长度，也就是 0~4
let arb = ['张无忌', '张三丰', '张之洞', '张学友', '张居正',]
for (let i = 0; i < arb.length; i++) {
console.log(arb[i])
}
// 遍历数组：优化后终止终止条件：起始值小于等于数组长度减去1，也就是 0~4
let ard = ['张无忌', '张三丰', '张之洞', '张学友', '张居正',]
for (let i = 0; i <= ard.length - 1; i++) {
console.log(ard[i])
}
</script>退出循环
continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用；
break 退出整个for循环，二般用于结果已经得到，后续的循环不需要的时候可以使用。
<script>
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue
}
console.log(i)
document.write(i) // 1245
}
</script> <script>
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break
}
console.log(i)
document.write(i) // 12
}
</script>无限循环
会卡死，了解即可
for(;;) 也可以来构造无限循环，同样需要使用break退出循环。
<script>
for (;;) {
console.log(1)
}
</script>for循环和while循环区别
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环。
优先使用for做循环。
循环嵌套
外部的for执行一次，内部的for执行全部次。
计算：假如每天记住5个单词，3天后一共能记住多少单词？
<script>
// 外层for循环打印第几天
// 内层for循环打印记住了第几个单词
for (let i = 1; i <= 3; i++) {
document.write(`<br>第${i}天<br>`)
for (let j = 1; j <= 5; j++) {
document.write(`记住了第${j}个单词<br>`)
}
}
</script>第1天
记住了第1个单词
记住了第2个单词
记住了第3个单词
记住了第4个单词
记住了第5个单词
第2天
记住了第1个单词
记住了第2个单词
记住了第3个单词
记住了第4个单词
记住了第5个单词
第3天
记住了第1个单词
记住了第2个单词
记住了第3个单词
记住了第4个单词
记住了第5个单词
案例练习
打印5行5列的星星
<script>
// 外层for循环打印行数
// 内层for循环打印几个小星星
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= 5; j++) {
document.write(`⭐️`)
}
// 进行换行显示
document.write('<br>')
}
</script>⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
升级代码：用户输入行数和列数，打印对应的星星！
<script>
// 外层for循环打印行数
// 内层for循环打印几个小星星
let row = +prompt('请输入行数：')
let col = +prompt('请输入列数：')
for (let i = 1; i <= row; i++) {
for (let j = 1; j <= col; j++) {
document.write(`⭐️`)
}
// 进行换行显示
document.write('<br>')
}
</script>打印倒三角形
<script>
// 外层for循环打印行数
// 内层for循环打印几个小星星
// 外层循环 i = 1行 2行 3行 4行 5行
// 内层终止条件 j <= i （1~5列）
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
document.write(`⭐️`)
}
// 进行换行显示
document.write('<br>')
}
</script>⭐️
⭐️⭐️
⭐️⭐️⭐️
⭐️⭐️⭐️⭐️
⭐️⭐️⭐️⭐️⭐️
九九乘法表
<script>
// 外层for循环打印行数
// 内层for循环打印几个小星星
// 外层循环 i = 1行 2行 3行 4行 5行
// 内层 终止条件 j <= i （1~5列）
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span> ${j} X ${i} = ${i * j}</span>`)
}
// 进行换行显示
document.write('<br>')
}
</script>数组
数组（Array）是一种可以按顺序保存数据的数据类型。为什么使用数组？如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便。
<script>
// 1. 字面量声明数组
let arr = [1, 2, 'xinbiao', true]
console.log(arr)
// 2. 使用new Array 构造函数声明，只做了解
let arb = new Array(1, 2, 3, 4)
console.log(arb)
</script>数组求和与平均值
需求：求数组[2,6,1,7,4]里面所有元素的和以及平均值。分析：
①：声明一个求和变量
sum。
②：遍历这个数组，把里面每个数组元素加到sum里面。
③：用求和变量sum除以数组的长度就可以得到数组的平均值。
<script>
let arr = [2, 6, 1, 7, 4]
let sum = 0
// 遍历累加
for (let i = 0; i < arr.length; i++) {
sum = sum + 1
}
console.log(`数组的和的结果是${sum}`)
console.log(`数组的平均值结果是${sum / arr.length}`)
</script>数组的和的结果是5
数组的平均值结果是1
数组求最大值和最小值
需求：求数组[2,6,1,77,52,25,7]中的最大值，分析：
①：声明一个保存最大元素的变量
max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和max相比较。
④：如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较。
⑤：最后输出这个max
<script>
let arr = [2, 6, 1, 77, 52, 25, 7]
let max = arr[0]
let min = arr[0]
//这里的起始量是1，数组0就不用比较，因为max初始值就是数组0
for (let i = 1; i < arr.length; i++) {
// 遍历数组，max比数组大，max就等于数组
if (max < arr[i]) {
max = arr[i]
}
// 遍历数组，min比数组小，min就等于数组
if (min > arr[i]) {
min = arr[i]
}
// 不用if语句，改用三元运算符
/*
max < arr[i] ? max = arr[i] : max
min > arr[i] ? min = arr[i] : min
*/
}
console.log(`数组的最大值${max}`) // 数组的最大值77
console.log(`数组的最小值${min}`) // 数组的最小值 1
</script>空数组给值
数组本质是数据集合，操作数据无非就是增删改查语法。
<script>
let arr = []
arr[0] = 1
arr[1] = 5
console.log(arr)
</script>修改数组
把数组中的red 改为红色。
<script>
let arr = ['白色', '黑色', '蓝色', 'red',]
arr[3] = '红色'
console.log(arr)
</script>给所有数组都加上一个词，例如白色的纸，黑色的纸···
<script>
let arr = ['白色', '黑色', '蓝色', '红色',]
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + '的纸'
}
console.log(arr);
</script>新增数组
.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度（重点）。
<script>
let arr = ['脉动', '尖叫',]
arr.push('乐虎')
console.log(arr)
console.log(arr.push('乐虎')) // 3 打印新增数组，返回的是新增数组的长度
</script>arr.unshift方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。
<script>
let arr = ['脉动', '尖叫',]
arr.unshift('乐虎', '雪碧')
console.log(arr)
console.log(arr.unshift('乐虎', '雪碧')) // 4 打印新增数组，返回的是新增数组的长度
</script>
</body>筛选数组
需求：将数组2,[0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组。分析：
①：声明一个新的数组用于存放新数据
newArr
②：遍历原来的旧数组，找出大于等于10的元素
③：依次追加给新数组newArr
<script>
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>『案例』数组去0
原本是!== 不全等的意思，测试过程中不生效，换成!= 不等，就可以了。
<script>
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] != 0) {
newArr.push(arr[i])
}
}
console.log(newArr)
</script>删除数组
.pop()方法从数组中删除最后一个元素，并返回该元素的值。
<script>
let arr = ['张华', '李莲', '张明', '李飞']
arr.pop() //把李飞给删除了，最后的数组给删除掉
arr.pop() //把张明也给删除了，最后的数组给删除掉
console.log(arr.pop()) // 张明，————告诉你我把那个元素删除掉了
console.log(arr)
</script>.shift() 方法从数组中删除最前一个元素，并返回该元素的值。
<script>
let arr = ['张华', '李莲', '张明', '李飞']
arr.shift() //把张华给删除了，最后的数组给删除掉
arr.shift() //把李莲也给删除了，最后的数组给删除掉
console.log(arr)
</script>指定删除
随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖。
数组.splice()方法删除指定元素。arr.splice(start, deleteCount) ，指定修改的开始位置从0计数，如果省略则默认从指定的起始位置删除到最后。
<script>
let arr = ['张华', '李莲', '张明', '李飞']
//从索引号1（起始位置,删除几个元素)
arr.splice(1, 2)
console.log(arr) // 张华,李飞
</script>
</body>『案例』生成柱形图
需求：用户输入四个季度的数据，可以生成柱形图。
① 需要输入4次数据并放到一个数组里面，利用循环，弹出4次框；
② 遍历改数组，根据数据生成4个柱形图，渲染打印到页面中，柱形图用<div>并设置宽度固定，高度是用户输入的数据，div里面包含显示的数字和第几季度。
<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>css样式
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
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>『案例』冒泡排序
了解即可，这种算法不是很好，性能比较低。算法是很难的，是看规律写代码，都是学习别人研究过的。
冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]
<script>
// 声明一个数组
let arr = [5, 4, 3, 2, 1]
// 5个数据比较走4趟，所以length - 1
for (let i = 0; i < arr.length - 1; i++) {
//每趟交换的次数都减少1，第一趟是4，第二趟是3···所以length - 1 -1
for (let j = 0; j < arr.length; j++) {
// 开始交换的前提是第一个数大于第二个数才交换
if (arr[j] > arr[j + 1]) {
let temp = arr[j] // 临时变量 第一个数据给临时变量，第一个数据和第二个数据互换
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr)
</script>1,2,3,4,5
数组排序
.sort() 默认的的升序，那么想要降序就要使用函数完成。
<script>
let arr = [5, 4, 3, 2, 1]
// 默认是升序
arr.sort()
console.log(arr)
// 升序
arr.sort(function (a, b) {
return a - b
})
console.log(arr)
// 降序
arr.sort(function (a, b) {
return b - a
})
console.log(arr)
</script>原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/79.html
