JavaScript基础——伪数组转真数组

最新推荐文章于 2022-07-03 08:28:22 发布

Sesame_lu

最新推荐文章于 2022-07-03 08:28:22 发布

阅读量209

点赞数

分类专栏： JavaScript基础文章标签：伪数组伪数组转真数组 Array.from Array.prototype.slice.call()

本文链接：https://blog.csdn.net/lac01/article/details/102660139

版权

JavaScript基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、什么是伪数组

伪数组：拥有数组的索引和长度，能够进行遍历，但是不能使用数组的原型的方法

下面是伪数组和真数组的区别
1. 真数组：

	var a = [1,2,3,4,5];
	console.log(a);//输出结果见下图

在这里插入图片描述
1. 伪数组：

<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<script>
			var divobj = document.querySelectorAll('div')
			console.log(divobj);//输出结果见下图
		</script>
</body>

在这里插入图片描述
可以从中看出伪数组的原型不是Array构造函数，所以没法使用数组的方法

二、伪数组转真数组

1. 遍历伪数组，将伪数组中的元素赋值给空的真数组：

<body>
   	<div>1</div>
   	<div>2</div>
   	<div>3</div>
   	<div>4</div>
   	<div>5</div>
   	<div>6</div>
   	<script>
   		var divobj = document.querySelectorAll('div')
   		var arrobj = [];//定义一个空的数组
   		divobj.forEach((val,index)=>{
   			a.push(val);//遍历伪数组中的元素，添加到真数组中
   		})
   		 console.log(arrobj)
   		
   	</script>
</body>

2. 使用ES6提供的方法，Array.from()

<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<script>
			var divobj = document.querySelectorAll('div')
			var arrobj = Array.from(divobj)
			console.log(arrobj)
		</script>
</body>

3. 有些数组方法的返回值还是数组，可以利用这些方法
比如：slice方法等

<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<script>
			var divobj = document.querySelectorAll('div')
			var arrobj = Array.prototype.slice.call(divobj)
			console.log(arrobj)
		</script>
	</body>

数组有slice方法,但是伪数组没有,可以通过Array.prototype找到slice这个方法,这个方法中的this原本是指向new出来的实例的,现在将this通过call方法改为指向伪数组divobj,并截取divobj中的元素,使用slice会返回数组,将数组保存在arrobj中,就可以把divobj伪数组转为arrobj真数组

以上内容是对伪数组转真数组的一些理解，如果文章中对知识点的理解有片面或者错误的地方，欢迎批评指正

Sesame_lu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础——伪数组转真数组

一、什么是伪数组伪数组：拥有数组的索引和长度，能够进行遍历，但是不能使用数组的原型的方法下面是伪数组和真数组的区别1. 真数组： var a = [1,2,3,4,5]; console.log(a);//输出结果见下图1. 伪数组：<body> <div>1</div> <div>2</div> <...
复制链接

扫一扫