无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式

1.for…in 语句以原始插入顺序迭代对象的可枚举属性。
2.for…of 语句遍历可迭代对象定义要迭代的数据(不包括从父类对象中继承的属性)。

以下示例显示了与Array一起使用时,for…of循环和for…in循环之间的区别。

  1. //定义Object对象属性objCustom
    Object.prototype.objCustom = function() {};
    //定义Array对象属性arrCustom
  2. Array.prototype.arrCustom = function() {};
  3.  
  4. let iterable = [3, 5, 7];
  5. iterable.foo = 'hello';
  6.  
  7. //for in 会继承
  8.  
  9. for (let i in iterable) {
  10. console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
  11. }
  12.  
  13. for (let i in iterable) {
  14. if (iterable.hasOwnProperty(i)) {
  15. console.log(i); // logs 0, 1, 2, "foo"
  16. }
  17. }
  18.  
  19. // for of
  20. for (let i of iterable) {
  21. console.log(i); // logs 3, 5, 7
  22. }
  1. 每个对象将继承objCustom属性,并且作为Array的每个对象将继承arrCustom属性,
    因为将这些属性添加到Object.prototypeArray.prototype
    由于继承和原型链,对象iterable继承属性objCustomarrCustom

for in

  1. for (let i in iterable) {
  2. console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
  3. }

此循环仅以原始插入顺序记录iterable 对象的可枚举属性。它不记录数组元素3, 5, 7 或hello,因为这些不是枚举属性。但是它记录了数组索引以及arrCustom和objCustom。如果你不知道为什么这些属性被迭代,array iteration and for…in中有更多解释。

  1. for (let i in iterable) {
  2. if (iterable.hasOwnProperty(i)) {
  3. console.log(i); // logs 0, 1, 2, "foo"
  4. }
  5. }

这个循环类似于第一个,但是它使用hasOwnProperty() 来检查,如果找到的枚举属性是对象自己的(不是继承的)。如果是,该属性被记录。记录的属性是0, 1, 2和foo,因为它们是自身的属性(不是继承的)。属性arrCustom和objCustom不会被记录,因为它们是继承的。

for...in不应该用于迭代一个 Array,其中索引顺序很重要。

for of

  1. for (let i of iterable) {
  2. console.log(i); // logs 3, 5, 7
  3. }

该循环迭代并记录iterable作为可迭代对象定义的迭代值,这些是数组元素 3, 5, 7,而不是任何对象的属性。

forEach

forEach是ES5数组中引入的一个方法(Array​.prototype​.for​Each()),用于数组的遍历。

  1. var array1 = ['a', 'b', 'c'];
  2.  
  3. array1.forEach(function(value,index,array) {
  4. console.log(value,index,array);
  5. });
  6.  
  7. //> "a" 0 Array ["a", "b", "c"]
  8. //> "b" 1 Array ["a", "b", "c"]
  9. //> "c" 2 Array ["a", "b", "c"]

语法:

  1. arr.forEach(callback[, thisArg]);

参数

callback
为数组中每个元素执行的函数,该函数接收三个参数:
currentValue
数组中正在处理的当前元素。
index可选
数组中正在处理的当前元素的索引。
array可选
forEach() 方法正在操作的数组。
thisArg可选
可选参数。当执行回调函数时用作 this 的值(参考对象)。

---------------------
作者:相濡以沫丶
来源:CSDN
原文:https://blog.csdn.net/qq_32279193/article/details/78685366
版权声明:本文为博主原创文章,转载请附上博文链接!

for...in 、for...of 、forEach 的区别的更多相关文章

  1. for循环与foreach的区别

    for循环与foreach的区别 foreach 依赖 IEnumerable. 第一次 var a in GetList() 时 调用 GetEnumerator 返回第一个对象 并 赋给a, 以后 ...

  2. every();some();filter();map();forEach()各自区别:

    every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...

  3. for和foreach的区别

    public class Program { public static void Main() { Program program = new Program(); program.For();// ...

  4. JS中map与forEach的区别

    很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...

  5. IL角度理解for 与foreach的区别——迭代器模式

    IL角度理解for 与foreach的区别--迭代器模式 目录 IL角度理解for 与foreach的区别--迭代器模式 1 最常用的设计模式 1.1 背景 1.2 摘要 2 遍历元素 3 删除元素 ...

  6. Javascript/Jquery 中each() 和forEach()的区别

    从名字看上去这两个方法好像有点关系,但在javascript中它们区别还是挺大的. forEach() 用于数组的操作,对数组中的每个元素执行制定的函数(不是数组不能使用forEach()方法). 而 ...

  7. js keys方法和foreach方法区别

    keys和foreach都有遍历对象的功能,但他们可以遍历的对象类型是不一样的,foreach是数组对象的方法,而keys是Object对象的方法.换句话说,foreach只能数组对象使用,而keys ...

  8. JavaScript中Map和ForEach的区别

    译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...

  9. JS中map和foreach的区别以及some和every的用法

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

  10. js forEach for区别

    1.循环中断差别 具体见示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta chars ...

随机推荐

  1. 关于Idea突然无法输入的诡异问题解决

    问题描述 最近加班把自己的装有Debian的笔记本带到公司,使用Idea写代码的时候,突然间无法输入,ctrl与tab还可用,重启Idea能得到一阵的解决 解决参考 如果是Linux平台,请考虑是否是 ...

  2. python 统计使用技巧

    python 统计使用技巧 # 1.不输入回车获取值 注:需要tty模块配合. fd = sys.stdin.fileno() old_settings = termios.tcgetattr(fd) ...

  3. F#周报2019年第18期

    新闻 FableConf 2019开始征集提案 2019理事会选举 如同DSL一般的Elmish封装器fable-elmish,可以创建控制台或者终端界面 介绍VS Code的远程开发 F#(.NET ...

  4. QT+OpenGL(02)-- zlib库的编译

    1.zlib库的下载 http://www.zlib.net/ zlib1211.zip 2.解压 3.进入  zlib1211\zlib-1.2.11\contrib\vstudio\vc14 目录 ...

  5. NET Excel转换为集合对象

    1.仅适用于规则Excel:表头和数据一一对应 2.涉及到Excel转换为集合对象的部分代码,完整npoi帮助类点击查看 /// <summary> /// 默认把excel第一个shee ...

  6. C#写日志工具类

    代码: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System ...

  7. Jenkins配置LDAP认证

    managerdn即为连接到AD的账号

  8. Python【day 10】函数进阶-小结

    本节主要内容1.动态参数 *args **kwargs 形参:*args将多个位置参数聚合打包成元组 **kwargs将多个关键字参数聚合打包成字典 实参:*li1将列表进行解包打散成多个位置参数 * ...

  9. 简单记录(css换行带点与不带点)

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

  10. MySQL整形手工注入

    0x1 判断注入点: http://www.xxx.org/members.php?id=1 and 1=1 --+ # ture http://www.xxx.org/members.php?id= ...