JavaScript中类数组转真数组的两种方法

最新推荐文章于 2023-11-25 16:42:35 发布

小0鱼0儿

最新推荐文章于 2023-11-25 16:42:35 发布

阅读量196

点赞数

文章标签：类数组真数组 JavaScript Array.from slice

本文链接：https://blog.csdn.net/weixin_43734339/article/details/100555739

版权

类数组和数组之间的区别
1、真数组的长度是可变的，类数组不可变
2、真数组可以使用数组中的方法，类数组不行

第一种方法：Array.prototype.slice.call()
这种方法是借用了数组的原型中的slice方法，返回一个数组，call方法的主要作用是改变改变this的指向。
官方文档上slice是这样写的：slice() 方法可从已有的数组中返回选定的元素。语法规则：arrayObject.slice(start,end)，返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function Test(name, age, sex) {
			  var arr = Array.prototype.slice.call(arguments, 0);  // arguments为类对象，不能直接slice
				return arr;
			}
			
			var array = Test('Chen', 20,1);
			console.log(array);
			console.log(array.length);
		</script>
	</body>
</html>

第二种方方法：Array.from()
该方法是ES6中新增的方法，可以将类数组对象和可遍历对象这两类对象转为真正的数组。
Array.from()的用法注意事项如下：
　　1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
　　2、该类数组对象的属性名必须为数值型或字符串型的数字
　　注: 该类数组对象的属性名可以加引号，也可以不加引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function Test(name, age, sex) {
				var arr = Array.from(arguments);
				return arr;
			}
			
			var array = Test('Chen', 20,1);
			console.log(array);
			console.log(array.length);
		</script>
	</body>
</html>