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的更多相关文章

  1. JavaScript中的数组遍历forEach()与map()方法以及兼容写法

    原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...

  2. js中三个对数组操作的函数 indexOf()方法 filter筛选 forEach遍历 map遍历

     indexOf()方法  indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. 不使用indexOf时 var arr = ['apple','orange','pea ...

  3. js原生forEach、map与jquery的each、$.each的区别

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. js foreach、map函数

    语法:forEach和map都支持2个参数:一个是回调函数(item,index,input)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: ...

  5. 空数组在以下三种遍历中均不可更改:forEach、map和for...in

    首先,我们要知道对于forEach.map和for...in三种遍历,在不是空数组的情况下,要想实现更改原数组的方法,代码如下: var list = [1,2,3,4]; var list1 = [ ...

  6. 前端JS面试题汇总 Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)

    原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...

  7. JS的forEach和map方法的区别,还有一个$.each

    forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和f ...

  8. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  9. JS的forEach和map方法的区别

    一.前言 forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each() ...

  10. JS数组循环的性能和效率分析(for、while、forEach、map、for of)

    从最简单的for循环说起 for( 初始化:条件; ){} 条件为Trusy 值时候,可以继续执行for 循环,当条件变为Falsy 时跳出for循环.for循环常见的四种写法const person ...

随机推荐

  1. c# 导出表格

    var record = m_editor.getMasterRecord(); var Check_Id = record.Check_Id; var url = "/Storage/St ...

  2. c# 判断是否是手机访问

    public static bool CheckAgent() { bool flag = false; string agent = HttpContext.Current.Request.User ...

  3. IBatisNet动态update以及DateTime类型字段处理

    在维护一个老项目中碰到的问题.SQL配置如下(只简单列出两个字段): <update id="ProjectInfo.Update" parameterClass=" ...

  4. Intellij Idea乱码解决方案

    使用Intellij Idea经常遇到的三种乱码问题: 1.工程代码乱码 2.main方法运行,控制台乱码 3.tomcat运行,控制台乱码 解决方案: 1.工程代码乱码 Settings > ...

  5. CentOS6.5安装mysql以及常见问题的解决

    前言 最近在学习Linux系统,今天在安装MySQL数据库时出现很多问题,花费了两个小时终于解决,故记录下来以供大家参考.(本人目前还在学习阶段,下面写到的是自己结合网上查到的资料以及各位前辈给出的解 ...

  6. 《深入理解Java虚拟机:JVM高级特性与最佳实践》读书笔记

    第一部分 走进Java 一.走进Java 1.概述 java广泛应用于嵌入式系统.移动终端.企业服务器.大型机等各种场合,摆脱了硬件平台的束缚,实现了“一次编写,到处运行”的理想 2.java技术体系 ...

  7. 无法安装程序包MiniProfiler

    抱歉,之前给错了解决问题的答案,今天来修改一下,时间:2018年9月25日23:19:02错误 无法安装程序包“MiniProfiler.EF6 4.0.138”.你正在尝试将此程序包安装到目标为“. ...

  8. BZOJ2820: YY的GCD(反演)

    题解 题意 题目链接 Sol 反演套路题.. 不多说了,就是先枚举一个质数,再枚举一个约数然后反演一下. 最后可以化成这样子 \[\sum_{i = 1}^n \frac{n}{k} \frac{n} ...

  9. wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. python之 协程

    协程: 协程是一种用户态的轻量级线程, 即协程是由用户程序自己控制调度的 1.Greenlet import time # import greenlet from greenlet import g ...