欢迎访问我的个人博客 晓东的博客
通过 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;
}