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

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

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

//定义Object对象属性objCustom
Object.prototype.objCustom = function() {};
//定义Array对象属性arrCustom
Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7];
iterable.foo = 'hello'; //for in 会继承 for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
} for (let i in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i); // logs 0, 1, 2, "foo"
}
} // for of
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
每个对象将继承objCustom属性,并且作为Array的每个对象将继承arrCustom属性,
因为将这些属性添加到Object.prototype和Array.prototype。
由于继承和原型链,对象iterable继承属性objCustom和arrCustom。

for in

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

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

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

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

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

for of

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

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

forEach

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

var array1 = ['a', 'b', 'c'];

array1.forEach(function(value,index,array) {
console.log(value,index,array);
}); //> "a" 0 Array ["a", "b", "c"]
//> "b" 1 Array ["a", "b", "c"]
//> "c" 2 Array ["a", "b", "c"]

语法:

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. javascript的数据类型检测

    JavaScript有两种数据类型,分别是基本数据类型和引用数据类型.其中基本数据类型包括Undefined.Null.Boolean.Number.String和Symbol(ES6新增,表示独一无 ...

  2. Elastic Stack核心产品介绍-Elasticsearch、Logstash和Kibana

    Elastic Stack 是一系列开源产品的合集,包括 Elasticsearch.Kibana.Logstash 以及 Beats 等等,能够安全可靠地获取任何来源.任何格式的数据,并且能够实时地 ...

  3. 基于Task定时检测网络本地网络状况

    首先我们需要使用winInet.dll中的InternetGetConnectedState方法来检测本地是否连接网络,然后再通过ping的方式来获取网络状况. 然后我们采用Task来开辟一个线程来定 ...

  4. vertx-mysql-client/java/

    Reactive MySQL Client是MySQL的客户端,它具有直接的API,专注于可伸缩性和低开销. 特征 事件驱动 轻巧的 内置连接池 准备查询缓存 游标支持 行流 RxJava 1和RxJ ...

  5. 十三道Python练习题

    一.完美立方 编写一个程序,对任给的正整数N (N≤100),寻找所有的四元组(a, b, c, d),使得a^3= b^3 + c^3 + d^3,其中a,b,c,d 大于 1, 小于等于N. 输入 ...

  6. Java面向对象——三大特性

    Java面向对象——三大特性 摘要:本文主要介绍了面型对象的三大特性. 封装 什么是封装 封装,就是指一个类隐藏了对象的属性和实现细节,对自己的数据和方法进行访问权限控制,只允许某些类和对象进行访问和 ...

  7. MySQL基础(四)(子查询与链接)

    1.子查询简介 其中,所谓的“外层查询”并不是指“查找”,指的是所有SQL语句的统称:结构化查询语言(Structured Query Language),简称SQL. : 2.由比较运算符引发的子查 ...

  8. 【转载】Visual Studio中WinForm窗体程序如何切换.NET Framework版本

    在C#语言的WinForm窗体程序中,有时候我们需要切换WinForm窗体程序项目的.NET Framework版本号,例如从.NET Framework 4.5版本切换到.NET Framework ...

  9. 达能依靠Matrikon进行数据存储和分析

    达能是一家致力于通过食品实现健康的公司,业务遍及五大洲130多个国家.在罗马尼亚,达能每天在布加勒斯特的工厂生产100万瓶酸奶.由于质量和产品安全在达能最为重要,因此监控和分析工业过程需要非常高效才能 ...

  10. inndo 表与存储逻辑_1

    ------------------------------------------2015-03-03--------------------------------------- 表 : inno ...