走近——JavaScript之 类数组对象

什么是类数组对象

类数组对象：

只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，但是不能使用数组中的方法。

提到类数组对象，我们就不得不就要提一下arguments对象，arguments就是一个典型的类数组对象，举个例子：

function fn(name, age, id) {
  console.log(arguments[0])  //name
  console.log(arguments)  //[Arguments] { '0': 'name', '1': 'age', '2': 'id' }
  console.log(arguments.length)  //3
}
fn('name', 'age', 'id')

由此可以看出，类数组对象可以和数组一样通过直接使用数组的索引值来操作数组的元素，还拥有像数组一样的length。那么类数组对象和数组的区别在哪里呢？

类数组对象和数组的区别

类数组对象和数组的区别：

类数组对象不能直接使用数组的方法，否则会报错 举个例子：

function fn(name, age, id) {
  console.log(arguments.map)  //TypeError: arguments.map is not a function
  console.log(arguments.slice())  //TypeError: arguments.slice is not a function
}
fn('name', 'age', 'id')

怎么才能让类数组对象使用数组的方法呢？我们通常有两种方法：类数组对象通过间接调用数组的方法和直接将类数组对象转换成数组。

类数组对象间接调用数组的方法

我们通常使用 Function.call 、 Function.apply 或者Function.bind 方法来间接调用。

var arrayObject = {
  0: 'name',
  1: 'age',
  2: 'id',
  length: 3
}
console.log(Array.prototype.map.call(arrayObject, (item) => {
  return item
}))
//[ 'name', 'age', 'id' ]

如上所述，通过Function.call 或者 Function.apply 方法可以使用数组的map方法。

类数组对象转换成数组

1.Array.from()

var arrayObject = {
  0: 'name',
  1: 'age',
  2: 'id',
  length: 3
}
console.log(Array.from(arrayObject))  //[]

由输出可以看出，使用Array.from()方法可以将类数组对象 arrayObject 转换成数组。

2.借用 数组的 slice 方法

var arrayObject = {
  0: 'name',
  1: 'age',
  2: 'id',
  length: 3
}
console.log(Array.prototype.slice.call(arguments))  //[]

由输出可以看出，借用 数组的 slice 方法可以将类数组对象 arrayObject 转换成数组。

3. [...类数组对象]

var arrayObject = {
  0: 'name',
  1: 'age',
  2: 'id',
  length: 3
}
console.log([...arrayObject])  //[]

由输出可以看出，借用 数组解构的 方法可以将类数组对象 arrayObject 转换成数组。

最后

这只是我个人我学习到类数组对象总结出来的些知识点，作为一个前端初学者，如果有任何写的不对的地方，希望大家及时指正。如果对您有一点点帮助，希望您给个赞。