JS数组与循环详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40832034/article/details/125563025

本文详细介绍了JavaScript中数组的基本使用方法及操作技巧，包括数组声明、取值、遍历及增删元素等，并通过具体案例如冒泡排序和动态生成柱状图来加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、循环 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>Document</title>
    <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>
    <!-- <div class="box">
        <div>
            <span>123</span>
            <h4>第一季度</h4>
        </div>
        <div>
            <span>123</span>
            <h4>第二季度</h4>
        </div>
        <div>
            <span>123</span>
            <h4>第三季度</h4>
        </div>
        <div>
            <span>123</span>
            <h4>第四季度</h4>
        </div>
    </div> -->

    <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(`<div class='box'>`)   // 1
            
            for (i=0;i<4;i++){                   //3
                document.write(`
                <div style='height:${arr[i]}px'>
                    <span>${arr[i]}</span>
                    <h4>第${i+1}季度</h4>
                </div>
                `)
            }
            
            document.write(`</box>`)  // 2

        }
    </script>
</body>
</html>