大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~
写在前面
本篇文章将来学习JavaScript中的数组。通过本篇文章的学习可以掌握什么知识呢？如下图所示：
一些概念
什么是数组
JavaScript中的数组（Array） 是一个有序是数据集合，可以通过数组索引（index）访问数组中的数据内容。数组中的每一项可以存储任何类型的数据，也就是说，一个数组中可以存储不同类型的数据。
注：JavaScript中的数组对象并不能称为真正意义上的数组，而是通过对象的key和value键值对来模拟的数组。
下面代码定义了JavaScript中的数组：
var arr = ['这是一个测试内容.', 100, true]
在JavaScript中，并没有明确数组这种类型，但是提供了 Array对象。换句话讲，JavaScript操作数组主要是通过Array对象提供的属性和方法来完成。
说明：关于
Array的知识，将在引用类型部分讲解。
JavaScript中的数组是允许动态调整的，也就是说，可以动态地向数组增加新的数据，也可以动态地从该数组中删除某个具体的数据。当然，还包括很多更为复杂的操作。
再有就是，数组中存储的每一个数据内容所在的位置都是唯一的。这样，我们就可以通过数据所在的位置很方便地访问到该数据内容。
数组的长度
JavaScript语言提供了Array对象，该对象提供了一个length属性，该属性可以用来表示数组的长度。所谓的数组长度，简单来说，就是数组可以存储多少数据内容。
说明：关于对象和属性的知识，将在对象那篇文章中进行讲解
示例代码如下：
var arr = ['这是一个测试内容.', 100, true]
console.log(arr.length) // 3
如上代码的结果所示，我们可以看到arr数组中存储了3个数据内容，而arr数组的length属性值也为3。说明索引数组的长度是等于存储数据的个数的。
创建数组
JavaScript中创建数组的方式具有如下3种方式：
-
字面量方式创建数组
-
Array()函数创建数组 -
构造函数方式创建数组
字面量方式创建数组
使用字面量方式创建数组是JavaScript标准规范汇总定义数组的结构来创建数组。其语法结构如下：
[元素1, 元素2, 元素3, 元素N]
这种使用方括号（[]）的形式被称为字面量方式或者直接量方式。这种方式创建数组比其他方式创建数组更为便捷，通常是创建数组的首选。
如果使用这种方式创建数组时，没有声明任何一个数组元素的话，则称为空数组。所谓空数组就是指数组中不包含任何数据内容。如下示例代码所示：
[]
值得注意的是，虽然这种方式与之前的原始类型的变量声明很像，但由于JavaScript中只提供了Array对象，而没有为数组提供任何数据类型。所以，数组的数据类型为Object，如下示例代码所示：
var arr = ['这是一个测试内容.', 100, true]
console.log(typeof arr) // object
如上图的结果所示，我们会发现typeof arr最终的结果为object。这是因为在JavaScript中Object是所有对象的父级，在JavaScript中并没有提供array这一类型，而是提供了Array对象。
我们也可以通过instanceof运算符再次判断，如下示例代码：
var arr = ['这是一个测试内容.', 100, true]
console.log(arr instanceof Array) // true
说明：关于
instanceof运算符将会在后面学习
Array()函数方式创建数组
JavaScript提供了Array()函数可以用来创建数组，其语法结构如下所示：
Array(元素1, 元素2, 元素3, 元素N)
如下示例代码展示了通过Array()函数来创建数组：
var arr = Array('这是一个测试内容.', 100, true)
console.log(arr) // [ '这是一个测试内容.', 100, true ]
值得注意的是，Array()函数这种方式创建数组，如果传递的参数只有一个并且是数字值时，则表示创建了一个该数字值长度的空数组。如下示例代码所示：
// 稀疏数组
var arr = Array(10)
console.log(arr) // [ <10 empty items> ]
上面创建的这种数组称为稀疏数组 。
构造函数方式创建数组
JavaScript中提供了Array对象，实际上数组是通过该对象提供的属性和方法来进行操作的，例如 length属性等。不仅如此，我们也可以通过创建对象的方式来创建数组，称为构造函数方式创建数组。其语法结构如下所示：
new Array(元素1, 元素2, 元素3, 元素N)
值得注意的是，构造函数方式与Array()函数方式在语法结构上仅相差一个new，但意义上完全不一样。因为使用new关键字是表示在JavaScript语言中创建一个对象。所以，这种方式表示创建了一个数组对象。如下示例代码所示：
var arr = new Array('这是一个测试内容.', 100, true)
console.log(arr) // [ '这是一个测试内容.', 100, true ]
与Array()函数方式类似，如果构造函数中的参数只有一个并且是数字值的话，则表示创建了一个该数字值长度的空数组。
数组操作
JavaScript中的数组的作用与变量类似，都是用来存储数据内容的。区别在于变量每次只能存储一个数据内容，更新后会覆盖之前存储的数据内容；而数组一次允许存储多个数据内容，并且数据的类型没有任何要求。
所以，除了创建数组之外，数组的操作还有如下几种：
-
访问数组中的数据
-
修改数组中的数据
-
删除数组中的数据
访问数组中的数据
使用数组存储了数据内容之后，我们还需要通过该数组访问其中存储的具体数据内容。具体的访问方式，就是通过数组的索引值来访问数组中某个位置上所存储的数据内容。如下示例代码所示：
var arr = ['这是一个测试内容.', 100, true]
console.log(arr[0]) // 这是一个测试内容.
修改数组中的数据
修改数组中的数据与访问数据中的数据类似，都是通过索引值找到数组中对应位置上的数据。区别在于访问只是将数据内容读取出来，而修改则要使用新的数据内容来覆盖旧的数据内容。如下示例代码所示：
var arr = ['这是一个测试内容.', 100, true]
arr[0] = '这是另一个测试内容.'
console.log(arr) // [ '这是另一个测试内容.', 100, true ]
如上图的结果所示，我们可以看到arr数组0这个位置的数据内容已经被更新。
删除数组中的数据
删除数组中的数据就是通过数组中具体的索引值来删除该位置上存储的数据内容，删除操作需要使用delete运算符来完成。如下示例代码所示：
var arr = ['这是一个测试内容.', 100, true]
delete arr[0] // [ <1 empty item>, 100, true ]
console.log(arr)
console.log('arr数组的长度为：' + arr.length) // arr数组的长度为：3
如上图的结果所示，值得注意的是，当通过delete运算符删除数组中指定索引值的位置上的数据内容时，该数组的长度不变，只是将指定位置上的数据内容删除而已。
遍历数组
由于数组中可以存储多个数据内容，有时我们需要将数组中每一个数据内容全部读取出来，这就需要通过遍历数组来完成。遍历数组的操作可以通过任意一种循环语句来实现，如下示例代码所示：
while语句
var arr = ['这是一个测试内容.', 100, true]
var i = 0;
while (i < arr.length) {
console.log(arr[i])
i++
}
do...while语句
var arr = ['这是一个测试内容.', 100, true]
var i = 0;
do {
console.log(arr[i])
i++
}
while (i < arr.length)
for语句
var arr = ['这是一个测试内容.', 100, true]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
for...in语句
for...in语句通过一个变量来循环一个对象中的可枚举属性。语法结构如下：
for (var 变量 in 可遍历的对象) {
语句块
}
关于对象、可枚举属性将会在后面学习，这里只需要记住
for...in语句，循环语句的变量的是每一项值
如下示例代码所示：
var arr = ['这是一个测试内容.', 100, true]
for (var i in arr) {
console.log(arr[i])
}
在ECMAScript新特性中又增加了许多对数组遍历的方法，例如
for...of语句、forEach方法等。
总结
预告：下一篇文章我们将来学习JavaScript中的函数
精彩文章
【从头学前端】06-这次我学会了JavaScript中的条件语句
【从头学前端】05-详解JavaScript中的35种运算符
