数组构造器详解以及数组类型判断

小记：本文是对若离大佬的课程《JavaScript核心原理精讲》学习的总结，以及某些小知识点的补充，不喜勿喷。

数组是JavaScript中至关重要的角色，可以说，不深入了解数组，就不足以写好JavaScript。

数组构造器

创建数组时，有两种方式：

• 数组字面量： 从对象字面量的概念中延伸出来，因为数组也是引用类型(Object)的一种。
• 数组构造器：也被称为构造函数方法，通过new 构造函数的方式创建实例对象。

数组字面量

这种方式是我们在日常工作和学习中习惯和推荐采用的方式。

var a = [];  // 创建空数组

var b = [];
b.length = 5;  // 创建长度为5的empty数组 [empty X 5]

var arr2 = [1,2,3]; // 创建带有三个数字的数组

数组构造器

数组构造器根据参数长度的不同而有不同的处理方式：

• new Array(len)
  • len为数字时，表示创建一个长度为len且具有len个空元素empty的数组。len的值最大不能超过2的32次方，否则将会抛出RangeError，数组下标越界。
  • len不为数字时，表示创建一个长度为1且数组元素为len的数组。
• new Array(arg1,arg2,…)
  • 参数长度为0时，表示创建一个长度为0的空数组
  • 参数长度大于等于2时，表示创建一个数组元素按照参数传入顺序排列的数组。

var a = new Array();   // 创建空数组

var b = new Array(2);  // 创建长度为2的empty数组  [empty X 2]
var c = new Array('2') // 创建长度为1的数组  ['2']

var d = new Array(1,2,3,4)  // 创建数组 [1,2,3,4]

ES6新增构造方法

在ES6中，专门扩展了数组构造器，新增了两个方法：

• Array.of ：整体用的比较少
• Array.from：使用比较灵活

Array.of

用于将参数依次转化为数组中的一项，并返回新数组。

功能与数组构造器基本一致，仅在单个数字参数的处理上有区别。

Array.of(8)     // [8]
new Array(8)    // [empty X 8]
Array.of(8,5)   // [8,5]
Array.of('8')   // ['8']

针对单个数字参数，Array.of会把参数作为数组里的一项，而数组构造器会生成一个长度和参数相同的空数组。

Array.from

用于快速的基于其他对象创建新数组，其实是从类似数组的可迭代的对象中创建并返回新数组，不改变原对象。

三个参数：

• 类似数组的可迭代对象，必写
• 回调函数，用于对新数组进行处理并返回
• this作用域，指定回调函数中this的值；不需要指定this时候，回调函数可以写成箭头函数形式。

var obj = {0:'a',1:'b',2:'c',length:3};
let newArr = Array.from(obj,function(value,index){
    console.log(value,index,this,arguments.length);
    return value.repeat(3);
},obj);
let newArr = Array.from(obj,(value,index)=>value.repeat(3));
// newArr: ['aaa','bbb','ccc']

可迭代对象：

类似数组的可迭代对象，也是常说的类数组。但实质上只要该对象具有迭代器，就可以通过Array.from进行处理。

• 类数组
• String字符串
• Set
• Map

Array.from('abc');  // ['a','b','c']
Array.from(new Set(['abc','def']))  // ['abc','def']
Array.from(new Map([[1,'ab'],[2,'de']]));   // [[1,'ab'],[2,'de']]

数组类型判断

目前我们有至少6中方式可以判断一个变量是否为数组

var a=[];
a instanceof Array;  // true
a.constructor === Array;  // true
Array.prototype.isPrototypeOf(a);  // true
Object.getPrototypeOf(a) === Array.prototype;  // true
Object.prototype.toString.apply(a) === '[Object array]'   // true
// ES5提供
Array.isArray(a);  // true

Polyfill:如果使用的JS不支持Array.isArray,可以补充：

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}