for...in 、for...of 、forEach 的区别
无论是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.forEach()),用于数组的遍历。
- 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 的区别的更多相关文章
- for循环与foreach的区别
for循环与foreach的区别 foreach 依赖 IEnumerable. 第一次 var a in GetList() 时 调用 GetEnumerator 返回第一个对象 并 赋给a, 以后 ...
- every();some();filter();map();forEach()各自区别:
every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...
- for和foreach的区别
public class Program { public static void Main() { Program program = new Program(); program.For();// ...
- JS中map与forEach的区别
很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...
- IL角度理解for 与foreach的区别——迭代器模式
IL角度理解for 与foreach的区别--迭代器模式 目录 IL角度理解for 与foreach的区别--迭代器模式 1 最常用的设计模式 1.1 背景 1.2 摘要 2 遍历元素 3 删除元素 ...
- Javascript/Jquery 中each() 和forEach()的区别
从名字看上去这两个方法好像有点关系,但在javascript中它们区别还是挺大的. forEach() 用于数组的操作,对数组中的每个元素执行制定的函数(不是数组不能使用forEach()方法). 而 ...
- js keys方法和foreach方法区别
keys和foreach都有遍历对象的功能,但他们可以遍历的对象类型是不一样的,foreach是数组对象的方法,而keys是Object对象的方法.换句话说,foreach只能数组对象使用,而keys ...
- JavaScript中Map和ForEach的区别
译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...
- JS中map和foreach的区别以及some和every的用法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- js forEach for区别
1.循环中断差别 具体见示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta chars ...
随机推荐
- Linux iSCSI 磁盘共享管理
Linux iSCSI 磁盘共享管理 iSCSI 服务是通过服务端(target)与客户端(initiator)的形式来提供服务.iSCSI 服务端用于存放存储源的服务器,将磁盘空间共享给客户使用,客 ...
- CD 基金会、Jenkins、Jenkins X、Spinnaker 和 Tekton 的常问问题
转载:https://mp.weixin.qq.com/s/bQLqGrCM9NZYI0Njlu4N-w FAQ 什么是持续交付(CD)? CD是一种软件工程方法,团队在短周期内生成软件,确保软件可以 ...
- Winforn中设置ZedGraoh的GraphPane恢复到初始比例大小
场景 Winform中实现ZedGraph中曲线右键显示为中文: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100115292 ...
- css去掉button点击后的蓝框
转自:http://www.inbeijing.org/archives/1139 css控制Button 按钮的点击时候出现蓝色边框的问题 添加css属性,这样在点击安按钮的时候就不会有蓝色边框了. ...
- Vue实战狗尾草博客管理系统第二章
伙伴们出来啦,探讨各问题,关于项目中大量的表单,大家是怎么处理的? 本章主要内容如下:底层布局,路由配置,github仓库推送关联. 关联GitHub仓库 关联建立在github已创建账号的基础上 登 ...
- element实现vue级联多选
已经有大神完成element的改造github:https://github.com/webCoderJ/ele-multi-cascader#Attributes 已实践可用
- 9-剑指offer: 二进制中1的个数
题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 代码 class Solution { public: int NumberOf1(int n) { if(n==0) re ...
- 【Spring IoC】依赖注入DI(四)
平常的Java开发中,程序员在某个类中需要依赖其它类的方法.通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理. Spring提出了依赖注入的思想,即依赖类不由程 ...
- LG2512/BZOJ1045 「HAOI2008」糖果传递 中位数
问题描述 LG2512 BZOJ1045 题解 这是一个链状问题的环状版本. 问题最终变为给定数轴上的\(n\)个点,找出一个到他们的距离之和尽量小的点,而这个点就是这些数中的中位数. 网络流24题的 ...
- 迪杰斯特拉算法完整代码(Java)
package com.rao.graph; import java.util.*; /** * @author Srao * @className Dijkstra * @date 2019/12/ ...