for循环
for循环的基本使用
<script>
//for(起始条件;退出条件;变化量){
//循环语句
// }
for(let i=1 ; i <=20 ;i++){
document.write('happy')
}
</script>
for循环练习
用for循环输出1-100岁
<script>
for (let i=1; i<=100; i++ ){
document.write(`我今年${i}岁了<br>`)
}
</script>
求1-100所有偶数的和
<script>
let sum=0
for (let i =1; i<=100; i++){
if (i%2===0){
sum+=i
}
}
document .write(sum)
</script>
页面打印小星星
<script>
for (let i = 1 ;i<=5; i++){
document.write(`♥`)
}
</script>
for遍历数组
<script>
let arr =['一娃','二娃','三娃','四娃','五娃']
//i小于等于四就会打印arr里面的内容
//i从零开始循环,零代表第一个值,每次循环都会把后面一个值打印出来,直到最后一个值
for (let i = 0 ; i<arr.length;i++){//length可以告诉我们数组里面有几个值
//i<=arr.length-1是循环5次,i等于0,数组长度是5,5-1等于4所以
//所以数组的长度是4,0<=4之间有01234要循环5次
//i<arr.length也是循环5次,i等于0,数组长度等于5所以0<5之间有01234要循环5次
document.write(`名字是${arr[i]}<br>`)
}
</script>
for和while的区别
当如果明确了循环的次数的时候推荐使用for
循环,当不明确循环的次数的时候推荐使用while
循环
退出循环contiune和break
<script>
// for (i=1; i<=5;i++){
// if (i===2){
// continue//退出当前循环,1345
// }
// document.write(i)
// }
for (i=1; i<=5;i++){
if (i===2){
break//退出整个循环当i全等于2时跳出整个循环,1
}
document.write(i)
}
</script>
循环嵌套的执行过程
利用循环的知识来对比一个简单的天文知识,我们知道地球在自转的同时也在围绕太阳公转,如果把自转和公转都看成是循环的话,就相当于是循环中又嵌套了另一个循环。
实际上 JavaScript 中任何一种循环语句都支持循环的嵌套,如下代码所示:
循环单词记忆单词案例
<script>
//外面的循环输出第几天
for (let i = 1 ;i<=3; i++){
document.write(`第${i}天<br>`)
//里面的循环输出记住了几个单词
for(let j = 1 ; j<=5 ;j++){
document.write(`记住了${j}个单词<br>`)
}
}
</script>
五行五列的小星星案例
<script>
//i等于1,进入循环,直到小于6,一共循环五次
for (let i =1 ; i<6;i++){
//j等于1,进入判断,判断为真打印一次,j自加1等于2,再进入判断,为真打印一次,直到等于6
//等于6不再打印,执行下面的document.write(`<br>`)
//执行完document.write(`<br>`)后跳到i循环上,i自加1等于2开始新一轮的循环
for (let j = 1 ; j<6;j++){
//一行打印五个星星
document.write(`☆`)
}
//打印完五个星星后换行
document.write(`<br>`)
}
</script>
倒三角形的星星
<script>
//i=1,i<6进入循环
for (let i = 1 ; i<6;i++){
//j=1,j<=1,打印一个,如果是j<i那就会不执行本次循环,跳到换行
//因为每一行多一个星星,i每次自加一,所以j<=i
for (let j=1 ; j<=i;j++){
document .write(`☆`)
}
document .write(`<br>`)
}
</script>
99乘法表案例
<style>
*{
margin: 0;
padding: 0;
}
span{
display: inline-block;
border: 1px solid #000;
text-align: center;
width: 63px;
height: 33px;
margin-left: -5px;
}
</style>
<script>
//外面循环控制趟数,每个数都要和其他数比一趟
//里面循环控制次数,一个数要比多少次
for (let i = 1 ; i<=9; i++){
for (let j = 1 ; j<=i;j++){
//第一次循环:如果j=1就打印1x1=1,也就是{j}x{i}=${i*j}
//打印完后执行换行,i自加1=2,再进行第一次的循环
document .write(`
<span> ${j}x${i}=${i*j}</span>
`)
}
document.write(`<br>`)
}
</script>
为什么需要数组和数组的使用
数组的基本使用
-
定义数组
-
数组是按顺序保存,所以每个数据都有自己的编号
-
计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推
-
在数组中,数据的编号也叫索引或下标
-
数组可以存储任意类型的数据
定义数组和数组单元
<script> // 1. 语法,使用 [] 来定义一个空数组 // 定义一个空数组,然后赋值给变量 classes // let classes = []; // 2. 定义非空数组 let classes = ['小明', '小刚', '小红', '小丽', '小米'] </script>
通过
[]
定义数组,数据中可以存放真正的数据,如小明、小刚、小红等这些都是数组中的数据,我们这些数据称为数组单元,数组单元之间使用英文逗号分隔。
取值语法
通过下标取数据
取出来是什么类型的,就根据这种类型特点来访问
一些术语
元素:数组中保存的每个数据都叫数组元素 下标:数组中数据的编号 长度:数组中数据的个数,通过数组的length属性获得
-
数组求和求平均值 案例
<script>
//字符串的长度是5
let arr= [2,4,6,8,9]
//求和变量
let sum=0
//求平均值变量
let num = 0
//只要i小于字符串的长度就循环
for (let i =1 ; i<arr.length;i++){
//总和:sum=sum+arr[i]
sum+=arr[i]//i是数字,没有任何意义,但和arr组合在一起就变得有意义 ,因为循环里写了i++.i每次循环都自加一
//前面外面学习了arr[0]是数组的第一个值,所以arr[i}放在循环里就是可以得到整个数组的值
}
//平均值:num=sum(总和)/字符串长度arr.length
num=sum/arr.length
document.write(`这个同学的总分是${sum}平均分是${num}`)
</script>
什么是遍历数组(重点)
i是数字,i输出的结果是索引号下标,没有任何意义,但和arr组合在一起就变得有意义 ,因为循环里写了i++.i每次循环都自加1 ,arr[0]是数组的第一个值,所以arr[i}放在循环里就可以得到数组里面的每一个数据
,这就叫遍历数组
数组求和再次梳理(重点)
<script>
//数组求和案例
let arr = [2, 6, 1, 7, 4]
let sum = 0
//遍历数组取出里面的每一个元素然后累加
for (let i = 0; i < arr.length; i++) {
//最容易迷惑的地方i和 arr[i]
//i是数字,i输出的结果是索引号下标,没有任何意义,但和arr组合在一起就变得有意义 ,因为循环里写了i++.i每次循环都自加一
//前面外面学习了arr[0]是数组的第一个值,所以arr[i}放在循环里就是可以得到整个数组的值,这就叫遍历数组
// console.log(i)
// arr[i]输出的结果是数组元素(值)
// console.log(arr[i])
sum = sum + arr[i]
}
console.log(sum)
</script>
求数组最大值案列
<script>
let arr= [2, 6, 1, 77, 52, 25, 7]
//声明最大值的变量
//得到数组元素的方法数组名[索引号]
let max = arr[0]
//遍历数组
for (let i = 1; i < arr.length; i++) {
//i是什么?是序号1234567
//只不过这个序号,正好和数组的索引号对应
//i可以看做是数组的索引号
//得到数组元素的方法数组名[索引号]arr[i]
if(max < arr[i]){
max = arr[i]
}
console.log(max)
</script>
操作数组-查和改
<script>
let arr = ['小红','小兰', '小明']
//访问/查询
console.log(arr[0])
//2.改
arr[0] = '小李'
document.write (arr)//小李小兰小明
</script>
增加数组元素push(重点)
<script>
let i =20
let arr = ['red', 'green']
// 把 blue 放到 arr 的后面
// arr.push('blue')
//返回值是新的数组长度:
//不但把数组放入数组,而且还告诉我们,看看有3个值啦
// console.log(arr.push('blue'))
arr.push('blue','skyblue','小明',i)
console.log(arr)
</script>
unshift前面追加元素
<script>
let arr = ['red', 'green']
// arr.unshift('pink','blue')
console.log(arr.unshift('pink','blue'))
console.log(arr)
</script>
筛选数组案例
<script>
let arr = [2,0,6,1,77,0,52,0,25,7]
let sum =[]
//i就是索引号0123456789
for (let i = 0 ;i<arr.length;i++){
//arr[i]就是数组里的每一个元素,2,0,6,1,77,0,52,0,25,7
//只要arr[i]满足>=10这个条件,就把arr[i]里面的值打印到新数组sum里面
if(arr[i]>=10){
//满足条件的依次追加给新数组
//arr[i]大于等于十的值追加给sum
sum.push(arr[i])
}
}
console.log(sum)
</script>
数组增加新的数据小结
-
想要数组末尾增加数据元素利用那个方法?
-
arr.push()
-
可以添加一个或者多个数组元素
-
返回的是数组长度
-
想要数组开头增加数据元素利用那个方法?
-
arr.unshift()
-
可以添加一个或者多个数组元素
-
返回的是数组长度
-
-
重点记住那个? arr.push()
筛选数组去0案例
<script>
let arr = [2,0,6,1,77,0,52,0,25,7]
//声明新数组
let sum =[]
//遍历旧数组
//i就是索引号0123456789
for (let i = 0 ;i<arr.length;i++){
//arr[i]就是数组里的每一个元素,2,0,6,1,77,0,52,0,25,7
//只要arr[i]满足不等于0这个条件,就把arr[i]里面的值打印到新数组sum里面
if(arr[i]>0){//或者(arr[i]!==0)
//满足条件的依次追加给新数组
//arr[i]大于等于十的值追加给sum
sum.push(arr[i])
}
}
console.log(sum)
</script>
操作数组
数组做为对象数据类型,不但有 length
属性可以使用,还提供了许多方法:
-
push 动态向数组的尾部添加一个单元
-
unshit 动态向数组头部添加一个单元
-
pop 删除最后一个单元
-
shift 删除第一个单元
-
splice 动态删除任意单元
使用以上4个方法时,都是直接在原数组上进行操作,即成功调任何一个方法,原数组都跟着发生相应的改变。并且在添加或删除单元时 length
并不会发生错乱。
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 1. push 动态向数组的尾部添加一个单元
arr.push('Nodejs')
console.log(arr)
arr.push('Vue')
// 2. unshit 动态向数组头部添加一个单元
arr.unshift('VS Code')
console.log(arr)
// 3. splice 动态删除任意单元
arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
console.log(arr)
// 4. pop 删除最后一个单元
arr.pop()
console.log(arr)
// 5. shift 删除第一个单元
arr.shift()
console.log(arr)
</script>
解释: start起始位置: 指定修改的开始位置(从0计数) deleteCount: 表示要移除的数组元素的个数 可选的。如果省略则默认从指定的起始位置删除 到最后
<script>
// 重点删除 arr.splice(从哪里开始删,删几个)
let arr = ['red', 'green', 'blue']
// 我就想把green 删掉
//第一个1是从索引号是1的位置开始删
//第二1是删除几个
// arr.splice(1, 1)
arr.splice(1, 1)
console.log(arr)
</script>
splice添加数组
数据删除元素小结
1.想要数组末尾删除1个数据元素利用那个方法?带参数吗? arr.pop() 不带参数 返回值是删除的元素 2.想要数组开头删除1个数据元素利用那个方法?带参数吗? arr.shift() 不带参数 返回值是删除的元素 3.想要指定删除数组元素用那个?开发常用吗?有那些使用场景? arr.splice(起始位置,删除的个数) 开发很常用,比如随机抽奖,比如删除指定商品等等
冒泡排序的原理
冒泡排序上
冒泡排序的解释: 冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列 的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5] 或者[5,4,3,2,1]
1.一共需要的趟数我们用外层for循环 5个数据我们一共需要走4趟 长度就是数组长度减去1 arr.length-1 2.每一趟交换次数我们用里层for循环 第一趋交换4次 第二趋交换3次 第三趋交换2次 第四植交换1次 长度就是数组长度减去次数 但是我们次数是从0次开始的 所以最终 arr.length-i-1 3.交换2个变量就好了
冒泡排序下
<script>
let arr = [5 ,4, 3, 2, 1]
//1.外层循环控制,总数是5个数,每个数都要与其他数比一趟所以趟数循环4趟arr.length-1(5-1)(5-2)(5-3)(5-4)
for (let i = 0; i < arr.length -1; i++) {
// 2.里层的循环一个数与其他数比几次 控制一趟交换几次 arr.length-i-1(5-0-1)(5-1-1)(5-2-1)(5-3-1)
for (let j = 0; j < arr.length - i - 1; j++)
//交换两个变量
//arr[j]=arr[0]=5,arr[j+1]=arr[1]=4
//arr[j+1]=4,这里的arr[j]代表了数组里面值的位置arr[j]就是0
// arr[j](5) arr[j+1](4),如果arr[j]>arr[j+1],如果5大于4
if(arr[j] > arr[j + 1]){
//把arr[j]给空值,(把5存到空值里面)
let temp = arr[j]
//把arr[j+1](4)存到arr[j]的空盒子里面
arr[j]=arr[j+1]
//此时arr[j+1]是空盒子,把temp的值(arr[j])5给arr[j+1]
arr[j + 1]= temp
}
}
console.log(arr)
</script>
用函数排序
<script>
let arr=[5,2,3,6,9,8,4,5,7,1,0,45,0,15,45,45]
arr.sort(function(a,b){
return b-a
})
document.write(arr)
</script>
综合案例生成柱形图
<script>
//设一个空数组,用push收集用户输入的数据,把它放在空数组里面
let arr= []
for (i=1;i<=4;i++){
//因为要收集四个季度的数据,所以要弹出四次框
//不要写四次prompt,直接把弹出框写在循环里面
arr.push(prompt(`请输入第${i}季度的数据`))
}
//打印盒子头部
document.write(` <div class="box">`)
//打印盒子中间
//用循环把四个盒子打印出来
for( let i=0 ; i<arr.length;i++){
//把盒子的结构放在输出标签里面,然后把盒子的高换成用户输入的数据也就是arr[i]
document.write(`
<div style="height: ${arr[i]}px;">
<span> ${arr[i]}</span>
<h4>第 ${[i+1]}季度</h4>
</div>
`)
}
//打印盒子尾部
document.width(`</div>`)
</script>
四、单词
单词 | 说明 | 实例 |
---|---|---|
unshift | 在数组前面增加元素 | |
pop | 删除数组最后一个元素 | |
shift | 删除数组第一个元素 | |
splice | 删除指定元素 | |
push | 增加数组元素 |