js入门（十九）：数组

本章内容将全面介绍js中数组部分

数组概述

什么是数组：
数组（Array），是一个有序是数据集合，可以通过数组的名称（name）或者索引（index）访问数组中的数据内容。数组中的每一项可以存储任何类型的数据，也就是说，一个数组中可以存储不同类型的数据。等价于列表

如下示例代码展示了 JavaScript 语言中的一位数组，二维数组，三维数组：

var arr = ['这是一个测试内容.', 100, true]


var arr = ['这是一个测试内容.', 100, true['这是一个测试内容.', 100, true]]


var arr = ['这是一个测试内容.', 100, true['这是一个测试内容.', 100, true，['这是一个测试内容.', 100, true]]]

数组的分类

索引数组
关联数组
稀疏数组

索引数组

var arr = [] //声明一个空数组
arr[0] = '这是一个测试内容'
arr[1] = 100
arr[2] = true

通过上述示例代码所示，我们可以发现可以先声明一个空数组，再通过索引值的方式为数组中增加数据内容。并且，上述示例代码与如下示例代码是相同的：

var arr = ['这是一个测试内容.', 100, true]

值得注意的是，数组的索引值一般情况下是从 0 开始的，并不是从 1 开始的。

关联数组

关联数组是存储数据内容的位置通过字符串来表示的一种数组，该字符串可以是名称（name）或者键名（key）。需要注意的是，ECMA-262 标准规范中并没有定义这种数组，但是我们声明一个这样的数组 JavaScript 语言并不会报错。如下所示：

var arr = []
arr['str'] = '这是一个测试内容'
arr['num'] = 100
arr['bool'] = true

如上述示例代码所示，我们可以发现索引数组与关联数组的区别在于索引数组的索引值使用数字值，而关联数组的索引值使用字符串。

稀疏数组

var arr = new Array(10) //创建一个可以容纳10个数据内容的数组
arr[3] = '这是一个测试内容.'
arr[5] = 100
arr[8] = true

如上述示例代码所示，先创建了一个可以容纳 10 个数据内容的数组，但只在索引值为 3、5、8 存储了数据，其余位置都没有存储数据，这种数组就可以称为稀疏数组。

稀疏数组在实际开发中，会经常遇到一些问题。所以，无论在学习中还是开发中，都需要特别地留意这种数组的操作方式以及可能遇到的问题。

数组的长度

JavaScript 语言提供了 Array 对象，该对象提供了一个 length 属性，该属性可以用来表示数组的长度。所谓的数组长度，简单来说，就是数组可以存储多少数据内容。

var arr = ['这是一个测试内容.', 100, true]

console.log(arr.length)
//3

值得注意的是，关联数组，因为没有定义索引值，所以无法使用length

稀疏数组使用length会返回与元素数量不符合的值，如下所示

var arr = []
arr['str'] = '这是一个测试内容'
arr['num'] = 100
arr['bool'] = true
console.log(arr.length)

//0

var arr = new Array(10)
arr[3] = '这是一个测试内容.'
arr[5] = 100
arr[8] = true
console.log(arr.length)
//10

一维数组

var arr = ['这是一个测试内容.', 100, true]

创建数组
JavaScript 语言中创建数组的方式具有如下 3 种方式：

字面量/直接量方式创建数组
Array() 函数方式创建数组
构造函数方式创建数组

字面量方式创建数组

arr = ['这是一个测试内容.', 100, true]
console.log(typeof arr)
//object
arr = ['这是一个测试内容.', 100, true]
console.log(arr instanceof Array)
//true

Array() 函数方式创建数组

 arr = Array(10)//r创建一个容量为10的数组
console.log(arr)
//(10) [empty × 10]

构造函数方式创建数组

arr = new Array('这是一个测试内容.', 100, true)
console.log(arr)
//(3) ["这是一个测试内容.", 100, true]

与 Array() 函数方式类似，如果构造函数中的参数只有一个并且是数字值的话，则表示创建了一个该数字值长度的空数组。如下示例代码所示：

var arr = new Array(10)
console.log(arr)
//(10) [empty × 10]

数组操作

访问数组中的数据
修改数组中的数据
删除数组中的数据

访问数组中的数据
索引数组

arr = ['这是一个测试内容.', 100, true]
console.log(arr[0])
//这是一个测试内容.

关联数组

var arr = []
arr['str'] = '这是一个测试内容'
arr['num'] = 100
arr['bool'] = true

console.log(arr['str'])
//这是一个测试内容.

稀疏数组

var arr = new Array(10)
arr[3] = '这是一个测试内容.'
arr[5] = 100
arr[8] = true
console.log(arr[3])
//这是一个测试内容.

值得注意的是，访问稀疏数组中的数据时，很可能访问的位置上并没有存储任何数据内容。如下示例代码所示：

var arr = new Array(10)
arr[3] = '这是一个测试内容.'
arr[5] = 100
arr[8] = true

console.log(arr[1])
//undefined

修改数组中的数据
索引数组

var arr = ['这是一个测试内容.', 100, true]
arr[0] = '这是另一个测试内容.'

console.log(arr)
//(3) ["这是另一个测试内容.", 100, true]

关联数组

var arr = []
arr['str'] = '这是一个测试内容'
arr['num'] = 100
arr['bool'] = true

arr['str'] = '这是另一个测试内容.'

console.log(arr)
//[str: "这是另一个测试内容.", num: 100, bool: true]

而稀疏数组的修改数组中的数据内容，可能是为没有存储任何数据内容的位置进行更新，从而变成了为稀疏数组新增数据内容。如下示例代码所示：

var arr = new Array(10)
arr[3] = '这是一个测试内容.'
arr[5] = 100
arr[8] = true

arr[3] = '这是另一个测试内容'

arr[4] = 500

console.log(arr)
//(10) [empty × 3, "这是另一个测试内容", 500, 100, empty × 2, true, empty]

当然，索引数组和关联数组也可以通过修改数组中的数据内容操作为该数组中不存在的位置更新数据内容。如下示例代码所示：

var arr = ['这是一个测试内容.', 100, true]
arr[3] = '这是另一个测试内容.'

console.log(arr)

//(4) ["这是一个测试内容.", 100, true, "这是另一个测试内容."]

删除数组中的数据

var arr = ['这是一个测试内容.', 100, true]
delete arr[0]

console.log(arr)
console.log('arr数组的长度为：' + arr.length)
//(3) [empty, 100, true]
//arr数组的长度为：3

如上图的结果所示，值得注意的是，当通过 delete 运算符删除数组中指定索引值的位置上的数据内容时，该数组的长度不变，只是将指定位置上的数据内容删除而已。

当然，除了索引数组之外，关联数组和稀疏数组同样可以通过 delete 运算符来实现删除数组中的数据内容操作。

遍历数组

由于数组中可以存储多个数据内容，有时我们需要将数组中每一个数据内容全部读取出来，这就需要通过遍历数组来完成。遍历数组的操作可以通过任意一种循环语句来实现，如下示例代码所示：

var arr = ['这是一个测试内容.', 100, true]
for (var i=0; i<arr.length; i++) {
	console.log(arr[i])
}
//这是一个测试内容.
//100
//true

for…in 语句

arr = ['这是一个测试内容.', 100, true]
for (i in arr) {
	console.log(arr[i])
}

遍历稀疏数组会返回多个undefined用for in遍历则不会

二维数组操作

 arr = [[11,12,13], [21,22,23], [31,32,33]]
console.log(arr[0][0])
//11