类数组及其转换

什么是类数组

​ 宽泛点讲,一个具有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]
posted @ 2018-06-23 13:12  Guanine  阅读(221)  评论(0编辑  收藏  举报