js 类数组对象转换为数组对象

Posted on   |  

类数组对象(Array-like)

  1. 具有指向对象元素的数字索引下标以及 length 属性,告诉我们对象的元素个数
  2. 不具有诸如 push 、forEach 以及 indexOf 等数组对象具有的方法

常见的类数组对象

  • document.getElementsByClassName()
  • document.getElementsByTagName()
  • document.getElementsByName()
  • document.stylesheets
  • parentNode.chidlNodes
  • arguments
  • document.querySelectorAll()
  • 具有属性和长度的对象
1
2
3
4
5
var arrayObj = {
    0 : 'Benjamin01',
    1 : 'Benjmain02',
    length : 2
};

转换为数组对象

slice()方法可以将一个类数组(Array-like)对象/集合转换成一个数组. 你只需要用数组原型上的slice方法call这个对象,即Array.prototype.slice.call(Array-like); 同时也可以简单的使用 [].slice.call(arguments)来代替。 MDN slice

兼容

IE<9中不能使用Array.prototype.slice，对于NodeList等并非一个JavaScript object,IE9 中Array.prototype.slice.call(NodeList) 已经不再抛异常了，可以使用其将NodeList等转换为数组

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var 
parent = document.getElementById("parent"),
//此处childNodes在不同浏览器中的返回值不同
//Chrome、FF、IE9+ 长度为7(4个text + 3个div)
//IE6-IE8 长度为3(3个div)
nodes  = parent.childNodes,
slice  = Array.prototype.slice,
convertToArray = function(nodes){
	var arr = [];
	try{
		arr = slice.call(nodes);
		console.log("AAA");
	}catch(ex){
		for(var i = 0,ilen = nodes.length; i < ilen; i++){
			arr.push(nodes[i]);
		}
	}
	return arr;
}
console.log(convertToArray(nodes));

my demo

1
2
3
4
5
6
7
8
function makeArray(obj){
	return [].slice.call(obj);
}
var div_list = document.querySelectorAll('p'); // 返回 NodeList
var div_array = Array.prototype.slice.call(div_list); // 将 NodeList 转换为数组
div_array.push(123);
console.log(div_array);

参考链接