类数组及其转换

Posted guanine

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了类数组及其转换相关的知识,希望对你有一定的参考价值。

什么是类数组

? 宽泛点讲,一个具有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]

以上是关于类数组及其转换的主要内容,如果未能解决你的问题,请参考以下文章

java遍历类的字段属性及其字段值

八大数据类型及其转换

web代码片段

如何从片段内的列表视图打开链接网址?

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。