for循环
for循环基本使用
for循环语法
for(变量起始值;终止条件;变量变化量){
循环体
}退出循环
continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
如果遇到了，直奔上层循环的i++
break 退出整个for循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
了解：
while(true) 来构造“无限”循环，需要使用break退出循环。
for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。
案例练习
求1~100之间的偶数和
let sum = 0
for (let i = 1; i <= 100; i++) {
if (i % 2 === 0) {
//把i加到sum里面去
//sum = sum + i
sum += i
}
}
document.write(`1~100之间的偶数和是: ${sum}`)for循环的最大价值： 循环数组
let arr = ['刘德华', '刘晓强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']
// console.log(arr[0])
// console.log(arr[1])
// console.log(arr[2])
// console.log(arr[3])
// i <= 4 长度 - 1
// for (let i = 0; i <= arr.length - 1; i++) {
// console.log(arr[i])
// }
// 必须从0开始，因为数组索引号从0开始 arr.length = 6
// 遍历数组 ： 从第一个循环到最后一个
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
let arr1 = []
console.log(arr1)
console.log(arr1[0]) // undefined
console.log(arr1[1]) // undefined循环嵌套
for 循环嵌套语法
for(外部声明记录循环次数的变量;循环条件;变化值){
for(内部声明记录循环次数的变量;循环条件;变化值){
循环体
}
}案例练习
打印倒三角星星
分析：
①：利用双重for循环来做
②：外层循环控制打印行，内层循环控制每行打印几个（列）
③：内层循环的个数跟第几行是一一对应的
<script>
// 1. 外层循环控制行数
for (let i = 1; i <= 5; i++) {
// 2. 里层循环控制列数（几个星星）
for (let j = 1; j <= i; j++) {
document.write('◆')
}
// 换行
document.write('<br>')
}
</script>九九乘法表
分析：
①：只需要把刚才倒三角形星星做改动
②： ★ 换成 1 x 1 = 2 格式
<style>
span {
display: inline-block;
width: 100px;
padding: 5px 10px;
border: 1px solid pink;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
background-color: rgba(255, 192, 203, .1);
text-align: center;
color: pink;
}
</style>
<body>
<script>
// 1. 外层循环控制行数
for (let i = 1; i <= 9; i++) {
// 2. 里层循环控制列数
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} X ${i} = ${i * j}</span>`)
}
// 换行
document.write('<br>')
}
</script>
</body>数组
数组的定义与基本使用
数组：(Array)是一种可以按顺序保存数据的数据类型
基本使用
声明语法
let 数组名 ={数组1,数组2,...,数组n}
let arr=new Array{数据1,数据2,...,数据n}注意：
计算机中的编号从0开始，所以第一个编号为0，第二个编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据
取值语法
数组名[下标]注意：
通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问
一些术语
元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得
遍历数组
for(let i = 0;i<数组名.length;i++){
数组名[i]
}案例练习
案例：数组求最大值、最小值
需求：求数组 [2,6,1,77,52,25,7] 中的最大值
分析：
①：声明一个保存最大元素的变量max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和max 相比较。
④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤：最后输出这个 max
<script>
let arr = [2, 6, 1, 7, 400, 55, 88, 100]
// max里面要存的是最大值
let max = arr[0]
// min 要存放的是最小值
let min = arr[0]
// 遍历数组
for (let i = 1; i < arr.length; i++) {
// 如果max 比 数组元素里面的值小，我们就需要把这元素赋值给 max
// if (max < arr[i]) max = arr[i]
max < arr[i] ? max = arr[i] : max
// 如果min 比 数组元素大， 我们就需要把数组元素给min
// if (min > arr[i]) {
// min = arr[i]
// }
min > arr[i] ? min = arr[i] : min
}
// 输出 max
console.log(`最大值是: ${max}`)
console.log(`最小值是: ${min}`)
</script>操作数组
新增
push
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
语法：
arr.push(元素1,元素2,...,元素n)unshift
arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
语法：
arr.unshift(元素1,元素2,...,元素n)案例练习
案例练习1：数组筛选
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组， 找出大于等于 10 的元素
③：依次追加给新数组 newArr
<script>
// 重点案例
let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
// 1. 声明新的空的数组
let newArr = []
// 2. 遍历旧数组
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 3. 满足条件 追加给新的数组
newArr.push(arr[i])
}
}
// 4. 输出新的数组
console.log(newArr)
</script>案例练习2：数组去0案例
需求：将数组 [2, 0, 6,1, 77, 0, 52, 0,25, 7] 中的 0 去掉后，形成一个不包含0 的新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组， 找出不等于0的元素
③：依次追加给新数组 newArr
<script>
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 1. 声明一个新的数组
let newArr = []
// 2. 遍历筛选
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newArr.push(arr[i])
}
}
// 输出新数组
console.log(newArr)
</script>删除
pop
数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
语法：
let arr = []
arr.pop()shift
shift() 方法从数组中删除第一个元素，并返回该元素的值
语法：
arr.shift()需求使用场景：
随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
点击删除按钮，相关的数据会从商品数据中删除
splice
数组.splice() 方法 删除指定元素
语法：
arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素)解释：
start 起始位置:
指定修改的开始位置（从0计数）
deleteCount:
表示要移除的数组元素的个数
可选的。 如果省略则默认从指定的起始位置删除到最后
综合案例
根据数据生成柱形图
需求： 用户输入四个季度的数据，可以生成柱形图
分析：
①：需要输入4次，所以可以把4个数据放到一个数组里面
利用循环，弹出4次框，同时存到数组里面
②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
div里面包含显示的数字和 第n季度
<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>
<body>
<script>
// 1. 四次弹框效果
// 声明一个新的数组
let arr = []
for (let i = 1; i <= 4; i++) {
// let num = prompt(`请输入第${i}季度的数据:`)
// arr.push(num)
arr.push(prompt(`请输入第${i}季度的数据:`))
// push记得加小括号，不是等号赋值的形式
}
// console.log(arr) ['123','135','345','234']
// 盒子开头
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>冒泡排序
冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重 复地进行直到没有再需要交换，也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]
<script>
// let arr = [5, 4, 3, 2, 1]
let arr = [2, 4, 3, 5, 1]
// for (let i = 0; i < arr.length - 1; i++) {
// for (let j = 0; j < arr.length - i - 1; j++) {
// // 开始交换 但是前提 第一个数大于第二个数才交换
// if (arr[j] > arr[j + 1]) {
// // 交换2个变量
// let temp = arr[j]
// arr[j] = arr[j + 1]
// arr[j + 1] = temp
// }
// }
// }
// arr.sort() // 排序
// sort 升序排列
// arr.sort(function (a, b) {
// return a - b
// })
// sort() 降序
arr.sort(function (a, b) {
return b - a
})
console.log(arr)
// let num1 = 10
// let num2 = 20
// let temp = num1
// num1 = num2
// num2 = temp
</script>
</body>数组排序
sort
数组. sort() 方法可以排序
语法：
let arr = [4, 2, 5, 1, 3]
// 1.升序排列写法
arr.sort(function (a, b) {
return a - b
})
console.log(arr) // [1, 2, 3, 4, 5]
// 降序排列写法
arr.sort(function (a, b) {
return b - a
})
console.log(arr) // [5, 4, 3, 2, 1]
1101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
