无论是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. Linux iSCSI 磁盘共享管理

    Linux iSCSI 磁盘共享管理 iSCSI 服务是通过服务端(target)与客户端(initiator)的形式来提供服务.iSCSI 服务端用于存放存储源的服务器,将磁盘空间共享给客户使用,客 ...

  2. CD 基金会、Jenkins、Jenkins X、Spinnaker 和 Tekton 的常问问题

    转载:https://mp.weixin.qq.com/s/bQLqGrCM9NZYI0Njlu4N-w FAQ 什么是持续交付(CD)? CD是一种软件工程方法,团队在短周期内生成软件,确保软件可以 ...

  3. Winforn中设置ZedGraoh的GraphPane恢复到初始比例大小

    场景 Winform中实现ZedGraph中曲线右键显示为中文: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100115292 ...

  4. css去掉button点击后的蓝框

    转自:http://www.inbeijing.org/archives/1139 css控制Button 按钮的点击时候出现蓝色边框的问题 添加css属性,这样在点击安按钮的时候就不会有蓝色边框了. ...

  5. Vue实战狗尾草博客管理系统第二章

    伙伴们出来啦,探讨各问题,关于项目中大量的表单,大家是怎么处理的? 本章主要内容如下:底层布局,路由配置,github仓库推送关联. 关联GitHub仓库 关联建立在github已创建账号的基础上 登 ...

  6. element实现vue级联多选

    已经有大神完成element的改造github:https://github.com/webCoderJ/ele-multi-cascader#Attributes 已实践可用

  7. 9-剑指offer: 二进制中1的个数

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 代码 class Solution { public: int NumberOf1(int n) { if(n==0) re ...

  8. 【Spring IoC】依赖注入DI(四)

    平常的Java开发中,程序员在某个类中需要依赖其它类的方法.通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理. Spring提出了依赖注入的思想,即依赖类不由程 ...

  9. LG2512/BZOJ1045 「HAOI2008」糖果传递 中位数

    问题描述 LG2512 BZOJ1045 题解 这是一个链状问题的环状版本. 问题最终变为给定数轴上的\(n\)个点,找出一个到他们的距离之和尽量小的点,而这个点就是这些数中的中位数. 网络流24题的 ...

  10. 迪杰斯特拉算法完整代码(Java)

    package com.rao.graph; import java.util.*; /** * @author Srao * @className Dijkstra * @date 2019/12/ ...