for-in和for-of,forEach和Map
for-in和for-of
1. for-in循环实际是为循环”enumerable“对象而设计的,是用来循环带有字符串key的对象的。
使用for in会遍历数组所有的可枚举属性,包括原型。所以for in更适合遍历对象,不要使用for in遍历数组。
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
2. for-of可用于循环数组value值,或者可迭代对象,如Map, Set, String。
如果循环普通的对象,需要通过和Object.keys()搭配使用。
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}
3. 总结:
1. 推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of。
2. for...in循环出的是key,for...of循环出的是value
3. 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
4. for...of不能循环普通的对象,需要通过和Object.keys()搭配使用
forEach和Map
共同点:
1. 都是循环遍历数组中的每一项。
2. forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value,当前项的索引index,原始数组array。
3. 匿名函数中的this都是指Window。
4. 只能遍历数组。
1. forEach
没有返回值,不能中断循环(使用break语句或使用return语句),只是针对每个元素调用func。
var ary = [12,23,24,42,1];
var res = ary.forEach(function (value,index,array) {
console.log(value*10);
})
console.log(res);//-->undefined;
console.log(ary);//-->[12,23,24,42,1] 原来的数组不变;
2. Map
返回一个新的Array,新数组元素为原来的数组的每个元素调用func的结果,对原来数组不影响。
var ary = [12,23,24,42,1];
var res = ary.map(function (value,index,array) {
return value*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1];
for-in和for-of,forEach和Map的更多相关文章
- JavaScript中的数组遍历forEach()与map()方法以及兼容写法
原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...
- js中三个对数组操作的函数 indexOf()方法 filter筛选 forEach遍历 map遍历
indexOf()方法 indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. 不使用indexOf时 var arr = ['apple','orange','pea ...
- js原生forEach、map与jquery的each、$.each的区别
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js foreach、map函数
语法:forEach和map都支持2个参数:一个是回调函数(item,index,input)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: ...
- 空数组在以下三种遍历中均不可更改:forEach、map和for...in
首先,我们要知道对于forEach.map和for...in三种遍历,在不是空数组的情况下,要想实现更改原数组的方法,代码如下: var list = [1,2,3,4]; var list1 = [ ...
- 前端JS面试题汇总 Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)
原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...
- JS的forEach和map方法的区别,还有一个$.each
forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和f ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- JS的forEach和map方法的区别
一.前言 forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each() ...
- JS数组循环的性能和效率分析(for、while、forEach、map、for of)
从最简单的for循环说起 for( 初始化:条件; ){} 条件为Trusy 值时候,可以继续执行for 循环,当条件变为Falsy 时跳出for循环.for循环常见的四种写法const person ...
随机推荐
- DataTable不能通过已删除的行访问该行的信息解决方法
使用dt.Rows[0]["name", DataRowVersion.Original]可以获取
- 后台MemoryStream图片流用ajax接收乱码问题
MemoryStream ms = new MemoryStream(); //要先把二进制流进行编码,再传输,解决乱码问题 Convert.ToBase64String(ms.ToArray()); ...
- 《Photoshop CS4手绘艺术技法》
书名 <Photoshop CS4手绘艺术技法> 图片 时间 2017-4月 学习 想了想当初的学习动机,自己P图片可是P的是实在是丑就会做几张动图.看完了才发现这行博大精深而且自己的审 ...
- WebForm 【上传图片--添加水印】
对图片添加水印,上传 <div> <asp:FileUpload ID="FileUpload1" runat="server" /> ...
- Code::Blocks + GDAL
[root@server20 ~]# yum install cmake cmake-gui [root@server20 ~]# yum install cairo-devel libcurl-de ...
- .Net Core(一)环境搭建与基本使用
.Net Core(一)环境搭建与基本使用 一.系统配置 a) Linux下如果想要打开类似任务管理器,可以使用top命令,在控制台会动态刷新CPU和内存占用.进程等信息.vmstat和free命令可 ...
- 三. Redis 主从复制
特点 1. Master可以拥有多个Slave 2. 多个Slave除可以连接一个Master外,还可以连接多个Salve(避免Master挂掉不能同步,当Master挂掉,其中一个Slave会立即变 ...
- python第五十天--paramiko
python通过paramiko实现,ssh功能 import paramiko ssh =paramiko.SSHClient()#创建一个SSH连接对象 ssh.set_missing_host_ ...
- WTL汉化版
基于 WTL90_4060 仅汉化了Windows部分,CE和Mobile未汉化 AppWizard和rc文件已全部汉化 如果不需要汉化则将所有的2052目录删除即可 如有问题可以给我留言 点我下载
- mysql常用赋权命令
GRANT 所需权限 ON 库名.表名 TO '账号'@'允许访问的IP地址'; 把中文按需替换掉 所需权限:select.insert.delete.update按需要来. 上面那个允许访问IP ' ...