当前位置：首页 > article >正文

【JavaScript】六、数组

article 2025/3/29 7:29:20

文章目录

1、数组的声明和取值
- 1.1 声明语法
- 1.2 取值语法
2、遍历数组
3、数组的增删改查
- 3.1 新增
- 3.2 删除
- 3.3 修改
- 3.4 查询
4、练习：根据数据生成柱形图
5、数组的排序

1、数组的声明和取值

按顺序保存数据的一种数据类型
在这里插入图片描述

1.1 声明语法

语法1：
在这里插入图片描述
eg:

// 元素类型不要求一致，这一点和Java不一样
let names = [1, true, '丙', 2]

语法2：

在这里插入图片描述
eg:

// 用构造函数声明
let names2 = new Array(1, true, '丙', 2)

数组可以存储任意类型的数据，不要求类型一致
下标从0开始

1.2 取值语法

在这里插入图片描述

取出来是什么类型的，就根据这种类型特点来访问

let names = ['甲', '乙', '丙', '丁']
names[0]  // 甲
names[1]  // 乙
console.log(names.length) // 4

2、遍历数组

在这里插入图片描述

<body>
  <script>
    let names = [1, true, '丙', 2]
    for (let i = 0; i < names.length; i++) {
      document.writeln(names[i])
    }
  </script>
</body>

练习：求数组 [2,6,1,77,52,25,7] 中的最大值

<body>
  <script>
    let array = [2, 6, 1, 77, 52, 25, 7]
    let max = array[0]
    for (let i = 0; i < array.length; i++) {
      if (array[i] < array[i + 1]) {
        max = array[i + 1]
      }
    }
    document.write(`最大值为：${max}`)
  </script>
</body>

3、数组的增删改查

在这里插入图片描述

3.1 新增

数组.push(新增的内容)，将一个或者多个元素添加到数组末尾，并返回数组新长度

在这里插入图片描述
数组.unshift(新增的内容)，将一个或者多个元素添加到数组开头，并返回数组新长度

在这里插入图片描述

练习：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

<body>
  <script>
    let array = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newArray = []
    for (let i = 0; i < array.length; i++) {
      if (array[i] >= 10) {
        newArray.push(array[i])
      }
    }
    document.write(newArray)

  </script>
</body>

3.2 删除

数组. pop() ，从数组中删除最后一个元素，并返回该元素的值

在这里插入图片描述
数组. shift() ，从数组中删除第一个元素，并返回该元素的值

在这里插入图片描述
数组. splice() ，删除指定元素，关于其传参：

start：开始位置，同样从0开始计数
deleteCount：要删除的元素个数，可选参数，不传则从起始位置删除到最后

在这里插入图片描述

3.3 修改

数组[下标] = 新值

3.4 查询

数组[下标]

4、练习：根据数据生成柱形图

需求：弹窗让用户输入4个季度的数据，自动生成下图模样的图形
在这里插入图片描述
柱形图就是div盒子(div是独占一行的，再设置），设置宽度固定，高度是用户输入的数据

<!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>
    <script>
        let array = []
        for (let i = 1; i <= 4; i++) {
            let num = prompt(`请输入第${i}季度的数据`)
            array.push(num)
        }
        document.write('<div class="box">')
        for (let i = 0; i < array.length; i++) {
            document.write(`
            <div style="height: ${array[i]}px;">
                <span>${array[i]}</span>
                <h4>第${i + 1}季度</h4>
            </div>
       
            `)
        }
        document.write('</div>')
    </script>
</body>

</html>

5、数组的排序

数组. sort() ，实现排序，语法如下：

在这里插入图片描述

JS实现冒泡🫧：

<body>
  <script>
    let array = [5, 4, 6, 9, 7]
    // 设arr.length = n
    // 外层出循环第一轮，end = n - 1, 先处理0 ~ n-1
    // 外层循环第二轮，end = n - 2, 先处理0 ~ n-2
    // 外层循环最后一轮，end = 1, 先处理0 ~ 1
    for (let end = array.length - 1; end > 0; end--) {
      for (let i = 0; i < end; i++) {
        if (array[i] > array[i + 1]) {
          let tmp = array[i + 1]
          array[i + 1] = array[i]
          array[i] = tmp
        }
      }
    }
    console.log(array)
  </script>
</body>