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

小记:本文是对若离大佬的课程《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]';
  };
}
    原文作者:前端SkyRain
    原文地址: https://blog.csdn.net/tianqingmuyu/article/details/118854178
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞