1.定义
一个拥有 length属性和若干索引属性的对象就可以被称为类数组对象,类数组对象和数组类似 但是不能调用数组的方法。常见的类数组对象有arguments和 DOM方法的返回 结果,还有一个函数也可以被看作是类数组对象,因为它含有 length属性值,代表可接收的参数个数。
2.常见的类数组转换为数组的方法
常见的将类数组转换为数组的方法有几种,以下是其中的几种常见方法:
-
Array.from() 方法:
Array.from()方法可以将类数组或可迭代对象转换为数组。它接受一个类数组或可迭代对象作为参数,并返回一个新的数组。- 示例:
var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; var array = Array.from(arrayLike); console.log(array); // ['a', 'b', 'c'] -
Array.prototype.slice.call() 方法:
- 通过调用
Array.prototype.slice方法并传入类数组对象作为this,可以将类数组转换为数组。 - 示例:
var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; var array = Array.prototype.slice.call(arrayLike); console.log(array); // ['a', 'b', 'c']补充:为什么Array.prototype.slice.call()可以把类数组转换为数组
Array.prototype.slice.call()可以将类数组转换为数组的原理是利用了 JavaScript 中的函数调用和this绑定的特性。 在 JavaScript 中,每个函数都是一个对象,函数对象有一个内置的方法call(),它允许你调用一个函数,并指定函数内部的this指向。当你调用一个函数时,JavaScript 引擎会创建一个活动记录(activation record)来保存函数的调用信息,其中包括this的值。 当你调用Array.prototype.slice.call()时,实际上是调用了slice()方法,并且将类数组对象作为slice()方法内部的this对象。由于slice()方法可以用来截取数组的一部分,并返回一个新的数组,因此它的执行结果就是将类数组对象转换为数组。 这种方法之所以能够成功转换类数组对象,是因为slice()方法内部会根据this指向的对象的length属性来确定截取的范围,而类数组对象通常具有length属性,所以可以正确地将类数组对象转换为数组。 总的来说,Array.prototype.slice.call()的核心思想是利用函数调用时的this绑定机制,将类数组对象作为slice()方法的this对象,从而实现类数组到数组的转换。 - 通过调用
-
展开运算符(Spread Operator):
- 使用展开运算符
...可以将类数组转换为数组。 - 示例:
var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; var array = [...arrayLike]; console.log(array); // ['a', 'b', 'c'] - 使用展开运算符
-
for 循环遍历:
- 使用 for 循环遍历类数组对象,并将每个元素添加到新数组中。
- 示例:
var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; var array = []; for (var i = 0; i < arrayLike.length; i++) { array.push(arrayLike[i]); } console.log(array); // ['a', 'b', 'c'] -
使用 Array.prototype.concat.apply() 方法:
- 可以通过调用
Array.prototype.concat()方法,传入类数组对象作为参数,将其与一个空数组连接起来,从而生成一个新的数组。 - 示例:
Array.prototype.concat.apply([],arrayLike) - 可以通过调用
-
使用 Array.prototype.splice.call(arrayLike,0) 方法:
Array.prototype.splice.call(arrayLike,0)