程序员经验分享-hwhale

ES6系列——类数组转换为数组的几种方法以及for of、forin、for Each的区别

2023-05-16

以及目录

一、什么是类数组？

二、什么是类数组对象？

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

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

第三种方法：Array.from()

for of、for in和forEach的区别

for of

for in

for Each

一、什么是类数组？

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

二、什么是类数组对象？

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

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

将类数组或可遍历对象转换为真正的数组

如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>将类数组或可遍历对象转换为真正的数组</title>
</head>

<body>
	<ul>
		<li>首尔</li>
		<li>东京</li>
		<li>南极</li>
		<li>巴黎</li>
		<li>纽约</li>
	</ul>
	<script>
		let oDivs = document.getElementsByTagName('li');
		console.log(oDivs);
		console.log(oDivs instanceof Array);
		let o = [...oDivs]
		console.log(o instanceof Array);
		console.log(o);
	</script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l7wZwFoE-1653551992890)(https://juejin.cn/ “点击并拖拽以移动”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPK6lGok-1653551992893)(https://juejin.cn/ “点击并拖拽以移动”)]​

展开后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LNIatmVC-1653551992894)(https://juejin.cn/ “点击并拖拽以移动”)]​

基础格式：

var obj = {
			0: 'a',
			1: 'b',
			2: 'c',
            length:3,
		};

		console.log(obj[0]);
		console.log(obj.length);// length属性不是动态值，不会随着成员的变化而变化
		console.log(typeof obj);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jrg9gjsO-1653551992894)(https://juejin.cn/ “点击并拖拽以移动”)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v92yHtOS-1653551992894)(https://juejin.cn/ “点击并拖拽以移动”)]​

length属性并不是动态的，所以不会随着它其他成员的变化而发生变化。

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

<script type="text/javascript">
		var obj = {
			0: 'a',
			1: 'b',
			2: 'c',
		};
		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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KMbgGEL8-1653551992895)(https://juejin.cn/ “点击并拖拽以移动”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6xCoTmi-1653551992895)(https://juejin.cn/ “点击并拖拽以移动”)]​

如果想获取整个对象：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rBwgqSIY-1653551992895)(https://juejin.cn/ “点击并拖拽以移动”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gtUOUlyz-1653551992896)(https://juejin.cn/ “点击并拖拽以移动”)]​

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

内置对象Object.keys：获取键

内置对象Object.values获取值

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOhuqruf-1653551992896)(https://juejin.cn/ “点击并拖拽以移动”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIBFrztq-1653551992897)(https://juejin.cn/ “点击并拖拽以移动”)]​

第三种方法：Array.from()

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dA5lqbzs-1653551992897)(https://juejin.cn/ “点击并拖拽以移动”)]

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

1:键必须是数值

2:必须带有length的键值对

不写length时：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w6XruHsz-1653551992897)(https://juejin.cn/ “点击并拖拽以移动”)]​

加length键值对时：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJIahAsp-1653551992898)(https://juejin.cn/ “点击并拖拽以移动”)]​

for of、for in和forEach的区别

let arr = ['周一', '周二', '周三', '周四','周五','周六','周日']
		// 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);
		})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XWg9OIPw-1653551992898)(https://juejin.cn/ “点击并拖拽以移动”)]

效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-deufXdLj-1653551992899)(https://juejin.cn/ “点击并拖拽以移动”)]​

for of中 item代表数组中的某一项

for in中 i代表索引，一般用来遍历对象

forEach方法用于调用数组的每个元素，并将元素传递给回调函数。

for of

1.可以避免 for-in 循环中的所有陷阱
2.可以使用 break, continue 和 return
3.for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4.它也支持字符串的遍历
5.for-of 并不适用于处理原有的原生对象

for in

注：for…in循环会把某个类型的原型(prototype)中方法与属性给遍历出来，所以这可能会导致代码中出现意外的错误

for Each

1、foreach 方法没办法使用return,break,continue语句来跳出循环

2、forEach方法中的function回调有三个参数：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-romeSZEY-1653551992899)(https://juejin.cn/ “点击并拖拽以移动”)]​
（1）参数是遍历的数组内容（必需）
（2）参数是对应的数组索引（可选）
（3）参数是数组本身（可选）

3、对数组的每个元素执行一次提供的函数。返回undefined
​

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ES6系列——类数组转换为数组的几种方法以及for of、forin、for Each的区别 的相关文章

随机推荐

  • 有了Systick中断为什么还要PendSV中断？

    文章目录 问题 xff1a 原因 xff1a 1 在SysTick中断里完成任务切换会降低操作系统的实时性 xff1a 2 把systick优先级设置为最高把PendSV设置为最低的好处 xff1a 3 结语 xff1a 问题 xff1a

  • OpenCV/caffe安装流程

    公司正在做人脸识别系统 xff0c 用到了OpenCV库 xff0c 下面就是根据网上资料以及自己多次部署安装的经验整理的安装流程 xff0c 希望能给一些人一点参考 系统 xff1a Ubuntu1604 CPU架构 xff1a 一般是x

  • win10远程桌面连接ubuntu18.04

    一开始 xff0c 我是根据这个教程进行操作的 xff0c 改了设置为共享 xff0c 安装xrdp等 xff0c 一切都完成后 xff0c 当进行连接时 xff0c 也会出现那个xrdp连接界面 xff0c 但只要一登陆 xff0c 界面

  • 机器学习算法知识点整理

    1生成模型generative model和判别模型 discriminative model 已知输入变量x xff0c 生成模型通过对观测值和标注数据计算联合概率分布P x y 来达到判定估算y的目的 判别模型通过求解条件概率分布P y

  • 我的2014年总结——奔波的一年

    2014年 xff0c 发生了一些人生的大事 xff0c 这些事既有忧 xff0c 又有喜 这因为有这些事情的发生 xff0c 所以我们才越发成熟 xff0c 越发稳重 2014年技术的提升没有前2年那么突飞猛进了 xff0c 生活的事情也

  • 谈谈你对Spring Bean生命周期的理解【面试】

    前言 面试中经常会被问到Spring Bean的生命周期 xff0c 有些人说记不住 xff0c 看了一遍源码也是云里雾里的 xff0c 那是因为只看理论 xff0c 没有自己实践 xff0c 如果自己亲自写代码验证一下 xff0c 不管是

  • FreeRTOS初级篇----名称规范

    数据类型 TickType t xff1a FreeRTOS中断计数值类型 xff0c 可以是16位也可以是32位 xff0c 对于32位CPU来说TickType t最好为32位 BaseType t xff1a 是能够让CPU运行效率最

  • FreeRTOS初级篇----创建任务--动态创建、静态创建

    任务创建函数 xff1a xTaskCreate BaseType t span class token function xTaskCreate span span class token punctuation span TaskFun

  • Linux 性能测试与分析

    源自 http blog sina com cn s blog 71ad0d3f01019uzl html Linux 性能测试与分析 Revision History Version Date Author Description 1 0

  • HashMap底层原理

    文章目录 1 HashMap的概念2 底层数据结构2 JDK1 8之前存在的问题 xff1f 3 问题 xff1a 加载因子为什么默认值为0 75f xff1f 4 问题 xff1a 如果得到key的hash值 xff08 哈希码 xff0

  • 解决虚拟机能够ping通本机，但是无法上网问题

    查看centos网关是否设置正确 root 64 localhost ethan grep GATEWAY etc sysconfig network scripts ifcfg etc sysconfig network scripts

  • c语言字符串分割函数

    C语言字符串分割 strsep函数用于分解字符串为一组字符串 定义语句为char strsep char stringp const char delim 使用实例 xff1a include lt stdio h gt include l

  • Android Socket学习（三）三方apk执行shell命令

    include lt stdio h gt include lt stdlib h gt include lt string h gt include lt fcntl h gt include lt sys types h gt incl

  • ADB命令用法大全

    一 ADB简介 Android Debug Bridge xff0c 安卓调试桥 xff0c 它借助adb exe xff08 Android SDK安装目录platform tools下 xff09 xff0c 用于电脑端与模拟器或者真实

  • SDN入门_基本概念掌握

    部署SDA的链接 xff1a https www cisco com c en us solutions enterprise networks software defined access compatibility matrix ht

  • docker-io, docker-ce, docker-ee 区别

    docker io docker engin 是以前早期的版本 xff0c 版本号是 1 xff0c 默认centos7 安装的是docker io xff0c 最新版是 1 13 docker ce 是社区版本 xff0c 适用于刚刚开始

  • Typora免费版下载【Mac、Windows】

    前言 Typora1 0版本之后是付费版本 xff0c 1 0之前的版本官方网站已移除 xff0c 在网上找了好久 xff0c 现在记录下来 下载 付费版 Typora支持macOS Window Linux系统 xff1a 官方下载地址

  • docker修改镜像名称以及tag版本

    docker tag 镜像ID 镜像名称 tag版本信息 docker tag 8ef375298394 mysql v5 7

  • npm安装报错解决合集（一）

    在新版nodejs已经集成了npm xff0c 所以npm也都安装好了 可以通过输入下面命令来测试是否成功安装 node v npm v 如果安装成功 xff0c 都会出现版本号 用npm v测试 xff0c 报错 xff1a node i

  • ES6系列——类数组转换为数组的几种方法以及for of、forin、for Each的区别

    以及目录 一 什么是类数组 xff1f 二 什么是类数组对象 xff1f 第一种方法 xff1a 使用for in 将类数组对象转换为数组 第二种方法 内置对象keys和valus 第三种方法 xff1a Array from for of

热门标签