将类数组转换成数组的方法

2023-11-13 08:18:04

类数组的概念：

类数组是指：和“数组”类似，并且在写法上跟数组一样，可以按照数组的方式访问每个类数组的元素，但是不能直接使用数组方法。比如arguments，函数的第一个参数是argument[0]，写法上跟数组一样，但是不是数组，他的原型是Object，获取dom元素的集合合适类数组。

操作类数组的方式

// 获取类数组中的元素
function abc(){
	for(var x = 0; x < arguments.length; x++){
		console.log(arguments[x]);
	}
}
abc(1, 3, 4,6, 8, 9);

可以看到类数组可以向数组一样通过遍历来得到类数组中的每一项的值。我们也可以看到类数组的下标也是从0开始，并且类数组也有length属性，表示类数组中元素的个数。虽然类数组和数组很相似，但是类数组并不能使用数组的方法进行操作，一般情况下我们想要类数组能够使用数组的一些截取添加等方法，需要把类数组转换成真的数组。我们可以通过一下几种方式信息转换：

类数组转换成数组的方法

通过遍历复制给新数组

var oDiv = document.getElementsByTagName('div');
var arr = [];
for(x in oDiv){
	arr.push(oDiv[x]);
}

上边的方式先定义一个空数组，然后通过遍历类数组对象，把类数组中的每一项push到空数组中，这样就得到了一个新的有类数组项组成的新数组。

通过数组的slice方法

function fun(){
	/*通过使用Array的原型上的clice方法调用*/
	// var args = Array.prototype.slice.call(arguments);
	/*通过数组示例的slice方法调用*/
	var args = [].slice.call(arguments);
	console.log(args);
}
fun(1, 2, 3, 4, 5, 6);

通过数组from方法

function fun() {
  let arr = Array.from(arguments);
  console.log(arr);
}
fun(1,32,43,4);

Array.from():是数组对象中的一个静态方法，是ES6新增的方法，他可以从类数组对象或者可迭代对象中创建一个新的数组实例。注意： IE 11（及更早版本）不支持from方法。
更多关于Array.from的介绍可以看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

通过使用ES6的展开用算符(…)

function fun() {
  let arr = [...arguments];
  console.log(arr);
}
fun(1,32,43,4);

扩展运算符实际上调用的是遍历器接口，如果一个对象没有部署此接口就无法完成转换。

我们也可以借助第三方类库提供的方法来转换

jquery的makeArray(obj)方法

// 通过使用makeArray方法，将获取的dom元素组转换成数组。
var arr = jQuery.makeArray(document.getElementsByTagName("div"));

码农公寓