在前端開發(fā)中，有很多常見的偽數(shù)組，比如：
- 用getElementByTagName/ClassName/Name（）獲得的HTMLCollection
- 用querySlector獲得的nodeList
- 方法中的
arguments
那這導致很多數(shù)組的方法就不能用了，必要時需要我們將它們轉換成數(shù)組，有哪些方法呢？
1. 傳統(tǒng)for循環(huán)方法
新建一個空數(shù)組，遍歷偽數(shù)組，將偽數(shù)組中的元素添加到新數(shù)組中去
代碼演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01 傳統(tǒng)方式for循環(huán)</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);
/**
* 將偽數(shù)組轉換為真實數(shù)組的方法
*/
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()
通過調用數(shù)組的slice方法，改變slice中的指向，返回一個新的數(shù)組
代碼演示
<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對數(shù)組的增強方法，可以將類數(shù)組轉換為真實的數(shù)組
代碼演示
<script>
const elements = document.getElementsByTagName('*')
const array = Array.from(elements)
console.log(Array.isArray(array));
console.log(array);
</script>
4. ES6的擴展運算符
使用es6的擴展運算符，能創(chuàng)建一個新的數(shù)組
代碼演示
<script>
const elements = document.getElementsByTagName('*')
const array = [...elements]
console.log(Array.isArray(array));
console.log(array);
</script>
5. Array.prototype.concat.apply()方式
使用函數(shù)的apply方法，將偽數(shù)組當作concat的參數(shù)，由于apply會自動將偽數(shù)組拆開來當作concat方法的參數(shù)
代碼演示
<script>
const elements = document.getElementsByTagName('*')
const array = Array.prototype.concat.apply([], elements)
console.log(Array.isArray(array));
console.log(array);
</script>
