关于伪数组及和数组及转换方法（逐渐补充）基于Vue

最新推荐文章于 2024-08-26 22:41:37 发布

console.log('D')

最新推荐文章于 2024-08-26 22:41:37 发布

阅读量622

点赞数

分类专栏： js 文章标签： vue.js

本文链接：https://blog.csdn.net/i_am_father_for_/article/details/124769903

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中数组与伪数组（如HTMLCollection）的概念，介绍了它们的数据类型、特点，并展示了如何将伪数组转换为真正的数组以便使用数组方法。重点讲解了`typeof`结果、`Array.prototype.slice.call()`和`Array.from()`的用法。

摘要由CSDN通过智能技术生成

数组的数据类型是Array

let Arr1=['a','b','c']
console.log(typeof Arr1)

输出结果：Array

伪数组的数据类型是Object

具体的来说：伪数组是一个对象、具有length属性、按照索引方式存储数据、不具有数组的push，pop等方法…

<ul ref="ulArr">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

let ulArr=this.$refs.getElementTagName('li')
console.log(typeof ulArr)

输出结果：Object

两者区别在于伪数组不能使用数组的一些方法，如果要使用数组的方法，需要将伪数组转换为数组

常见的几种伪数组转换成数组的方法：

Array.prototype.slice.call( 数据 ) 声明一个空数组，通过遍历伪数组，放到一个新数组中

//获取元素集合 得到是伪数组
let UlArr=this.$refs.UlArr.getElementsByTagName('li')
//将伪数组转化为数组
//console.log(Array.prototype.slice.call(UlArr))
let newUlArr=Array.prototype.slice.call(UlArr)
//转换完成，此时newUlArr可以使用数组的方法

2.Array.from方法 ——ES6方法（推荐）

let UlArr=this.$refs.thumbnailUl.getElementsByTagName('li')
//伪数组转化数组
let newUlArr=Array.from(UlArr)
newUlArr.push(6)
console.log(newUlArr) //[li,li,li,6]