JavaScript 数组

最新推荐文章于 2025-03-23 00:27:18 发布

BloggerM

最新推荐文章于 2025-03-23 00:27:18 发布

阅读量242

点赞数

分类专栏：前端JavaScript 文章标签： javascript 排序算法算法

本文链接：https://blog.youkuaiyun.com/HTML_Z/article/details/123438593

版权

前端JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了JavaScript数组的概念，包括数组的创建、获取元素、遍历、新增元素和案例分析。讲解了如何利用数组字面量创建数组，通过索引访问元素，以及如何遍历数组并进行冒泡排序等操作。

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

JavaScript 数组

目标

能够知道为什么要有数组
能够创建数组
能够获取数组中的元素
能够对数组进行遍历
能够给数组新增一个元素
能够独立完成冒泡排序的案例

    <script>
      // 遍历数组：就是把数组的元素从头到尾访问一次
      var arr = ["red", "green", "blue"];
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }
      // 1. 因为我们的数组索引号从0开始  所以 i 必须从 0 开始 i<3
      // 2. 输出的时候 arr[i] i 计数器当索引号来用
    </script>

4.1 数组的长度

使用 “数组名.length” 可以访问数组元素的数量（数组长度）。

    <script>
      // 数组长度  数组名.length
      var arr = ["关羽", "张飞", "马超", "赵云", "黄忠", "刘备", "姜维"];
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }
      // 1. 数组的长度是元素个数  不要跟索引号混淆
      // 2. arr.length 动态检测数组元素的个数
    </script>

案例：数组求和及平均值

求数组 [2,6,1,7,4] 里面所有元素的和以及平均值

案例分析：

声明一个求和变量 sum
遍历这个数组，把里面每个数组元素加到 sum 里面
用求和变量 sum 除以数组的长度就可以得到数组的平均值

    <script>
      var num = 0;
      var average = 0;
      var arr = [2, 6, 1, 7, 4];
      for (var i = 0; i < arr.length; i++) {
        num = num + arr[i]; // 我们加的是数组元素 arr[i] 不是计数器
      }
      average = num / arr.length;
      console.log(average); // 4
      console.log(num); // 20
    </script>

案例：数组最大值

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

案例分析：

声明一个保存最大元素的变量 max
默认最大值可以取数组中的第一个元素
遍历这个数组，把里面每个数组元素和 max 相比较
如果这个数组元素大于 max 就把这个数组元素存到 max 里面，否则继续下一轮比较
最后输出这个 max

    <script>
      var arr = [2, 6, 1, 77, 52, 25, 7];
      var max = arr[0];
      for (var i = 1; i < arr.length; i++) {
        if (max < arr[i]) {
          max = arr[i];
        }
      }
      console.log(max);
    </script>

案例：数组转换我分割字符串

要求：将数组 [‘red’,‘green’,‘blue’,‘pink’] 转换为字符串，并且用 | 或其他符号分割

输出：‘red|green|blue|pink|’

案例分析：

需要一个新变量用于存放转换完的字符串 str
遍历原来的数组，分别把里面数据取出来，加到字符串里面
同时在后面多加一个分隔符

    <script>
      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);
    </script>

5. 数组中新增元素

可以通过修改 length 长度以及索引号增加数组元素

5.1 通过修改 length 长度新增数组元素

可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读的

    <script>
      // 1. 新增数组元素 修改length长度
      var arr = ["red", "green", "blue"];
      console.log(arr.length); // 3
      arr.length = 5;
      console.log(arr.length); // 5
      console.log(arr[3]); // undefined
      console.log(arr[4]); // undefined
    </script>

其中索引号是 3，4 的空间没有给值，就是声明变量未给值，默认值就是 undefined。

5.2 通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

    <script>
      // 1. 新增数组元素 修改索引号
      var arr = ["red", "green", "blue"];
      arr[3] = "pink";
      console.log(arr); // ['red', 'green', 'blue', 'pink']
      arr[4] = "white";
      console.log(arr); // ['red', 'green', 'blue', 'pink', 'white']
      arr[0] = "yellow"; // 这里是替换原来的数组
      console.log(arr); // ['yellow', 'green', 'blue', 'pink', 'white']
      arr = "有点意思";
      console.log(arr); // 不要直接给 数组名赋值 否则里面的数组元素都没有了
    </script>

这种方式也是我们最常用的一种方式。

案例：数组新增元素

新建一个数组，里面存放 10 个整数（1 ~ 10 ）

核心原理：

使用循环来追加数组
声明一个空数组 arr
循环中的计数器 i 可以作为数组元素存入
由于数组的索引号是从0 开始的，因此计数器从 0 开始更合适，存入的数组元素要 + 1

    <script>
      var arr = [];
      for (var i = 0; i < 10; i++) {
        arr[i] = i + 1;
      }
      console.log(arr);
    </script>

案例：筛选数组

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

案例分析：

声明一个新的数组用于存放新数据 newArr
遍历原来的旧数组，找出大于等于 10 的元素
依次追加给新数组 newArr

方法一：

    <script>
      var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
      var newArr = [];
      var j = 0;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] >= 10) {
          // 新数组索引号应该从0开始 依次递增
          newArr[j] = arr[i];
          j++;
        }
      }
      console.log(newArr); // [77, 52, 25]
    </script>

方法二：

    <script>
      var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
      var newArr = [];
      // 刚开始 newArr.length 就是 0
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] >= 10) {
          // 新数组索引号应该从0开始 依次递增
          newArr[newArr.length] = arr[i];
        }
      }
      console.log(newArr); // [77, 52, 25]
    </script>

6. 数组案例

案例：删除指定数组元素

要求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组。

案例分析：

需要一个新数组用于存放筛选之后的数据
遍历原来的数组，把不是 0 的数据添加到新数组里面（此时要注意采用数组名 + 索引的格式接受数据）
新数组里面的个数，用 length 不断累加

    <script>
      var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
      var newArr = [];
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] != 0) {
          newArr[newArr.length] = arr[i];
        }
      }
      console.log(newArr); // [2, 6, 1, 77, 52, 25, 7]
    </script>

案例：翻转数组

要求：将数组 [‘yellow’, ‘green’, ‘blue’, ‘pink’, ‘white’] 的内容反过来存放。

输出： [‘white’, ‘pink’, ‘blue’, ‘green’, ‘yellow’]

    <script>
      var arr = ["yellow", "green", "blue", "pink", "white"];
      var newArr = [];
      for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
      }
      console.log(newArr); // ['white', 'pink', 'blue', 'green', 'yellow']
    </script>

案例：数组排序（冒泡排序）

冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）。

例如：我们可以将数组 [5,4,3,2,1] 中的元素按照从小到大的顺序排序，输出：1,2,3,4,5

案例分析：

一共需要的趟数，我们用外层 for 循环

5 个数据我们一共需要走 4 趟
每一趟交换次数，我们用里层 for 循环

第一次交换 4 次

第二次交换 3 次

第三次交换 2 次

第四次交换 1 次
交换 2 个变量就好了

    <script>
      var arr = [5, 4, 3, 2, 1];
      // 外层循环管趟数
      for (var i = 0; i <= arr.length - 1; i++) {
        // 里面的循环管每一趟的交换次数
        for (var j = 0; j <= arr.length - i - 1; j++) {
          // 内部交换两个变量的值 前一个和后面一个进行比较
          if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      console.log(arr);
    </script>