JS类数组转数组方法汇总

一.什么是类数组

• 拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)

• 不具有数组所具有的方法

  经常遇到的类数组：DOM 操作返回的 NodeList 集合、函数内部的 arguments 对象。。。

二.类数组转数组

假设类数组对象为arrayLikeObject。

1.for遍历

声明一个空数组，通过遍历伪数组把它们重新添加到新的数组中。

2.slice()方法

splice也能达到效果，不过会改变原始数组，慎用

Array.prototype.slice.call( arrayLikeObject )
或者
[].slice.call( arrayLikeObject )

3.spread扩展运算符

[...arrayLikeObject ]

【注意】扩展运算符背后调用的是遍历器接口（ Symbol.iterator ），如果一个对象没有部署这个接口，就无法转换。

比如：

let arrayLikeObject = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
[...arrayLikeObject ]
//报错TypeError: arrayLike is not iterable

附：为类数组部署 Iterator 接口

方式1:

let arrayLikeObject = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
console.log([...arrayLikeObject ])
//["a", "b", "c"]

方式2:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
[...document.querySelectorAll('div')] // 正常执行

4.Array.from()

Array.from( arrayLikeObject )

5.$.makeArray()

JQ中的内置方法。

$.makeArray( arrayLikeObject
)

最后

以上就是粗暴保温杯为你收集整理的JS类数组转数组方法汇总的全部内容，希望文章能够帮你解决JS类数组转数组方法汇总所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。