在前端开发中，有很多常见的伪数组，比如：
- 用getElementByTagName/ClassName/Name（）获得的HTMLCollection
- 用querySlector获得的nodeList
- 方法中的
arguments
那这导致很多数组的方法就不能用了，必要时需要我们将它们转换成数组，有哪些方法呢？
1. 传统for循环方法
新建一个空数组，遍历伪数组，将伪数组中的元素添加到新数组中去
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01 传统方式for循环</title>
</head>
<body>
</body>
</html>
<script>
var elements = document.getElementsByTagName('*')
console.log(Array.isArray(elements));
console.log(elements);
var array = toArray(elements);
console.log(Array.isArray(array));
console.log(array);
/**
* 将伪数组转换为真实数组的方法
*/
function toArray(arrayLike) {
const array = []
for (let i = 0; i < arrayLike.length; i++) {
array.push(arrayLike[i])
}
return array
}
</script>
运行结果
2. Array.prototype.slice.call()
通过调用数组的slice方法，改变slice中的指向，返回一个新的数组
代码演示
<script>
const elements = document.getElementsByTagName('*')
const array = Array.prototype.slice.call(elements)
console.log(Array.isArray(array));
console.log(array);
</script>
运行结果
3. ES6新增方法Array.from()
es6对数组的增强方法，可以将类数组转换为真实的数组
代码演示
<script>
const elements = document.getElementsByTagName('*')
const array = Array.from(elements)
console.log(Array.isArray(array));
console.log(array);
</script>
4. ES6的扩展运算符
使用es6的扩展运算符，能创建一个新的数组
代码演示
<script>
const elements = document.getElementsByTagName('*')
const array = [...elements]
console.log(Array.isArray(array));
console.log(array);
</script>
5. Array.prototype.concat.apply()方式
使用函数的apply方法，将伪数组当作concat的参数，由于apply会自动将伪数组拆开来当作concat方法的参数
代码演示
<script>
const elements = document.getElementsByTagName('*')
const array = Array.prototype.concat.apply([], elements)
console.log(Array.isArray(array));
console.log(array);
</script>
