JS循环+数组
一、循环 for
1、for循环基本使用
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然
for循环和while循环区别：
当明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
2、退出循环
循环结束：
continue：结束本次循环，继续下次循环
break：跳出所在的循环
3、循环嵌套
for 循环嵌套
二、数组
1、数组是什么
数组(Array)是一种可以按顺序保存数据的数据类型，可以保存多个数据
2、数组的基本使用
（1）声明语法
- 数组是按顺序保存，所以每个数据都有自己的编号
- 计算机中的编号从0开始
- 在数组中，数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
（2）取值语法
通过下标取数据
（3）一些术语
- 元素：数组中保存的每个数据都叫数组元素
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的 length 属性获得
（4）遍历数组
用循环把数组中每个元素都访问到,一般会用for循环遍历
3、 操作数组
（1）数组增加数据
① 数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
console.log(arr.push('pink'))//输出返回的数组长度3
② 数组.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
console.log(arr.unshift('pink'))//输出返回的数组长度3
（2）数组删除元素
① 数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
console.log(arr.pop())//输出返回的被删掉的green
② 数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
console.log(arr.shift())//输出返回的被删掉的red
③ 数组. splice() 方法 删除指定元素
- start 起始位置:
指定修改的开始位置（从0计数） - deleteCount:
表示要移除的数组元素的个数
可选的。 如果省略则默认从指定的起始位置删除到最后
删除元素的使用场景：
1.随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
2.点击删除按钮，相关的数据会从商品数据中删除
后期课程我们会用到删除操作，特别是splice
4、 数组案例–冒泡排序
<script>let a = [5,4,3,2,1]for (i = 0;i<a.length-1;i++){for (j = 0;j<a.length-1-i;j++){if(a[j]>a[j+1]){let temp=a[j+1]a[j+1]=a[j]a[j]=temp}}}document.write(a)
</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>Documenttitle><style>.box{ //保证大盒子的中间布局以及四个柱子均匀排在x轴上display: flex;justify-content: space-around;align-items:flex-end;margin: 0 auto;width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;text-align: center;}.box div{ //保证每一个柱子display: flex; flex-direction: column;//一个柱子两个元素，季度和数据，要保证数据在柱子顶端，季度在柱子低端justify-content: space-between; width: 50px;background-color: pink;}//调调间距，上上下下挪一下，使得布局美观.box div span{margin-top: -20px;}.box div h4{width: 70px;margin-left: -10px;margin-bottom: -35px; }style>
head>
<body><script>let arr=[]for (i=0 ;i<4;i++){let k = prompt(`请输入第${i+1}季度的数据`)arr.push(k)}// console.log(arr)for (i = 0;i<4; i++){//要一个大盒子里面放四个柱子，柱子的显示通过循环实现，循环语句不能放在document.write()里面，所以显示大盒子的时候拆开，先打印头1，然后四个柱子3，然后结束2。document.write(``) // 1for (i=0;i<4;i++){ //3document.write(`${arr[i]}px'>${arr[i]}第
${i+1}季度`)}document.write(``) // 2}script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！