首页 > 文章 > web前端 > es6怎么将类数组对象转数组

es6怎么将类数组对象转数组

青灯夜游原创: 2023-01-03 14:33:492310浏览

转换方法：1、使用“for in”语句将类数组对象转换为数组，语法“for(var i in obj){console.log(arr.push(obj[i]));}”；2、使用内置对象keys和valus，语法“Object.keys(obj)”和“Object.values(obj)”；3、使用Array对象的from()函数，语法“Array.from(obj)”。

es6怎么将类数组对象转数组

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

什么是类数组？

JavaScript中有一些看起来像却又不是数组的对象，叫做类数组。

什么是类数组对象？

只包含使用从0开始的，并且是自然递增的整数作为键，还定义了length用来表示元素个数的对象，通常就认为是类数组对象。

具有指向对象元素的数字索引下标，以及 length 属性告诉我们对象的元素个数；
不具有比如像push 、 forEach 以及 indexOf 等数组对象具有的方法；

类数组转换为数组

第一种方法：使用for in 将类数组对象转换为数组

<script type="text/javascript">
		var obj = {
			0: &#39;a&#39;,
			1: &#39;b&#39;,
			2: &#39;c&#39;,
		};
		console.log(obj[0]);
		console.log(typeof obj);
		var arr = [];
		for(var i in obj){
			console.log(arr.push(obj[i]));
		}
		console.log(arr);
		//把类数组对象放在一个名为arr的新数组里使得obj变成了数组

		console.log(arr instanceof Array);//判断arr是否为数组

	</script>

如果想获取整个对象：

let arr1 = []
		for (let i in obj) {
			let newobj = {}
			newobj[i] = obj[i]
			arr1.push(newobj);
		}
		console.log(arr1);

第二种方法:内置对象keys和valus

内置对象Object.keys：获取键

内置对象Object.values获取值

let obj = {
			&#39;1&#39;: 5,
			&#39;2&#39;: 8,
			&#39;3&#39;: 4,
			&#39;4&#39;: 6
		};
		//内置对象Object.keys：获取键
		var arr = Object.keys(obj)
		console.log(arr);
		//内置对象Object.values获取值
		var arr2 = Object.values(obj)
		console.log(arr2);

第三种方法：Array.from()

let obj = {
		&#39;0&#39;: 5,
		&#39;1&#39;: 8,
		&#39;2&#39;: 4,
		&#39;3&#39;: 6,
		&#39;length&#39;:4
	};
	    let arr = Array.from(obj)
		console.log(arr);

Array.from()把对象转化为数组必须符合2个条件

1:键必须是数值

2:必须带有length的键值对

不写length时：

加length键值对时：

扩展知识：for of、for in和forEach的区别

let arr = [&#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;]
		// for of
		for (let item of arr) {
			console.log(item);
		}
        // for in
		for (let i in arr) {
			console.log(i);
		}
        // forEach
        arr.forEach(item => {
			console.log(item);
		})

效果如图所示：