类数组及其转换

Posted 2020-11-20 guanine

什么是类数组

? 宽泛点讲，一个具有length属性的对象就是类数组，但类数组顾名思义它只是像数组但又不是数组，所以它往往不具备数组自带的方法，如forEach(), push(), shift()等等

? 在javascript的世界里有许许多多的类数组，如NodeList, htmlCollection, NameNodeMap, DOMTokenList，还有函数中的arguments...它们都是具有length的对象

类数组转化成数组

? 上面说了类数组只是长得像数组但不具备好些数组所具有的方法，因此操作起来并不方便因此我们可以将他们转化为数组

// ES3,5
Array.prototype.slice.call(arrlike) //or apply
Array.apply(null, arrlike) // apply的第二个参数接受一个数组或者类数组

// ES6
Array.from(arrlike)

[...arrlike] // 前提是这个arrlike得具备迭代器接口[Symbol.iterator]。而以上三种有length即可

? 之前说了类数组是具有length属性的对象，其实这样定义并不确切。因为还有里面有要需要注意的地方，数组是以数值作为下标的，但是按照之前的定义类数组只是有length属性的话其实看起来不像是数组，它的属性有可能不是数值形式的字符串。当然数组也是可以定义非数值类型的字符串作为属性的，毕竟数组本身也是对象，但是它的主要还是以数值下标的形式来存储数据，且那些属性并不被计入length中

? 因此类数组在转化为数组的时候，如果对象中的属性并不是数值形式的字符串，或者数值要大于等于length，对应的数据都是不会被存储到创建的数组中的

空缺的是以undefined填充而不是empty空单元

const arrlike1 = { 0: ‘a‘, 1: ‘b‘, ‘2‘: ‘c‘, length: 3 }
console.log(Array.from(arrlike1)) // [‘a‘, ‘b‘, ‘c‘]

const arrlike2 = {  0: ‘a‘, ‘a‘: ‘b‘, ‘2‘: ‘c‘, length: 3 }
console.log(Array.from(arrlike2)) // [‘a‘, undefined , ‘c‘]

const arrlike3 = {  1: ‘a‘, length: 1 }
console.log(Array.from(arrlike3)) // [undefined]