三、JS 基础知识之数组的使用及实例

1. 数组的基本使用

数组是一种可以按顺序保存数据的数据类型，如果有多个数据可以用数组保存起来。

数组声明：let 数组名 = [数据1，数据2，...]

例如：

let colors = ['red','green','pink','yellow']

数组是按顺序保存数据的，所以每个数据都有自己的编号；
计算机中的编号是从 0 开始的，所以 " red " 的编号为 0 ，以此类推；
数组中的数据的编号称为索引或下标；
数组可以存储任意类型的数据
数组中保存的每一个数据叫数组元素；
数组中数据的个数，通过数组的 length 属性获得

取值语法：数组名[下标]

通过下标取数据，取出来是什么类型的，就根据这种类型特点来访问

HTML 复制代码

    <script>
      let colors = ['red', 'green', 'pink', 'yellow']
      console.log(colors[0])
      console.log(colors[3])
      console.log(colors.length)
    </script>

2. 遍历数组

一般用 for 循环遍历数组中的每个元素：

语法：

例如：

HTML 复制代码

    <script>
      let colors = ['red', 'green', 'pink', 'yellow']
      for (let i = 0; i < colors.length; i++) {
        console.log(colors[i])
      }
    </script>

数组求和：求数组 [3,5,2,1,6] 里所有元素的和，并求平均值

HTML 复制代码

    <script>
      let arr = [3, 5, 2, 1, 6]
      let sum = 0
      let avgArr = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      avgArr = sum / arr.length
      console.log('总和：' + sum)
      console.log('平均值：' + avgArr)
    </script>

分析：

声明求和变量，上例使用 sum；
遍历数组，将数组里的每个元素都加到 sum 里面；
用总和 sum 除以数组长度就可以求得数组的平均值

注意：这里需要注意，i 表示数组下标，arr[i] 输出的结果是数组的元素（也就是值）

求数组 [3, 15, 21, 121, 65,26] 的最大值和最小值

HTML 复制代码

    <script>
      let arr = [3, 15, 21, 121, 65, 26]
      let max = arr[0]  // 声明最大值的变量，把数组第一个值付给它
      let min = arr[0] // 声明最小值的变量，把数组第一个值付给它
      for (let i = 0; i < arr.length; i++) {
        if (max < arr[i]) {
          max = arr[i]
        } 
        
        if (min > arr[i]) {
          min = arr[i]
        }
      }

      console.log('最大值：' + max)
      console.log('最小值：' + min)
    </script>

以最大值为例分析：

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

3. 操作数组

数组的本质是数据集合，操作数组就是 增、删、改、查 语法：

3.1 数组增加新的数据

数组.push() 方法是将一个或多个元素添加到数组的末尾，并 返回该数组的新长度 。

语法：

例如：

HTML 复制代码

    <script>
      let arr = [1, 3, 5]
      let l = arr.push(7, 9)
      console.log(arr)
      console.log(l)
    </script>

arr.unshitf() 方法是将一个或多个元素添加到数组的开头，也是返回该数组的新长度

语法：

示例：

HTML 复制代码

    <script>
      let arr = [1, 3, 5]
      let l = arr.unshift(7, 9)
      console.log(arr)
      console.log(l)
    </script>

示例：去掉数组中不需要的数据，这里以去掉数组里的 0 为例

将原数组中的 0 去掉后，会形成一个不含 0 的新数组，我们需要声明一个新的数组来存放去掉 0 之后的数据，然后遍历原来的数组，找出不等于 0 的元素，将其依次追加到新声明的数组里

HTML 复制代码

  <body>
    <script>
      let arr = [1, 0, 21, 3, 0, 10, 6, 8]
      let arrN = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] !== 0) {
          arrN.push(arr[i])
        }
      }
   
      console.log(arrN)
    </script>
  </body>

3.2 删除数组中的数据

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

html 复制代码

  <body>
    <script>
      let arr = [11, 22, 33]
      let S = arr.pop()
      console.log('已删除的元素： ' + S)
      console.log( arr)
    </script>
  </body>

arr.shift()方法是从数组中 删除第一个 元素，也是返回该元素的值：

HTML 复制代码

  <body>
    <script>
      let arr = [11, 22, 33]
      let S = arr.shift()
      console.log('已删除的元素： ' + S)
      console.log( arr)
    </script>
  </body>

arr.splice(start,deleteCount)方法是要 删除指定的元素 ，其中：

start 指定要修改的元素的开始位置（从 0 开始计数）
deleteCount 表示要删除的数组元素的个数，是可选值，如果省略此值，则默认从指定的起始位置删除到最后

示例：从 3 开始，删除掉 1 个元素

HTML 复制代码

  <body>
    <script>
      let arr = [11, 22, 33, 44, 55]
      let S = arr.splice(3, 1)
      console.log('已删除的元素： ' + S)
      console.log(arr)
    </script>
  </body>

示例：从 3 开始删除数组元素

html 复制代码

  <body>
    <script>
      let arr = [11, 22, 33, 44, 55]
      let S = arr.splice(3)
      console.log('已删除的元素： ')
      console.log(S)

      console.log("剩余元素：");
      console.log(arr)
    </script>
  </body>

注意：

splice 方法返回的也是删除的数组元素
要删除的数组元素，包括开始位置的元素本身

冒泡排序

冒泡排序 是一种简单的 排序算法 ，它的名字由来是因为通过元素交换，越小的元素会慢慢的浮到数列的顶端，例如数组 [4，2，9，7，6] ，经过冒泡排序后，结果是：[2，4，6，7，9] 或 [9，7，6，4，2]

排序算法重复的遍历要排序的数列，一次比较两个元素，如果这两个元素的顺序错误就把它们交换过来。遍历数列的步骤是重复地进行的，直到再没有需要交换的元素，该数列才算排序完成。

以 [4，2，9，7，6] 数组为例分析：

5 个数组元素，一共需要比较 4 回，所以外层循环的长度是 数组长度 - 1
每一回需要交换的次数用内层循环，第一回需要交换 4 次；第二回需要交换 3 次；第三回需要交换 2 次；第四回需要交换 1 次；所以长度就是 数组长度 - 交换次数 ，这里需要注意，次数是从 0 开始的，因此最终长度为：数组长度 - i + 1
最后，交换两个变量即可

代码实现1：[2，4，6，7，9]

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>Document</title>
  </head>
  <body>
    <script>
      let arr = [4, 2, 9, 7, 6]
      // 外层循环：第几回遍历
      for (let i = 0; i < arr.length - 1; i++) {
      // 内层循环：第几次交换
        for (let j = 0; j < arr.length - i + 1; j++) {
          if (arr[j] > arr[j + 1]) {
            let tmp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = tmp
          }
        }
        console.log(arr)
      }
     
    </script>
  </body>
</html>

代码实现2：[9，7，6，4，2]

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>Document</title>
  </head>
  <body>
    <script>
      let arr = [4, 2, 9, 7, 6]
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - i + 1; j++) {
          if (arr[j] < arr[j + 1]) {
            let tmp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = tmp
          }
        }
        console.log(arr)
      }
     
    </script>
  </body>
</html>