前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- JS
- 视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
- 视频对应资源(在视频简介里面)
- 链接：【https://gitee.com/xiaoqiang001/java-script.git】
- 视频对应资源(百度网盘)
- 链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
- 提取码：1234
1. 数组的概念
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。
数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
2. 创建数组
2.1 数组的创建方式
JS 中创建数组有两种方式：
- 使用 new 关键字创建数组
- 使用数组字面量创建数组
2.2 使用 new 创建数组
语法：
var 数组名 = new Array()
通过使用 new 关键字创建的数组的类型为对象，且使用 new 关键字创建的数组为一个空数组，使用 new 关键字创建的数组是 Array 的实例对象。
这种方式暂且了解，可以等学完对象再看
注意：Array () ，A 要大写
var arr = new Array() console.log(arr) console.log(typeof arr) console.log('arr instanceof Array: ', arr instanceof Array)
2.3 利用数组字面量创建数组
数组的字面量是方括号 []
声明数组并赋值称为数组的初始化
2.3.1 使用数组字面量方式创建空的数组
语法：
var 数组名 = []；
var arr = [] console.log(arr) console.log('arr instanceof Array: ', arr instanceof Array) console.log(typeof arr)
2.3.2 使用数组字面量方式创建带初始值的数组
语法：
var 数组名 = [元素1, 元素2, ...];
var arr = ['apple', 'banana', 'orange'] console.log(arr) console.log('arr instanceof Array: ', arr instanceof Array) console.log(typeof arr)
3. 获取数组中的元素
3.1 数组元素的类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
var arr = ['apple', 12, true, 12.12] console.log(arr) console.log('arr instanceof Array: ', arr instanceof Array) console.log(typeof arr)
3.2 数组的索引
索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。
数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过数组名[索引]的形式来获取数组中的元素。
3.2.1 通过索引访问数组元素
var arr = ['apple', 12, true, 12.12] console.log(arr[0]) console.log(arr[1]) console.log(arr[2]) console.log(arr[3])
3.2.2 通过索引修改数组元素
var arr = ['apple', 12, true, 12.12] console.log(arr) arr[1] = 'banana' arr[3] = false console.log(arr)
3.2.3 索引越界
当用于访问数组的索引超过数组的最大索引时，进行数组元素的访问，得到的结果为undefined，即数组越界，超过应有的界限。
所以当我们使用索引访问数组的元素时，应当注意索引是否越界
var arr = ['apple', 12, true, 12.12] console.log(arr[4]) console.log(arr[5])
4. 遍历数组
var arr = ['apple', 12, true, 12.12] console.log(arr[0]) console.log(arr[1]) console.log(arr[2]) console.log(arr[3])
从上述代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增。
由此，我们可以通过循环遍历数组，每次改变索引来访问数组中的每个元素。
遍历: 就是把数组中的每个元素从头到尾都访问一次（类似班级早上学生的按学号点名）。
注意索引是否越界
4.1 for循环遍历数组
var arr = ['apple', 12, true, 12.12] // 最大索引为 3 for (var i=0; i<=3; i++) { console.log('第'+(i+1)+'个元素：', arr[i]) }
4.2 while循环遍历
var arr = ['apple', 12, true, 12.12] // 定义一个变量，表示当前索引，用于每次循环的数组元素访问 var idx = 0 // 由于数组索引最大为 3，所以索引不能超过 3 while (idx <= 3) { console.log('第'+idx+'个元素：', arr[idx]) // 每次访问完成后，索引向后移动 idx++ }
4.3 获取数组的长度
我们可以使用数组名.length访问数组元素的数量（数组长度）。
注意：
- 此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆。
- 当我们数组里面的元素个数发生了变化，这个 length 属性也会跟着一起变化。
var arr = ['apple', 12, true, 12.12] console.log(arr, arr.length) // 改变数组，为一个只有两个元素的数组 arr = [1, 2] console.log(arr, arr.length)
4.4 根据动态获取数组的长度循环遍历数组
通过观察发现，数组的长度总是比数组的最大索引大一，所以我们可以根据动态获取的数组长度来循环遍历数组中的每一个元素。
4.4.1 for循环遍历
var arr = ['apple', 12, true, 12.12] // 最大索引为 3 for (var i=0; i<arr.length; i++) { console.log('第'+(i+1)+'个元素：', arr[i]) }
4.4.2 while循环遍历
var arr = ['apple', 12, true, 12.12] // 定义一个变量，表示当前索引，用于每次循环的数组元素访问 var idx = 0 while (idx < arr.length) { console.log('第'+(idx+1)+'个元素：', arr[idx]) // 每次访问完成后，索引向后移动 idx++ }
5. 数组中新增元素
5.1 通过索引向数组中新增元素
我们可以通过给数组中最大索引加一对应的位置赋值来向数组中增加元素。
var arr = ['apple'] console.log(arr) // 数组中有1个元素，最大索引为0，增加元素向索引为(0+1)的位置赋值 arr[1] = 'banana' console.log(arr) // 数组中有2个元素，最大索引为1，增加元素向索引为(1+1)的位置赋值 arr[2] = 'orange' console.log(arr)
如果是给已经有元素存在的位置赋值，相当于修改该位置对应元素的值。
var arr = ['apple'] console.log(arr) // 数组中有1个元素，最大索引为0，增加元素向索引为(0+1)的位置赋值 arr[1] = 'banana' console.log(arr) // 索引1对应的位置已经有元素存在，下面的代码相当于修改索引1对应位置的元素值 arr[1] = 'orange' console.log(arr)
通过观察发现数组最大索引加一等于数组的元素个数，即数组的长度，所以可以通过动态获取数组的长度来向数组添加元素。
var arr = ['apple'] console.log(arr, '数组的长度：', arr.length) arr[arr.length] = 'banana' console.log(arr, '数组的长度：', arr.length) arr[arr.length] = 'orange' console.log(arr, '数组的长度：', arr.length)
5.2 通过数组的内置方法向数组新增元素
5.2.1 push()
该方法会在数组的最后添加新元素，且该方法是直接对原数组进行修改。
var arr = ['apple'] console.log(arr, '数组的长度：', arr.length) // arr[arr.length] = 'banana' arr.push('banana') console.log(arr, '数组的长度：', arr.length) // arr[arr.length] = 'orange' arr.push('orange') console.log(arr, '数组的长度：', arr.length)
该方法可以一次性添加多个元素到数组
var arr = ['apple'] console.log(arr, '数组的长度：', arr.length) arr.push('banana', 'orange', 'apple') console.log(arr, '数组的长度：', arr.length)
