【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）

---

一. 引用数据类型中的数组

1.1 概述

数组是有序列表，是存放多个值的集合。在数组中，值被称为元素，值可以是任意的数据类型。通过索引来访问元素，索引从0开始。数组长度通过length获取。
本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

1.2 初始化

1.2.1 字面量

var arr = [5,64,565,12];

1.2.2 构造函数模式

var arr = new Array(); 
// 等价于：var arr = [ ];

var arr = new Array(1,2,3,4); 
// [1,2,3,4]

1.3 访问

var arr = [1, 2, 3];
arr.0   // SyntaxError
arr[0]  // 1

数组只有一种访问方法，那就是方括号[ ]。arr.0的写法不合法，因为单独的数值不能作为标识符。所以，数组成员只能用方括号arr[0]表示（方括号是运算符，可以接受数值）。

1.4 length属性

数组都会有一个不可枚举，但可读可写的length属性，用来返回数组的元素数量。该属性是一个动态的值：length = 数组最大下标 + 1

['a', 'b', 'c'].length // 3

我们在访问数组元素时，如果索引小于数组的长度，则正常返回对应项的值；如果索引大于数组的长度，数组自动增加到该索引值加1的长度,不会有数组越界异常，增加的元素都为空，值为undefined。

var arr = [5,2,0];

console.log(arr[0]);      // 5
console.log(arr[100]);    // undefined
console.log(arr.length);  // 101

length属性可读可写，意味着可以通过设置length的值从数组的末尾移除项或向数组中添加新项（数组的大小是可以动态调整）。

var arr = [5,2,0];

arr.length = 5;
console.log(arr);
// [5,2,0,<2 empty items> ]

arr.length = 2;
console.log(arr);
// [5,2]

1.5 数组遍历

for-in循环不仅可以遍历对象，也可以遍历数组，这更加说明了数组是一种特殊对象。

var a = [1, 2, 3];

for (var i in a) {
   
  console.log(a[i]);
};
// 1
// 2
// 3

数组的遍历还可以考虑使用for循环或while循环，之后还有两个数组原型的实例方法：
Array.prototype.forEach()和Array.prototype.map()

1.6 类数组对象

类似如下形式：属性键名为0,1,2…，有length属性的对象就被称为类数组对象。

{
    0: 'a', 1: 'b', length: 2 }

虽然它看起来真的很像数组，但是他们实质上并不是，只是像而已。所以并不能调用数组的实例方法。而且它的length属性也不是动态的。

1.6.1 四种典型的类数组对象

1. 函数的arguments对象；

function args() {
    return arguments }
var arrayLike = args('a', 'b');

arrayLike[0] // 'a'
arrayLike.length // 2
arrayLike instanceof Array // false

2. 以及之后的DOM元素集：

var div = document.getElementsByTagName("div");
console.log(div);

3. 字符串：

'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false

4. 其实还有一个：之后学习jQuery的时候，jQuery对象$("div")也是典型的类数组对象。

console.log($('div'));

1.6.2 类数组对象转化成真数组的方法

1. Array.prototype.slice()

Array.prototype.slice.call({
    0: 'a', 1: 'b', length: 2 })
// ['a', 'b']

Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

2. Array.from()

Array.from("zevin");
// ['z','e','v','i','n']
Array.from({
   "0":"zevin","1":"code",length:2});
// ['zevin','code']

---

拓展一点

其实哈，类数组对象也可以不转化成真数组，就可以调用Array的原型实例方法。
通过cal()方法，可以把数组的forEach()方法嫁接到类数组对象上面调用。以字符串为例：

Array.prototype.forEach.call('zevin', function (str) {
   
  console.log(str);
});

// z
// e
// v
// i
// n

---

二. Array对象

Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。

var arr = new Array(2);
arr.length // 2
arr // [ <2 empty items> ]

2.1 Array静态方法

Array.isArray()

判断一个变量是否是数组。

var arr = [];
console.log(Array.isArray(arr));
// true

Array.from()

将一个可迭代的对象（类数组对象，字符串）转换成数组。

Array.from("zevin");
// ['z','e','v','i','n']
Array