一文搞懂前端的所有类数组类型

鴉

前面博文有介绍JavaScript中数组的一些特性，通过对这些数组特性的深入梳理，能够加深我们对数组相关知识的理解，详见博文：
一文搞懂JavaScript数组的特性
其实，在前端开发中，除了数组以外，还有一种类似数组的对象，一般叫做类数组、或伪数组，也是我们需要掌握的知识点。
类数组是什么？

首先，我们先尝试给类数组加个简单的定义：拥有length属性的对象(非数组)。类数组的核心特征就是拥有length属性，拥有length属性又不是真正数组的对象，基本可以被认定为类数组。
虽然这个定义很简单，只突出了length属性，但类数组的基本特点，我们还是可以总结如下：

• 拥有length属性
  
• length属性非动态值，不会随元素变化而变化
  
• 可以使用数字索引下标访问属性元素
  
• 不是数组，没有数组对应的各种方法
  
• 可以使用for语句等进行循环遍历
  
• 能够通过一定方式转换成真正的数组
  

创建类数组的对象

根据以上类数组的特点，我们可以自己创建类数组的对象，也比较简单，只需要拥有length，如下所示：

1. const al = { 0: 111, 1: 222, 2: 333, length: 3 }
2. for (let i = 0; i < al.length; i++) {
3.   console.log(al[i])
4. }
5. // 111
6. // 222
7. // 333

复制代码

以上代码，创建了一个length属性为3的对象，通过for循环遍历对象，并且下标输出对应的值。
length属性并不会动态添加，比如我们给al对象增加一个属性，但length值仍为3：

1. al[3] = 444
2. console.log(al.length) // 3

复制代码

如果把该类数组对象转换成一个真正的数组后，就可以进行数组操作了。

事实上，我们可以省略其他属性，只保留length，同样可当做一个类数组使用：

1. const al = { length: 3 }

复制代码

虽然我们可以通过类似这种方式，自己创建类数组，但实际开发过程中，几乎没人这么处理。
真正在前端开发中，接触到的类数组，都是JavaScript语言或者Web环境下提供的各种类数组的对象。
在介绍这些类数组对象之前，我们先看下类数组对象如何才能转换成数组。
如何将类数组转换成数组

类数组只是类似数组的对象，缺少很多相应的方法，有时候我们可能需要把类数组转换成数组，才能更好的操作，这时候就需要找到方便有效的转换方式。
当前常用的转换方式，大致有如下几类，我们一个个介绍。
Array.from()

首先是ES6提供的新的数组静态方法：Array.from，它用于从一个类数组或可迭代对象中创建一个新的数组。基本上，只要拥有length属性的对象，都能被Array.from转换成数组。
语法：Array.from(arrayLike, mapFn, thisArg)。
三个参数说明：

• arrayLike：类数组对象，或可迭代对象
  
• mapFn：可选参数，新数组会经过该函数处理后返回
  
• thisArg：可选参数，执行mapFn时指定的this指向
  

下面看一个示例：

1. const al = { 0: 111, 1: 222, 2: 333, length: 3 }
2. const arr = Array.from(al)
3. console.log(arr) // [111, 222, 333]
4. console.log(arr.length) // 3
5. console.log(Array.isArray(arr)) // true

复制代码

以上代码，我们自定义了一个拥有length属性的对象，然后通过Array.from方法进行转换，得到了一个长度为3的新数组。
这种方式简单方便，在当前前端开发的绝大多数情况下，都应该是首选。
Array.prototype.slice.call()

在ES6没出来之前，如果想较好的进行类数组的转换，一般使用的是该方法：Array.prototype.slice.call()。
它基于数组的slice()方法，把执行时的this指向类数组对象，让类数组对象像数组一样使用slice()方法返回一个新的数组，因此拥有length属性的类数组对象都能被转换成数组。

1. const al = { 0: 111, 1: 222, 2: 333, length: 3 }
2. const arr = Array.prototype.slice.call(al)
3. console.log(arr) // [111, 222, 333]

复制代码

以上代码，与Array.from定义同样的类数组对象，通过Array.prototype.slice.call转换，效果是一样的。
其他方式

以上两种方式，是最正确有效的转换，推荐日常使用。
除此以外，还有其他的方式，但各有缺陷，要么较复杂、要么对部分类数组对象不适用，所以并不太推荐。

• for循环处理
  定义一个新的空数组，通过循环遍历类数组对象的属性，将类数组对象的每一个属性元素值都添加到新数组中。
  这种方式就显得相对麻烦一些。
  
• 扩展运算符(...)
  扩展运算符主要作用于可迭代对象，JavaScript中的集合(数组、Set、Map)都是可迭代对象，另外字符串和arguments也都是。
  扩展运算符对于不可迭代对象，会报错。
  

1. [...'hello'] // ['h', 'e', 'l', 'l', 'o']
2. [...{ length: 3 }] // Uncaught TypeError: {(intermediate value)} is not iterable
3. Array.from({ length: 3 }) // [undefined, undefined, undefined]

复制代码

以上代码，通过扩展运算符，字符串能被转换成数组，但自定义类数组对象 { length: 3 } 则不行，并报错；而使用Array.from则转成了拥有3个 undefined 元素的数组。
类数组对象

前端开发中最常见且被认可的类数组对象，是函数的arguments参数对象，另外字符串也是一个类数组对象，其他的还有各种Web环境提供的API。
如果把这些分成两类的话：

• JS对象
  属于JavaScript语言的对象，在nodejs中也存在。
  如arguments、字符串、TypeArray、自定义类数组等。
  
• Web对象
  依赖于Web环境(一般是浏览器)的对象，不属于JavaScript语言。
  如FileList、DOM列表对象、数据存储(如localStorage、sessionStorage)等。
  

下面我们就一一介绍下这些类数组对象。
JavaScript类数组对象

arguments

arguments是JS中函数内部的一个对象，用于处理不定数目的参数，是一个类数组对象。
在ES6推出之前，arguments的使用还是非常广泛的，但在ES6推出默认参数和扩展参数后，它的使用就减少了。
通过下面的示例，转成数组：

1. function test () {
2.   console.log(Array.prototype.toString.call(arguments))
3.   console.log(Array.from(arguments))
4.   console.log([...arguments], Array.prototype.slice.call(arguments))
5. }
6. test(23)
7. // [object Arguments]
8. // [23]
9. // [23] [23]

复制代码

以上代码可知，该对象存在独特的类型判断 Arguments，可用扩展运算符处理arguments对象。

注意，箭头函数内部不存在arguments对象。

字符串

JavaScript中的字符串也是一个类数组对象，它拥有length属性，可以通过下标数字索引访问，也可以转换成数组，字符串中的每一个字符都变成新数组的一个元素。

1. const str = 'abc'
2. str.length // 3
3. str[1] // 'b'
4. Array.from(str) // ['a', 'b', 'c']
5. [...str] // ['a', 'b', 'c']

复制代码

字符串拥有一个实例方法 split，可以将字符串按照传入的分隔符进行处理，返回一个分割出来的每个子字符串都作为元素的数组：

1. 'abc'.split('') // ['a', 'b', 'c']
2. 'abc'.split('b') // ['a', 'c']

复制代码

以上代码，
当使用空字符做分隔符的时候，就是将每一个字符都分割成数组元素，与类数组的转换方式相同。
当使用 b 字符做分隔符的时候，返回的数组元素就只有2个了。
由于split操作分隔符的灵活性，可以给我们处理字符串带来方便，所以常用该方法，而少用类数组转换。
TypeArray类型数组

类型数组也是一种类数组对象，提供了访问内存缓冲区中二进制数据的机制，它拥有11个对象，如Uint8Array、Uint8ClampedArray、Int32Array、Float64Array等等。具体知识可见博文前端二进制API知识总结
类型数组都拥有和数组相同的大部分用于遍历的实例方法，但它不是真正的数组，它不能动态变化，不支持push、pop、shift、unshift等修改数组的方法，类型判断也不是数组：

1. const u8 = new Uint8Array()
2. u8 instanceof Uint8Array // true
3. Array.isArray(u8) // false
4. [...u8] // []
5. Array.from(u8) // []

复制代码

以上代码，可以看出，类型数组并不是真正的数组，但可以通过扩展运算符转换成数组(其他方式也行)。
当然，类型数组的使用场景一般在于处理二进制数据，能够遍历读取数据做一些操作即可，并不太需要做转换。
其他JS类数组对象

• 自定义类数组对象
  前面已有介绍，开发中几乎不用。
  
• function
  函数作为一个对象，也拥有length属性，所以它也可以转换成数组。
  函数的length属性表示的是参数的个数，转成数组后，就表示有几个元素，但元素值都为undefined。
  1. const fun = (al) => {}
  2. fun.length // 1
  3. Array.from(fun) // [undefined]

  复制代码

Web-API类数组对象

FileList

FileList对象是一个我们常常用到的类数组对象，主要是在文件上传的过程中，我们选择文件后，前端用于接收文件信息的对象，就是它，可以读取到单个或多个文件数据。
FileList是一个拥有length属性并且属性索引值是数字的对象，它的每一个子成员属性都是一个 File 对象，处理文件信息。

1. inputFile.addEventListener('change', (e) => {
2.   const files = e.target.files
3.   console.log(Array.from(files))
4. })
5. // [File]

复制代码

以上代码，就是监听一个上传控件的change事件，读取到对应的文件列表，并转换输出为数组，元素为File对象。

一般也用不着转换，直接遍历读取FileList即可。

DOM中类数组

在Web开发中，DOM操作也有很多类数组对象，如元素集合HTMLCollection、节点NodeList等等。
HTMLCollection

HTMLCollection来自于页面的document等节点元素对象，主要是各种属性：

• document.links：返回所有链接元素
  
• docuement.forms：返回所有表单元素
  
• document.images：返回所有图像元素
  
• document.scripts：返回所有脚本元素
  
• document.embeds：返回所有embed嵌入对象
  
• Element.children：返回当前节点的所有子元素
  

1. const links = document.links
2. Object.prototype.toString.call(links) // '[object HTMLCollection]'
3. const linkArr = Array.from(links) // []
4. Array.isArray(linkArr) // true

复制代码

以上代码，读取了页面所有的链接，返回的一个HTMLCollection类数组对象，可以转换成对应的数组，当前页面并不存在链接，所以返回的是空数组。
NodeList

通过以下方法或属性获取的节点列表(NodeList)：

• getElementsByTagName：返回所有拥有指定HTML标签名的节点
  
• getElementsByClassName：返回所有拥有指定class类属性名的节点
  
• getElementsByName：返回所有拥有指定name属性的节点
  
• querySelectorAll：返回所有匹配给定选择器的节点
  
• document.childNodes：返回所有子节点
  

1. const divList = document.querySelectorAll('div')
2. Array.isArray(divList) // false
3. Object.prototype.toString.call(divList) // '[object NodeList]'
4. divList.length // 4
5. const divArr = [...divList] //  [div, div#clickInput, div#name, div#dropArea]
6. Array.isArray(divArr) // true

复制代码

以上代码，通过 querySelectorAll 读取了页面上所有的div，得到了一个NodeList对象，是一个类数组对象，可以通过扩展运算符转换成一个真正的数组。
其他DOM相关类数组对象

以下也是DOM操作中，常见的一些类数组对象：

• document.styleSheets：返回所有样式表(StyleSheetList)
  
• attributes：返回节点元素的所有属性(NamedNodeMap)
  
• dataset：返回节点元素上的所有附加数据(DOMStringMap)
  
• classList：返回节点元素上的所有样式类(DOMTokenList)
  

DOM中的对象都是由DOM-API提供给JavaScript调用的，因为不止JS要用，所以使用类数组较合适。

其他Web类数组对象

• window
  window对象也拥有length，所以它也是类数组对象？
  是的，window的length属性表示页面拥有的frame/iframe的数量。
  所以也可以转换成数组：
  1. window.length // 0
  2. Array.from(window) // []

  复制代码
  当前页面没有frame，长度为0，转换成了空数组。
  
• DataTransferItemList
  用于从拖拽或粘贴事件中读取到的 Datatransfer 对象的一个只读属性 items，同一级的只读属性还有 files，也是一个类数组对象 FileList，上面已有介绍。
  在粘贴事件中，可以通过该对象读取到粘贴的数据内容。
  
• 数据存储
  浏览器中的数据存储机制，如 sessionStorage 和 localStorage，他们其实也是类数组对象，拥有length属性，可以进行转换。
  1. localStorage.length // 2
  2. Array.from(localStorage) // [undefined, undefined]

  复制代码
  以上代码，就是对localStorage的处理，拥有两个值，但由于是字符串键值对，无法转成数字索引，所以数组两个元素都是 undefined。
  

总结

本文描述了什么是类数组对象，它的主要特点，以及如何创建一个类数组对象，还有将类数组对象转换成真正数组的几种方式，接着也介绍了前端开发中可能会遇到的已有的各种类数组对象。
事实上，绝大部分的类数组对象是不需要专门去转换为数组的，直接遍历操作即可，但深入掌握这些类数组的知识，也是前端开发中不可少的。

来源:https://www.cnblogs.com/jimojianghu/p/17292292.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！