本文详细讲解了for和while循环的基本使用、循环控制语句、嵌套循环实例，以及如何操作数组（增删元素、求和、排序等）。从数组基础知识到高级应用，适合初学者进阶学习。
文章目录
1.for
1.1 基本使用
目标：掌握for循环重复执行某些代码
1. for循环语法
- 也是重复执行代码
- 好处：把声明起始值、循环条件、变化值写到一起，让人一目了然
循环练习
利用for循环输出1~100岁
for(var i = 1; i <= 100 ; i++){
if (i == 1){
console.log('这个人今年1岁了，他出生了');
} else if (i == 100){
console.log('这个人今年100岁了，他去世了');
} else {
console.log('这个人今年' + i + '岁了');
}
}
求 1 - 100 之间所有的偶数和
sum = 0;
for(i = 1; i <= 100; i++){
if(i % 2 == 0){
sum += i;
}
}
console.log(sum);
求学生成绩
要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。
var num = prompt('请输入班级的总人数：');
var sum = 0;
var avg = 0;
for(i = 1; i <= num; i++){
var score = Number(prompt('请输入第'+ i + '个学生的成绩'));
sum += score;
}
avg = sum / num;
alert('班级总的成绩是：' + sum);
alert('班级平均分是：' + avg)
页面中打印 5 个小星星
var num = prompt('请输入星星的个数：');
var str = '';
for(var i = 1; i <= num; i++){
str += '⭐';
}
console.log(str);
请将数组 [‘马超’，‘赵云’，‘张飞’, ‘关羽‘，’黄忠’] 依次打印出来
let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
for (let i = 0; i < arr.length; i++) {
document.write(`名字是: ${arr[i]} <br>`)
}
循环小结
- 当如果明确了循环的次数的时候推荐使用for循环
- 当不明确循环的次数的时候推荐使用while循环
1.2 循环退出
- 循环结束：
- continue：结束本次循环，继续下次循环
- break：跳出所在的循环
for (let i = 1; i < 6; i++) {
if (i === 2) {
// continue 退出本次循环，继续下一次循环
// 输出1 跳过2 继续循环输出345
break // 结束循环 退出整个循环
}
document.write(i)
}
1.3 循环嵌套
-
一个循环里再套一个循环，一般用在for循环里
-
外层循环一次，里面的循环执行全部
-
代码验证：
for(i = 1; i <= 2; i++){
console.log('外层循环第' + i + '次');
for(j = 1; j <= 3; j++){
console.log('里层循环第' + j + '次');
}
}
输出结果如下所示：
记忆单词案例
思路：
- 外层xxx
- 里层xxx
// 记忆单词案例
// 分析
// 1. 外面的循环 记录第n天
for (let i = 1; i < 4; i++) {
document.write(`第${i}天 <br>`)
// 2. 里层的循环记录 几个单词
for (let j = 1; j < 6; j++) {
document.write(`记住第${j}个单词<br>`)
}
}
用户输入行数和列数，打印对应的星星！
var x = Number(prompt('请输入星星的行数：'));
var y = Number(prompt('请输入星星的列数：'));
var str = '';
for(i = 1; i <= x; i++){
for(j = 1; j <= y; j++){
str += '⭐';
}
str += '\n';
}
console.log(str);
练习：打印倒三角形星星
如图所示：
分析：
①：利用双重for循环来做
②：外层循环控制打印行，内层循环控制每行打印几个（列）
③：内层循环的个数跟第几行是一一对应的
str = '';
for(i = 1; i <= 10; i++){
for( j = i; j <= 10; j++){
str += '⭐';
}
str += '\n'
}
console.log(str);
练习：九九乘法表
需求：如图所示
分析：
①：只需要把刚才倒三角形星星做改动
②：★ 换成 1 x 1 = 2 格式
var str = '';
for(i = 1; i <= 9; i++){
for(j = 1; j <= i; j++){
str += j + '*' + i + '=' + i*j + '\t';
}
str += '\n'
}
console.log(str);
美化后的九九乘法表
<!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;
height: 25px;
line-height: 25px;
margin: 5px;
background-color: pink;
padding: 0 10px;
border: 1px solid hotpink;
color: deeppink;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
text-align: center;
}
</style>
</head>
<body>
<script>
// 外层打印几行
for (let i = 1; i <= 9; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
// 只需要吧 ★ 换成 1 x 1 = 1
document.write(`
<div> ${j} x ${i} = ${j * i} </div>
`)
}
document.write('<br>')
}
</script>
</body>
</html>
2. while
目标：掌握while循环语法，能重复执行某段代码
循环：重复执行某段代码，而while : 在… 期间
2.1 语法
释义：
- 跟 if 语句很像，都要满足小括号里的条件为 true 才会进入执行代码
- while 大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
2.2 注意事项
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，循环需要具备三要素：
- 变量起始值
- 终止条件（没有终止条件，循环会一直执行，造成死循环）
- 变量变化量（用自增或者自减）
2.3 练习
（1）打印人的一生，从1岁到100岁
var i = 1;
while( i <= 100){
console.log('这个人已经' + i + '岁啦');
i++;
}
var i = 1;
do {
console.log('这个人今年' + i + '岁了');
i++;
}while(i <= 100);
（2）弹出一个提示框，你爱我吗？ 如果输入爱，就提示结束，否则：一直询问。
while (true) {
let str = prompt('如果我是DJ，你还爱我吗?');
if (str === '爱') {
alert('我也爱你啊~~');
break;
}
}
do {
var str = prompt('如果我是DJ，你还爱我吗?？')
}while(str != '爱');
alert('我也爱你啊！');
1. 页面输出 1 - 100
- 核心思路：利用i,因为正好和数字对应
let i = 1
while (i <= 100) {
document.write(` <p>是:${i} </p>`)
i++
}
2. 计算从 1 加到 100 的总和并输出
- 核心思路：
- 声明累加和的变量sum
- 每次把i加到sum 里面
var i = 1;
var sum = 0;
while( i <= 100){
sum += i;
i++;
}
console.log(sum); // 5050
3. 计算 1 - 100 之间的所有偶数和
- 核心思路：
- 声明累加和的变量 sum
- 首先利用 if 语句把 i 里面是偶数筛选出来
- 把筛选的 i 加到 sum 里面
let sum = 0;
let i = 1;
while ( i <= 100){
if ( i % 2 == 0){
sum += i;
}
i++;
}
document.write(`1~100之间的所有偶数和为：${sum}`);
-
循环结束：
- continue：结束本次循环，继续下次循环
- break：跳出所在的循环
案例：页面弹框
需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框
分析：
①：循环条件永远为真，一直弹出对话框
②：循环的时候，重新让用户输入
③：如果用户输入的是：爱，则退出循环（break）
var str = prompt('你爱我吗？');
while(str != '爱'){
str = prompt('你爱我吗？');
}
alert('我也爱你啊！');
案例：简易ATM取款机案例
需求：用户可以选择存钱、取钱、查看余额和退出功能
分析：
①：循环的时候，需要反复提示输入框，所以提示框写到循环里面
②：退出的条件是用户输入了 4 ，如果是 4 ，则结束循环，不在弹窗
③：提前准备一个金额预先存储一个数额
④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额
⑤：输入不同的值，可以使用switch来执行不同的操作
// 1. 不断的弹出对话框
// 3. 金额的变量
let money = 100;
while (true) {
let str = prompt(`请您选择操作:
1. 存钱
2. 取钱
3. 查看余额
4. 退出
`);
// 2. 除非输入的是4 则退出循环 break
if (str === '4') {
alert('感谢使用本功能，再见！');
break;
}
// 4. switch 加减操作
switch (str) {
case '1':
let cun = +prompt('请您输入存钱的金额:');
// money = money + cun
money += cun;
break;
case '2':
let qu = +prompt('请您输入取钱的金额:');
money -= qu;
break;
case '3':
alert(`您卡上的余额是${money}元`);
break;
}
}
- 用户登录验证
- 题目描述：
- 接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功! 否则，让用户一直输入。
- 题目提示：
- 利用while循环
- 题目描述：
let msg = prompt('名字')
let pwd = prompt('密码')
while (msg !== 'admin' || pwd !== '123') {
alert('请你先登录')
msg = prompt('名字')
pwd = prompt('密码')
}
alert('登录成功')
- 用户输入分数，根据分数奖励不同的车( 利用多分支语句 )
- 90~100分 奖励法拉利
- 80~90分 奖励奥迪
- 60~80分 奖励奥拓
- 60分以下 打一顿
//以下代码不够完善，输入个位出错了
let num = Number(prompt('请输入您的成绩：(0-100之间）'));
switch(num/10){
case 10:
case 9:alert('奖励法拉利');break;
case 8:alert(' 奖励奥迪');break;
case 7:case 6:
alert('奖励奥拓');break;
case 5: case 4: case 3: case 2: case 1: case 0:
alert('打一顿');break;
default:
alert('输出错误！');
}
拓展作业~~~~~~
求1-100之间个位数不为3的数的累加和。
-
题目描述：
- 求整数1～100的累加值，但要求跳过所有个位为3的数。
-
题目提示：
- 使用%判个位数是否为3
let sum = 0
let i = 1
while (i <= 100) {
if (i % 10 !== 3) {
sum = sum + i
}
i++
}
console.log(sum)
3. continue
- continue：结束本次循环，继续下次循环
// continue 关键字用于立即跳出本次循环，继续下一次循环
//只要遇见continue就退出本次循环 直接跳到 i++
// 我们要打印吃包子
let i = 1
while (i <= 6) {
if (i === 3) {
i++
continue
}
document.write(`我要吃第${i}个包子 <br>`)
i++
}
输出结果如下：
案例：求 1~100 之间，除了能被 7 整除之外的整数和
var sum = 0;
for (i = 1; i <= 100; i++){
if ( i % 7 == 0){
continue;
}
sum += i;
}
console.log(sum);
4. break
- break：跳出所在的循环
// 跳出整轮循环
// 我们要打印吃包子
let i = 1
while (i <= 6) {
if (i === 3) {
i++
// 退出循环
break
}
document.write(`我要吃第${i}个包子 <br>`)
i++
}
输出结果如下：
2.4 断点调试
- 作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
- 浏览器打开调试界面
- 按F12打开开发者工具
- 点到sources一栏
- 选择代码文件
- 在你想加断点的代码的行号前面单击，刷新一下，就可以控制代码的执行
- 取消断点，就再单击行号
- 断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来
5. 数组
5.1 是什么
- 数组(Array)是一种可以按顺序保存数据的数据类型
- 为什么要数组？
- 思考：如果我想保存一个班里 5 个人的姓名怎么办？
- 如果有多个数据可以用数组保存起来
5.2 基本使用
目标：能够声明数组并且能够获取里面的数据
1. 声明语法
- 例
let 数组名 = [数据1，数据2，...，数据n];
eg :
let names = ['小明','小刚','小红','小丽','小米'];
-
数组是按顺序保存，所以每个数据都有自己的编号
-
计算机中的编号从 0 开始，所以小明的编号为 0 ，小刚编号为 1 ，以此类推
-
在数组中，数据的编号也叫 索引或下标
-
数组可以存储任意类型的数据
2. 取值语法
数组名[下标];
- 例
var names = ['小明','小刚','小红','小丽','小米'];
names[0] //小明
names[1] //小刚
- 通过下标取数据
- 取出来是什么类型的，就根据这种类型特点来访问
3. 一些术语：
- 元素：数组中保存的每个数据都叫数组元素
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的length属性获得
let arr = ['马超', '黄忠', '关羽', '张飞', '貂蝉']
console.log(arr)
// 取值 数组名[索引]
console.log(arr[0])
console.log(arr[4])
4. 遍历数组：
用循环把数组中每个元素都访问到,一般会用for循环遍历
- 语法：
for (var i = 0; i < 数组名.length; i++) {
数组名[i];
}
- 例
var nums = [10, 20, 30, 40, 50];
for (let i = 0; i < nums.length; i++) {
document.write(nums[i]);
}
案例：数组求和
需求：求数组[2,6,1,7, 4] 里面所有元素的和以及平均值
分析：
①：声明一个求和变量sum。
②：遍历这个数组，把里面每个数组元素加到sum 里面。
③：用求和变量sum 除以数组的长度就可以得到数组的平均值。
// 数组求和案例
let arr = [2, 6, 1, 7, 4]
// 求和变量
let sum = 0
// 求平均值变量
let average = 0
// 遍历数组
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
// sum = sum + arr[i]
// arr[i] 就是数组里面的每个值 比如 2， 3
sum += arr[i]
}
average = sum / arr.length
document.write(`这个同学的总分是: ${sum}, 平均分是:${average}`)
案例：数组求最大值
需求：求数组[2,6,1,77,52,25,7] 中的最大值
分析：
①：声明一个保存最大元素的变量max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和max相比较。
④：如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较。
⑤：最后输出这个max
let arr = [2, 6, 1, 77, 52, 25, 7]
// 声明最大值的变量 得到数组元素的方法 数组名[索引号]
let max = arr[0]
let index = 0
// 遍历数组
for (let i = 1; i < arr.length; i++) {
// i 是什么？ 是序号 1234567
// 只不过这个 i序号，正好和 数组的索引号对应
// i 可以看做是 数组的索引号
// 得到数组元素的方法 数组名[索引号] arr[i]
if (max < arr[i]) {
max = arr[i]
index = i
}
}
console.log(max);
案例：数组转化为分割字符串
需求：将数组[‘red’, ‘green’, ‘blue’, ‘pink’]转换成字符串，并且用| 或其它分隔符号分割。
输出：‘red|green|blue|pink|’
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var sep = '!';
for(var i = 0; i < arr.length; i++){
str += arr[i] + sep;
}
console.log(str);
5.3 操作数组
1. 增加数据
目标：掌握利用 push 向数组添加元素(数据)
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
语法：
例如：
arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的 开头 ，并返回该数组的新长度
语法：
例如：
总结
- 想要数组末尾增加数据元素利用那个方法？
- arr.push()
- 可以添加一个或者多个数组元素
- 返回的是数组长度
- 想要数组开头增加数据元素利用那个方法？
- arr.unshift()
- 可以添加一个或者多个数组元素
- 返回的是数组长度
- 重点记住那个？
- arr.push()
数组增加元素
let arr = ['red', 'green']
// 把 blue 放到 arr 的后面
// arr.push('blue')
// 返回值是新的数组长度：
// 不但把数组放入数组，而且还告诉我们，看看有3个值啦
console.log(arr.push('blue')) // 3
arr.push('blue', 'skyblue')
console.log(arr)
let arr = ['red', 'green']
// arr.unshift('pink', 'blue')
console.log(arr.unshift('pink', 'blue')) // 4
console.log(arr)
案例：数组求和
// 数组求和案例
let arr = [2, 6, 1, 7, 4]
// 求和变量
let sum = 0
// 求平均值变量
let average = 0
// 遍历数组
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
// sum = sum + arr[i]
// arr[i] 就是数组里面的每个值 比如 2， 3
sum += arr[i]
}
average = sum / arr.length
document.write(`这个同学的总分是: ${sum}, 平均分是:${average}`)
案例：求数组的的最大值
let arr = [2, 6, 1, 77, 52, 25, 7]
let max = arr[0]
// 循环数组
for (let i = 1; i < arr.length; i++) {
// max 小于后面的值，就需要把值给我，这样保证max里面放的最大值
if (max < arr[i]) {
max = arr[i]
}
}
console.log(max)
案例：数组增加元素
新建一个数组，里面存放10个整数（1~10）
var arr = [];
for (var i = 0; i < 10; i++) {
//因为 i 从 0 开始
arr[i] = i + 1;
}
console.log(arr);
案例：数组筛选
需求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组，找出大于等于 10 的元素
③：依次追加给新数组newArr
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 需要一个新的空数组 数组字面量 []
var newArr = [];
// 遍历旧数组
for (i = 0; i < arr.length; i++){
if (arr[i] >= 10){
// 一开始，newArr里面是空的，没有元素,newArr.length = 0;
// newArr[0]= arr[4];
// 后来把arr[4]赋给 newArr ，newArr里面就有元素了,newArr.length = 1;
// newArr[1] = arr[6]
// 这下 newArr 数组里面有两个元素了下次就是 newArr[2]
// 方法一
newArr.push(arr[i]);
// 方法二
newArr[newArr.length] = arr[i];
}
}
console.log(newArr)
案例：数组去 0 案例
需求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组，找出不等于 0 的元素
③：依次追加给新数组newArr
数组本质是数据集合,操作数据无非就是增删改查语法：
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (i = 0; i < arr.length; i++){
if (arr[i] != 0){
// 方法1
newArr.push(arr[i])
// 方法2
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
案例：反转数组
需求：将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放
输出：[‘purple’, ‘pink’, ‘blue’, ‘breen’, ‘red’]
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newArr = [];
// newArry[0] = arr[4];
// newArr[newArr.length] = arr[arr.length-1-i]
// 方法一（不够简洁）
/* for (var i = 0; i < arr.length; i++){
newArr[newArr.length] = arr[arr.length -1 - i];
} */
// 方法二（简单易懂）
for (var i = arr.length-1; i >= 0; i--){
// arr[i] 从a[4]开始一直递减
// newArr[newArr.length]从newArr[0]开始一直递增
newArr[newArr.length] = arr[i];
}
console.log(newArr);
案例：数组排序（冒泡排序）
冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或者从大到小）
冒泡排序是一种简单的排序算法，它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来，走访数列的工作是重复地进行知道没有需要交换，也就是说该数列已经排列完成。这个算法的名字由来是因为越小的元素会经由交换慢慢 “浮”到数列的顶端
var arr = [7, 9, 2, 8, 10, 5];
var temp = 0;
// 一共需要的趟数
// 6 个数据我们一共需要走 5 趟
/*
[2, 5, 7, 8, 9, 10]
第一轮： 把最大数 10 放到最后面去
[7, 2, 8, 9, 5, 10]
第二轮： 把 9 放到倒数第二位
[2, 7, 8, 5, 9, 10]
第三轮： 把 8 放到倒数第三位
[7, 2, 5, 8, 9, 10]
*/
for (var i = 1; i < arr.length; i++){
//每一轮的比较次数
/*
第 1 轮比较 5 次
第 1 轮： 把最大数 10 放到最后面去（6个数，比较了5次）
[7, 9, 2, 8, 10, 5]
比较 7和9，[7, 9, 2, 8, 10, 5] 不变
比较 9和2，[7, 2, 9, 8, 10, 5] 交换
比较 9和8，[7, 2, 8, 9, 10, 5] 交换
比较 9和10,[7, 2, 8, 9, 10, 5] 不变
比较 10和5，[7, 2, 8, 9, 5, 10]交换
得到了 把最大数 10 放到最后面去
第 2 轮比较 4 次
[7, 2, 8, 9, 5, 10]
比较 7和2，[2, 7, 8, 9, 5, 10] 交换
比较 7和8，[2, 7, 8, 9, 5, 10] 不变
比较 8和9，[2, 7, 8, 9, 5, 10] 不变
比较 9和5，[2, 7, 8, 5, 9, 10] 不变
因为最后一位已经比较好就是最大的，所以不用比了
把 9 放到倒数第二位
第 3 轮比较 3 次
...
*/
for (var j = 0; j < arr.length -i; j++){
// 内部交换 2 个变量的值，
// 前一个和后面一个数组元素相比较
if (arr[j] > arr[j+1]){
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
2. 删除元素
数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
语法：
例如：
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
语法：
例如：
数组. splice()方法 删除指定元素
语法：
解释：
- start 起始位置:
- 指定修改的开始位置（从 0 计数）
- deleteCount:
- 表示要移除的数组元素的个数
- 可选的。如果省略则默认从指定的起始位置删除到最后
let arr = ['red', 'green', 'blue','purple','pink','white','black']
// arr.pop() 删除最后一个元素 返回值是删除的元素本身
console.log(arr.pop()) // black 输出删除的元素 black
console.log(arr) // ['red', 'green', 'blue', 'purple', 'pink', 'white']
// arr.shift() 删除数组的第一个元素
console.log(arr.shift()) // red 删除的元素是 red
console.log(arr) // ['green', 'blue', 'purple', 'pink', 'white']
// shift是删除 unshift比shift 加了一个 un 表示加
// arr.unshift() 在数组最前面增加元素 返回值是数组长度
console.log(arr.unshift('skyblue')) // 6
console.log(arr) // ['skyblue', 'green', 'blue', 'purple', 'pink', 'white']
// 重点删除 arr.splice(索引号从哪里开始删， 删几个) 返回的是删除的元素
console.log(arr.splice(2,3)) // ['blue', 'purple', 'pink'] 删除从第二个开始的三个元素
console.log(arr) // ['skyblue', 'green', 'white']
//删除了从索引号1开始的所有元素
console.log(arr.splice(1)) // ['green', 'white']
console.log(arr) // ['skyblue']
删除元素的使用场景：
- 随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
- 点击删除按钮，相关的数据会从商品数据中删除
后期课程我们会用到删除操作，特别是 splice
总结
- 想要数组末尾删除 1 个数据元素利用那个方法？带参数吗？
- arr.pop()
- 不带参数
- 返回值是删除的元素
- 想要数组开头删除 1 个数据元素利用那个方法？带参数吗？
- arr.shift()
- 不带参数
- 返回值是删除的元素
- 想要指定删除数组元素用那个？开发常用吗？有那些使用场景？
- arr.splice(起始位置, 删除的个数)
- 开发很常用，比如随机抽奖，比如删除指定商品等等
let arr = ['red', 'green', 'blue','purple','pink','white','black']
// arr.pop() 删除最后一个元素 返回值是删除的元素本身
console.log(arr.pop()) // black 输出删除的元素 black
console.log(arr) // ['red', 'green', 'blue', 'purple', 'pink', 'white']
// arr.shift() 删除数组的第一个元素
console.log(arr.shift()) // red 删除的元素是 red
console.log(arr) // ['green', 'blue', 'purple', 'pink', 'white']
// shift是删除 unshift比shift 加了一个 un 表示加
// arr.unshift() 在数组最前面增加元素 返回值是数组长度
console.log(arr.unshift('skyblue')) // 6
console.log(arr) // ['skyblue', 'green', 'blue', 'purple', 'pink', 'white']
// 重点删除 arr.splice(索引号从哪里开始删， 删几个) 返回的是删除的元素
console.log(arr.splice(2,3)) // ['blue', 'purple', 'pink'] 删除从第二个开始的三个元素
console.log(arr) // ['skyblue', 'green', 'white']
//删除了从索引号1开始的所有元素
console.log(arr.splice(1)) // ['green', 'white']
console.log(arr) // ['skyblue']
案例：根据数据生成柱形图
需求：用户输入四个季度的数据，可以生成柱形图
案例：根据数据生成柱形图
需求：用户输入四个季度的数据，可以生成柱形图
分析：
①：需要输入 4 次，所以可以把 4 个数据放到一个数组里面
- 利用循环，弹出 4 次框，同时存到数组里面
②：遍历改数组，根据数据生成 4 个柱形图，渲染打印到页面中 - 柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
- div里面包含显示的数字和第n季度
<!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 {
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>
</head>
<body>
<!-- <div style="height: 123px;">
<span>123</span>
<h4>第1季度</h4>
</div>
<div style="height: 156px;">
<span>156</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> -->
<script>
// 1. 利用循环弹出四次输入框， 会得到4个数据，放到数组里面
let arr = []
for (let i = 1; i <= 4; i++) {
// prompt(`请输入第 ${i} 季度的数据`) === 123
arr.push(prompt(`请输入第 ${i} 季度的数据`))
}
// console.log(arr)
// 注意我们渲染循环的是柱子
document.write(`<div class="box">`)
// 循环4个柱子
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>
使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]
// 遇到数组 先把遍历写出来!!!!!!!!!!!!!!!=> 访问数组里面的单元的值
let arr = [5, 8, 9, 2, 1, 5]
let sum = 0
for (let i = 0; index < arr.length; i ++) {
let item = arr[i] // 5 8 9
// sum = sum + item
sum += item
}
console.log(sum) // 30
使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11]
let array = [4, 9, 5, 20, 3, 11]
for (let i= 0; index < array.length; i++) {
let item = array[i] // 5 8 9
if (item > 5) {
sum += item
}
}
console.log(sum)
练习3: 使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]
练习4: 打印数组里所有的奇数 [5, 2, 8, 10, 3, 7]
练习5: 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和
练习6: 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数
练习7：给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中
扫一扫
2479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
