JS类数组转数组(Array.prototype.slice.call(arrayLike,0))

178 阅读 0 评论 118 点赞

我是靠谱客的博主刻苦电脑，这篇文章主要介绍JS类数组转数组(Array.prototype.slice.call(arrayLike,0))，现在分享给大家，希望可以做个参考。

欢迎访问我的个人博客晓东的博客

通过 Array.prototype.slice.call(arrayLike，0) 方法可以讲类数组转换为数组，方便在JS中进行操作

什么是类数组？

var nodeList=document.querySelectorAll("div");

这个 nodeList 就是一个类数组。

var nodeList2 = document.getElementById('ul1').childNodes;

这个 nodeList2 也是一个类数组。
我们可以用 nodeList2[0] 取到第一个子元素。但是当我们用 console.log(nodeList2 instanceof Array) 返回 false 也就是说它并不是数组的实例，也就不是数组。

通过 Array.prototype.slice.call(arrayLike,0) 转换为数组

Array.prototype.slice表示数组的原型中的slice方法。注意这个slice方法返回的是一个Array类型的对象；

虽然 arrayLike 表面上以数组形式来表示，但实际上没有原生数组slice的功能，这里使用 call() 方法算是对 arrayLike 对象不完整数组功能的修正。

var nodeArray = Array.prototype.slice.call(nodeList,0);
var nodeArray2 = Array.prototype.slice.call(nodeList2,0);

这时，通过调用 console.log(nodeArray2 instanceof Array) 返回 true，说明已经转换为了 Array 对象。

IE8 及更早版本浏览器 Node 类型节点存在的问题

由于 IE8 及更早版本浏览器将 NodeList 实现为一个 COM 对象，而我们不能像使用 JavaScript 对象那样使用通过 document.getElementById(‘ul1’).childNodes 这种方式获取的 NodeList 对象。因此，在 IE8 及更早的浏览器中使用Array.prototype.slice.call(nodeList2,0) 会报错，必须手动枚举所有成员；下列代码是兼容所有浏览器的写法

function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);
}catch(ex){
array = new Array();
for(var i=0; len=nodes.length; i<len; i++){
array.push(nodes[i]);
}
}
return array;
}