[JavaScript知识库]JavaScript基本数据类型之数组-学习笔记

1 基本概念及语法

数组（array）是按次序排列的一组值，每个值的位置都有编号（即从0开始依次编号），整个数组用方括号表示。例如：var arr=['a', 'b', 'c'];

1. 数组也可以先定义后赋值。
2. 任何类型的数据都可以放入数组。
3. 若数组的元素还是数组，就形成了多维数组。
4. 数组本质上是一种特殊的对象，这点通过typeof运算符的返回类型为object就可以看出来。
5. 数组其实是有键名的，它的键名和编号是一致的，是按次序排列的一组整数（0，1，2, ...），可以借助Object.keys()方法进行验证。
6. 数组的键名其实也是字符串（这和对象是一致的），可以使用数字键名来读取，因为非字符串的键名会被自动转为字符串。

2 length属性

数组的length属性返回数组的成员数量。

注：JavaScript使用一个32位的整数来保存数组的元素个数，这意味着数组成员最多只能有(2³²-1)个。

1. 数组的数字键不需要连续，length属性的值总是比最大的键值大1。并且数组是一种动态的数据结构。

2. 数组的length属性是可写的，可以人为地设置一个小于当前成员个数的值，该数组的成员个数会自动减少到length设置的值。测试如下：

   很显然😒，清空一个数组的有效方法便是将数组的length属性设为0。

   var arr = [ 'a', 'b', 'c' ];
   arr.length = 2;
   arr // ["a", "b"]
   

   若设置的length属性的值大于当前的成员数量，则新增的位置都是空位，读取的结果为undefined。

   var a = ['a'];
   a.length = 3;
   a[1] // undefined
   

3. 由于数组本质上为对象，因此可以为数组添加属性，但这并不影响数组的length属性的值。测试如下：在为数组添加p属性后，length的长度没有改变。

   var a = [];
   a['p'] = 'abc';
   a.length // 0
   

4. 若数组的键名添加了超出范围的数值，则键名会自动转为字符串。

   var arr = [];
   arr[-1] = 'a';
   arr[Math.pow(2, 32)] = 'b';
   
   arr.length // 0
   arr[-1] // "a"
   arr[4294967296] // "b"
   

3 数组的空位

当数组中某个位置为空元素，即两个逗号之间没有任何值，则数组存在空位（hole）。

1. 若最后一个元素后面有逗号，则并不会产生空位。

2. 由上一节易知：数组的空位不影响length属性。

3. 数组的空位是可以读取的，返回值位undefined。

4. 使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性。

5. 数组的某个位置是空位与某个位置是undefined是不一样的，若是空位，则使用数组的forEach()方法、for…in结构、Object.keys()方法进行遍历，空位都会被跳过；若为undefined（这个位置的值就是undefined），则遍历时不会被跳过（这不废话嘛🤣）。

4 in运算符

检查某个键名是否存在的运算符in，适用于对象，也适用于数组。

注意：

1. 若数组的某个成员为空位（上面2小节有提到），则in运算符会返回false；
2. 若键名大于数组的length属性值，也会返回false。

测试如下：

var arr = [];
arr[100] = 'a';

100 in arr // true
1 in arr // false
120 in arr // false

5 遍历数组的方法

1. for...in循环
2. for循环
3. while循环
4. 数组的forEach()方法

由于for...in循环不仅会遍历所有的数字键，还会遍历非数字键，因此，推荐使用for循环或while循环进行数组的遍历。

var a = [1, 2, 3];

// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while循环:正向遍历
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}
// while循环:逆向遍历
var l = a.length;
while (l--) {
  console.log(a[l]);
}

数组的forEach()方法使用示例：

var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {
  console.log(color);
});