JavaScript类数组对象转数组详解：方法、原理与类型判断

类数组对象转数组的方法与原理

本文通过具体实例解析JavaScript中将类数组对象转换为标准数组对象的技术方案，供开发者参考学习。

首先明确类数组对象的定义特征：

该类对象具备length属性，支持通过下标索引进行访问；

但缺乏标准数组对象所具备的各类操作方法。

其次探讨将类数组对象转换为数组对象的必要性：

标准数组对象Array提供了丰富的内置方法，包括shift、unshift、splice、slice、concat、reverse、sort等；ES6进一步扩展了功能，新增forEach、isArray、indexOf、lastIndexOf、every、some、map、filter、reduce等方法。由于类数组对象无法直接调用上述数组方法，将其转换为数组后可直接利用这些高效工具，显著提升开发效率。如需了解更多JavaScript数组方法，可参考：https://www.jb51.net/article/144359.htm

以下是将类数组对象转换为数组对象的几种常用实现方式：

1) 利用 Array.prototype.slice.call(arrayLike) 或 Array.prototype.slice.call(arrayLike, 0) 或 [].slice.call (arrayLike) 或 [].slice.call (arrayLike, 0)

var div1 = Array.prototype.slice.call(document.querySelectorAll('div'), 0);
var div2 = Array.prototype.slice.call(document.querySelectorAll('div'));
var div3 = [].prototype.slice.call(document.querySelectorAll('div'), 0);
var div4 = [].prototype.slice.call(document.querySelectorAll('div'));

2) 使用 Array.from(arrayLike)

var divs = Array.from(document.querySelectorAll('div'));

3) 通过原生JavaScript代码手动转换

var length = arrayLike.length;
var arr = [];
for (var i = 0; i < length; i++) {
  arr.push(arrayLike[i]);
  return arr;
}

JavaScript数组类型判断方法解析

此外，还需掌握如何准确判断一个对象是否为数组：

使用typeof运算符无法准确判断对象是否为数组，因为typeof arr返回的结果是object而非array。

1) 使用 arr instanceof Array 会返回true

2) 使用 arr.constructor == Array 会返回true

说明：使用instanceof和constructor判断数组类型存在局限性，主要问题在于其假设环境中只有一个全局执行上下文。若网页包含多个框架，则存在多个独立的全局执行环境，进而导致存在多个不同版本的Array构造函数。当数组从一个框架传递至另一个框架时，传入的数组与目标框架中原生创建的数组拥有各自独立的构造函数，此时object.constructor == Array 会返回false。

根本原因：Array属于引用类型数据，传递过程中仅传递引用地址。每个页面的Array原生对象指向的地址不同，子页面声明的Array对应其自身的构造函数，而父页面判断时使用的Array对象不等于子页面的Array对象。

3) 使用 Array.isArray(arr) 方法会返回true

ES5引入了Array.isArray()方法，其核心目的是：最终确定一个值是否为数组，无论该数组在哪个全局环境中创建。

4) 使用 Object.prototype.toString.call(arr) === "[object Array]" 返回true

这是判断对象是否为数组的最简洁方法。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript数据结构与算法技巧总结》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

希望本文所述内容对大家JavaScript程序设计有所帮助。