1. 数组的概念

数组是指 一组数据的集合，其中每个数据被称为 元素，在数组中可以存放 任意类型的元素。

数组是一种将 一组数据存储在单个变量名下 的优雅方式

1
2
3
4
// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1, 2, 3, 4, 5];

2. 创建数组

1. 数组的创建方式

JS 中创建数组有两种方式：

  • 利用 new 创建数组

    1
    2
    var 数组名 = new Array();
    var arr = new Array();

  • 利用数组字面量创建数组

    1
    2
    var 数组名 = [];
    var 数组名 = ['Hello World', '你好', '张三', '李四'];
    • 数组字面量使用方括号 []
    • 声明数组并赋值称为数组的初始化

2. 数组元素的类型

数组中可以存放 任意类型 的数据，例如 字符串，数字，布尔值等。

1
var arrStus = ['张三', 12, true, 3.14];

3. 获取数组元素

1. 数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从 0 开始）

1
2
var arr = ['张三', '李四', '小白', '小黑', '小黄'];
// 索引号： 0     1     2      3     4

数组可以通过 索引 来访问、设置、修改对应的数组元素，我们可以通过 “数组名[索引]“ 的形式来获取数组中的元素

1
2
3
4
5
6
// 定义数组
var arrStus = ['red', 'green', 'blue'];
// 依次获取数组中的元素
alert(arrStus[0]); // red
alert(arrStus[1]); // green
alert(arrStus[2]); // blue

4. 遍历数组

遍历：就是把数组中的每个元素从头到尾都访问一次（类似点名）

利用循环遍历数组：

1
2
3
4
5
6
// 1.因为数组的索引号从 0 开始，所以 i 必须从 0 开始
// 2.输出时 arr[i]  i 计数器当索引号来使用
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) {
  console.log(arr[i]);
}

1. 数组的长度 length

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

1
2
var arr = ['张三', '李四', '小白', '小黄', '小黑', '小王'];
console.log(arr.length); // 结果为 6
1
2
3
4
5
// arr.length 动态检测数组元素的个数
var arr = ['张三', '李四', '小白', '小黄', '小黑', '小王'];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

5. 数组中新增元素

1.修改 length 长度

  • 可以通过修改 length 长度来实现数组扩容的目的

  • length 属性是可读写的

1
2
3
4
5
6
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号 4, 5, 6 的空间没有给值，默认值就是 undefined

2. 修改数组索引

  • 可以通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值，否则会覆盖掉以前的数据
1
2
3
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'purple';
console.log(arr);

推荐使用此方式

6. 案例

1. 筛选数组

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

  1. 声明一个新的数组 newArr 用于存放新数据
  2. 遍历原来的旧数组，找出大于等于 10 的元素
  3. 依次追加给新数组 newArr
1
2
3
4
5
6
7
8
9
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (i = 0; i < arr.length; i++) {
  if (arr[i] > 10) {
    //新数组索引号应该从 0 开始，依次递增，newArr.length 开始时是 0
    newArr[newArr.length] = arr[i];
  }
}
console.log(newArr);

2. 翻转数组

将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容颠倒存放进新数组

  1. 声明一个新数组 newArr
  2. 将旧数组索引号第 4 个取过来（arr.length - 1），存进新数组索引号第 0 个元素（newArr.length）
  3. 采取 递减的方式 i–
1
2
3
4
5
6
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newArr = [];
for (i = arr.length - 1; i >= 0; i--) {
  newArr[newArr.length] = arr[i];
}
console.log(newArr);

3. 数组排序（冒泡排序）

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

它重复地走访过要排序的数列，依次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。

将数组 [5, 4, 3, 2, 1] 从小到大进行排序

核心思路：

  1. 一共需要的趟数 用外层 for 循环
    • 5 个数据一共需要走 4 趟
    • 长度为 数组长度 减去 1，即 arr.length - 1
  2. 每一趟交换次数 用内层 for 循环
    • 第一趟 交换 4 次
    • 第二趟 交换 3 次
    • 第三趟 交换 2 次
    • 第四趟 交换 1 次
    • 长度为 数组长度 减去 次数
    • 次数从 0 开始，即 arr.length - i - 1
  3. 交换 2 个变量

💨 冒泡排序过程演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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++) {
    // 内层循环 负责每一趟的交换次数
    // 内部交换 2 个变量的值 前一个和后一个数组元素相比较
    if (arr[j] > arr[j + 1]) {
      var temp = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;
    }
  }
}
console.log(arr); // 输出结果为数组 [1, 2, 3, 4, 5]