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  )