JS 数组操作

AZaLEan__2026-06-22 12:24

JS 数组操作

一、数组的基本声明

在 JavaScript 中，声明数组主要有两种方式：字面量方式 和 new Array() 构造函数方式。

1. 字面量声明

直接通过 [] 声明数组，可包含任意类型的数据（数字、字符串、布尔值等）。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组使用</title>
</head>
<body>
  <script>
    // 字面量声明，支持多类型元素
    let arr1 = [1, 2, 3, 'hello', 5, 6, 'world', 8, 9]
    console.log(arr1) // 输出：[1, 2, 3, 'hello', 5, 6, 'world', 8, 9]
  </script>
</body>
</html>

2. new Array () 声明

通过构造函数创建数组，参数为数组初始元素。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组使用</title>
</head>
<body>
  <script>
    // new Array() 声明
    let arr2 = new Array(true, 2, 3, 4, 5, 6, 7, 8, 9)
    console.log(arr2) // 输出：[true, 2, 3, 4, 5, 6, 7, 8, 9]
  </script>
</body>
</html>

二、数组的修改操作

数组是引用类型，可通过索引直接修改，也可结合循环批量修改。

1. 单个元素修改

通过 数组[索引] 直接赋值，索引不存在时会创建空元素占位。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组操作-改</title>
</head>
<body>
  <script>
    let arr = []
    arr[0] = 1       // 索引0赋值为1
    arr[4] = 2       // 索引4赋值为2，索引1-3为空元素
    console.log(arr) // 输出：[1, empty × 3, 2]
  </script>
</body>
</html>

2. 批量修改

结合 for 循环遍历数组，批量修改所有元素。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组操作-改</title>
</head>
<body>
  <script>
    let arr1 = ['pink', 'red', 'green', 'blue']
    // 循环批量修改：每个元素拼接"老师"
    for (let i = 0; i < arr1.length; i++) {
      arr1[i] += '老师'
    }
    document.write(arr1) // 输出：pink老师,red老师,green老师,blue老师
  </script>
</body>
</html>

三、数组的增加操作

数组提供了 push() 和 unshift() 方法实现元素添加，两者的区别在于添加位置。

方法 作用 返回值
push() 向数组末尾添加元素 新数组的长度
unshift() 向数组开头添加元素 新数组的长度
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组操作-增</title>
</head>
<body>
  <script>
    let arr = [1]
    arr.push(2, 4)          // 末尾添加2、4
    document.write(arr + '<br>') // 输出：1,2,4
    document.write(arr.push(5, 0) + '<br>') // 输出新长度：5
    document.write(arr + '<br>') // 输出：1,2,4,5,0
    arr.unshift('red', 'green') // 开头添加'red'、'green'
    document.write(arr + '<br>') // 输出：red,green,1,2,4,5,0
  </script>
</body>
</html>

四、数组的删除操作

数组删除元素的核心方法有 pop()、shift()、splice()，覆盖 "删除最后一个、第一个、任意位置" 场景。

方法 作用 返回值
pop() 删除数组最后一个元素 被删除的元素
shift() 删除数组第一个元素 被删除的元素
splice(起始索引, 删除个数) 删除任意位置元素 被删除的元素组成的数组
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组操作-删</title>
</head>
<body>
  <script>
    let arr = ['red', 'green', 'blue', 'yellow', 'orange', 'purple']
    // pop()：删除最后一个元素
    document.write(arr.pop() + '<br>') // 输出：purple
    document.write(arr + '<br>') // 输出：red,green,blue,yellow,orange
    
    // shift()：删除第一个元素
    document.write(arr.shift() + '<br>') // 输出：red
    document.write(arr + '<br>') // 输出：green,blue,yellow,orange
    
    // splice()：删除索引1开始的2个元素
    document.write(arr.splice(1, 2) + '<br>') // 输出：blue,yellow
    document.write(arr + '<br>') // 输出：green,orange
  </script>
</body>
</html>

五、数组的常用计算操作

1. 数组求和与平均值

通过循环遍历数组，累加所有元素得到总和，再除以数组长度得到平均值。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组求和</title>
</head>
<body>
  <script>
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    let sum = 0
    // 循环累加
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    document.write(`数组${arr}的和为：${sum}<br>`) // 输出：45
    document.write(`数组的平均值为：${sum / arr.length}`) // 输出：5
  </script>
</body>
</html>

2. 数组求最大值 / 最小值

假设数组第一个元素为最值初始值，循环对比所有元素，更新最值。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组求最大值最小值</title>
</head>
<body>
  <script>
    let arr = [7, 21, 4, 2, 4, 7, 8, 55, 78, 3, 4551, 100]
    // 求最大值
    let max = arr[0]
    for (let i = 1; i < arr.length; i++) {
      if (arr[i] > max) {
        max = arr[i]
      }
    }
    document.write(`最大值为：${max}<br>`) // 输出：4551
    
    // 求最小值
    let min = arr[0]
    for (let i = 1; i < arr.length; i++) {
      if (arr[i] < min) {
        min = arr[i]
      }
    }
    document.write(`最小值为：${min}`) // 输出：2
  </script>
</body>
</html>

六、数组筛选实战

需求：过滤数组中的所有 0 元素，保留非 0 元素。

实现思路：创建新数组，循环遍历原数组，将非 0 元素通过 push() 加入新数组。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组筛选案例</title>
</head>
<body>
  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newArr = []
    // 循环筛选非0元素
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== 0) {
        newArr.push(arr[i])
      }
    }
    document.write(newArr) // 输出：2,6,1,77,52,25,7
  </script>
</body>
</html>

七、案例：根据销售额生成柱形图

需求分析

  • 弹出 4 次输入框，分别输入 4 个季度的销售额；
  • 根据输入的销售额，生成可视化柱形图（高度对应销售额）；
  • 柱形图显示销售额数值和季度标签。

完整代码

html 复制代码 
<!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>根据销售额生成柱形图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      width: 700px;
      height: 300px;
      border-left: 1px solid pink;
      border-bottom: 1px solid pink;
      margin: 150px 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>
    // 1. 收集4个季度的销售额
    let arr = []
    for (let i = 1; i <= 4; i++) {
      arr.push(prompt(`请输入第${i}季度的销售额:`))
    }

    // 2. 渲染柱形图
    document.write(`<div class="box">`)
    for (let i = 1; i <= 4; i++) {
      document.write(`
        <div style="height: ${arr[i - 1]}px;">
          <span>${arr[i - 1]}</span>
          <h4>第${i}季度</h4>
        </div>
      `)
    }
    document.write(`</div>`)
  </script>
</body>
</html>

代码解析

  • CSS 部分 ：通过 Flex 布局实现柱形图的横向排列，align-items: flex-end 让柱形从底部开始显示；
  • JS 部分:
    1. 循环 4 次，通过 prompt() 收集销售额并存入数组；
    2. 再次循环，通过 document.write() 动态生成每个季度的柱形元素，柱形高度绑定数组中的销售额数值；
    3. 显示销售额（span）和季度标签（h4），优化视觉布局。

八、总结

  • 声明：字面量 / new Array()；
  • 增删改：push()/unshift()、pop()/shift()/splice()、索引修改；
  • 计算：求和、平均值、最值；
  • 实战：筛选非 0 元素、销售额柱形图可视化。
热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？03【AI】2026 年具身智能模型和世界模型总结042026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf05Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析06GitHub 镜像站点07【AI总结】2026年6月 主流国内外大模型总结08AI科技热点日报 | 2026年6月1日09AI科技热点日报 | 2026年6月22日10AI一周事件 · 2026-06-03 至 2026-06-09