js类数组

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

类数组概念

类数组可以理解为是一种类似数组的对象，它拥有length属性。在javaScript中，有几种场景下我们拿到的是类数组数据，下面我们来看一下这几种场景：

1. arguments参数对象

function fn() {
  console.log(arguments)
}
fn('a', 'b', 'c')

上述代码中，我们执行一个函数，然后在函数中输出参数对象arguments，在控制台中打印的agruments对象值如下：

可以看到，arguments对象中，除了有传入的参数，还包括length属性，其表示参数的个数。

2. DOM操作中获取到的元素集合

在DOM操作中，获取dom实例元素的api返回的数据都是类数组对象，例如getElementsByName方法、getElementsByClassName方法、getElementsByTagName方法等。如下：

<div class="list">
   <div class="list-item">1</div>
   <div class="list-item">2</div>
   <div class="list-item">3</div>
</div>

<script>
  const divList = document.getElementsByClassName('list-item')
  console.log('divList', divList)
</script>

我们通过getElementsByClassName方法来获取class类名为list-item的元素集合，在控制台打印出来结果如下：

从输出结果可以看到，获取的DOM元素集合中，除了元素，还有length属性，其也是类数组对象。

类数组转化为数组方法

类数组虽然和数组一样都有length属性，但类数组并不能使用数组的实例方法，所以在开发过程中如果我们希望类数组能够当做数组来使用，就需要将其转化为数组，下面我们来看下将类数组对象转化成数组的方法：

1. Array.from()

ES6中新增了数组实例方法from()，其可以将类数组对象转化为数组，其用法如下：

function fn() {
  const arr = Array.from(arguments)
  console.log('arr', arr) // ['a', 'b', 'c']
}
fn('a', 'b', 'c')

上述代码中，通过Array.from(arguments)将arguments参数对象转化为了数组，可以从输出结果中看出。

2. 扩展运算符

function fn() {
  const arr = [...arguments]
  console.log('arr', arr) // ['a', 'b', 'c']
}
fn('a', 'b', 'c')

上述代码中可以看到，通过ES6中的扩展运算符[...arguments]将arguments参数对象转化为了数组。