for-in，for-of（含Map）详细演示

到底部

一、数组，对象示例

对于字符串：字符串本质上是字符数组
对于对象数组：就是数组，里面每个成员都是对象

let Str = 'ab'
let Arr = ['11', '22']
let Obj = {id: 001,name: 'aa'
}
// 对象数组
let ArrObj = [{ id: '001', name: 'aaa' },{ id: '002', name: 'bbb' }
]

二、for-in

// for- in : i 是 index (在数组、字符串中) 或者 key (在对象中)
for (const i in Str) {console.log(i, ' - ', Str[i]);// 0 - a// 1 - b
}for (const i in Arr) {console.log(i, ' - ', Arr[i]);// 0 - 11// 1 -22
}for (const i in Obj) {console.log(i, ' - ', Obj[i]);// id  -  1// name  -  aa
}for (const i in ArrObj) {console.log(i, ' - ', ArrObj[i],ArrObj[i].id, ArrObj[i].name);// 0  -  { id: '001', name: 'aaa' } 001 aaa// 1  -  { id: '002', name: 'bbb' } 002 bbb
}

三、for-of

：注意不能应用于对象

// for -of : i是元素 , 且 xxx[i] === undefined
for (const i of Str) {console.log(i);// a// b
}
for (const i of Arr) {console.log(i);// 11// 22
}
// for (const i of Obj) { 对象没有迭代器Iterator }
for (const i of ArrObj) {console.log(i, ' - ', i.id, i.name)// { id: '001', name: 'aaa' }  -  001 aaa// { id: '002', name: 'bbb' }  -  002 bbb
}

四、for-of 遍历 Map、Set

：之所以不能 for-in 是因为 map和set 都没有index
：可以用 forEach

const set = new Set(['1', '2', '1', '3']) // 这个不演示了
const map = new Map([['1', 'one'], ['2', 'two']]);
map.set('3','three')
map.get('3') // three
map.delete('3')console.log(map);
// Map(2) { '1' => 'one', '2' => 'two' }
for (const i of map) {console.log(i, ' --- ', i[0], i[1]);// [ '1', 'one' ]  ---  1 one// [ '2', 'two' ]  ---  2 two
}
for (const i of map.keys()) {console.log(i, map.get(i));// 1 one// 2 two
}
for (const i of map.values()) {console.log(i);// one// two
}

五、forEach

：只用于数组。字符串转数组：常用是 Str.spilt(“”)

Arr.forEach((val,i) => {// 1~3个形参，按 value index array(就是Arr) 排列,一般就只用一个valueconsole.log(i,' - ',val);
});

到顶部

for-in，for-of（含Map）详细演示相关推荐

【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)
[CSDN云IDE]个人使用体验和建议 (含超详细操作教程)(python.webGL方向) 文章目录: 一.CSDN云IDE简介二.新建工作空间三.管理你的工作空间 (3.1).工作空间基本信 ...
sketch最强切图工具Sketch Measure(含最详细的讲解)
sketch最强切图工具Sketch Measure(含最详细的讲解) 工具栏一个集成了所有功能图标的工具栏,可以方便操作每一个功能执行 Plugin > Sketch Measure &g ...
玩转Android10源码开发定制(二)之基于Pixel 3手机超级详细演示recovery刷机
玩转Android10源码开发定制(二)之基于Pixel 3手机超级详细演示recovery刷机本节主要内容: Pixel 3通过fastboot方式刷入Android 11.0官方工厂镜像 Pix ...
利用soapUI5.2.1测试含Map参数的webservice接口
之前不知道怎么测试含map参数的webservice接口,后来网上查了,利用soapUI是能测试此类接口.在使用后发现,在调用接口的时候并不会报错,但是获取到的值为空.一开始以为测试的时候传了一个si ...
catia孔深度符号标注_CATIA制图及工程图含图框详细教程（精编）.doc
CATIA制图及工程图含图框详细教程(精编).doc CATIA全制图教程及工程图图框教程精编版 CATIA V5创成式工程绘图及交互式工程绘图教程目录 1产品介绍7 2图标功能介绍(基本概念.基 ...
section怎么制造图框_catia制图及工程图含图框详细教程（精编）
catia制图及工程图含图框详细教程(精编) (117页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 49.9 积分 CATIACATIA全制图教程及工程 ...
AArch32 AArch64 Registers map详细解析与索引
1.AArch32 Registers AArch32 系统寄存器索引. 例如第一个寄存器ACTLR点击后解析如下: 2.AArch64 Registers AArch64 系统寄存器索引. 3.AA ...
玩转Android10源码开发定制(二)之基于Pixel 3手机超级详细演示fastboot刷机
玩转Android10源码开发定制(二)之基于Pixel 3手机超级详细演示fastboot刷机本节主要内容: Pixel 3通过fastboot方式刷入Android 11.0官方工厂镜像 Pix ...
二叉树实现四则运算计算器（含源码演示和详细说明）
说明:禁止转载,对源码的要求是禁止把这个东西原封不动或非常小量改动后用于课程设计(我很建议你自己动手实现,你会做的比我更好),源码仅供学习参考,思路仅供参考,仍有不足,欢迎评论指出. 1.问题定义及需 ...

for-in，for-of（含Map）详细演示

一、数组，对象示例

二、for-in

三、for-of

四、for-of 遍历 Map、Set

五、forEach

for-in，for-of（含Map）详细演示相关推荐

最新文章

热门文章