伪数组转为真数组

最新推荐文章于 2025-07-18 14:28:01 发布

weixin_30917213

最新推荐文章于 2025-07-18 14:28:01 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoniaohhl/p/11242047.html

本文详细介绍了在JavaScript中如何将伪数组转换为真数组，包括使用ES5和ES6的不同方法，通过具体实例展示了转换过程及后续的数组操作。

伪数组转为真数组

对DOM元素进行map、forEach操作时候需要进行遍历，伪数组遍历会报错：'elem.map is not a function',为了避免这个问题，需要进行转换。

(1) ES5 转为真数组

Array.prototype.slice.call(元素对象)

let elem1 = Array.prototype.slice.call(elem)

(2) ES6 转为真数组

Array.from（元素对象）

let elem2 = Array.from(elem)

(3) 例子

<ul>
    <li class="a" ></li>
    <li class="a" ></li>
    <li class="a" ></li>
    <li class="a" ></li>
    <li class="a" ></li>
</ul>

<script>

/* 获取li元素*/
let elem = document.getElementsByClassName('a')

/* 这样写是错误的,因为是伪数组*/
elem.map((item,index,elem) => {
    console.log(item +'---'+index + '----'+elem) 
    /*elem.map is not a function*/
})

// （1）es6 转为真数组
let elem1 = Array.from(elem)
// （2）es5 转为真数组
let elem2 = Array.prototype.slice.call(elem)

console.log(elem)
console.log(typeof elem)
console.log(elem1)
console.log(elem2)

elem1.map((item,index,elem1) => {
    console.log(item +'---'+index + '----'+elem1)
})
elem2.map((item,index,elem2) => {
    console.log(item +'---'+index + '----'+elem2)
})

</script>