前端小贴士 -- 类数组

一、什么是类数组？

类数组主要指的是一个对象含有数字下标属性值和length属性并且length的值为正整数。

在JavaScript中常见的类数组对象有：NodeList（DOM元素集合）和arguments。

const s = document.querySelectorAll('li')
Array.isArray(s) === false // true


function demo () {
  Array.isArray(arguments) === false // true
}
demo(1, 2, 3)

它们虽然都可以通过下标访问元素值，但是无法使用Array.prototype上的方法。

二、判断类数组

判断类数组的标准主要有以下几点：

类数组是一个对象。
类数组含有长度属性，并且该属性值是一个正整数。

  function isArrayLike (o) {
    if (
      o && typeof o === 'object' && 
      isFinite(o.length) && 
      o.length >= 0 && 
      o.length < Math.pow(2, 32) && 
      o.length === Math.floor(o.length)) {
      return true
    }
    return false
  }

三、类数组转化为数组

前面提到了类数组无法使用Array.prototype上的方法，但是在实际开发过程中，可能需要在类数组上使用这些方法，那么就得将类数组转化为数组。

1、ES5中处理的方法

利用apply或者call方法：

  const a1 = Array.prototype.slice.call(s)
  Array.isArray(a1) // true

2、ES6中的Array.from()

在ES6中直接提供了类数组转化为数组的方法：

  const a2 = Array.from(s)
  Array.isArray(a2) // true

3、ES6扩展运算符

另外ES6中的扩展运算符同样可以将类数组转化为数组：

  const a3 = [...s]
  Array.isArray(a3) // true

四、总结

在实际开发中遇到类数组的常见场景有：NodeList和arguments。不过进入ES6语法时代，将类数组转化为数组的方式不再那么晦涩难懂，而且随着ES6中大量新增特性，类数组处理的场景也大大减少，例如函数参数的新语法，减少了arguments的使用：

function demo (...a) {
  Array.isArray(a) // true
  console.log(a) // [1, 2, 3]
}

demo(1, 2, 3)

但是类数组依旧是JavaScript中很重要的概念。

----------------------------

关注「漫谈大前端」

不断成长为一名优秀的前端开发工程师

----------------------------

您还可以在这些地方找到我：