首页 > 其他分享 >#yyds干货盘点#聊一聊forEach函数

#yyds干货盘点#聊一聊forEach函数

时间:2023-04-09 23:33:14浏览次数:40  
标签:yyds obj 函数 作用域 聊一聊 forEach friends 循环

前端循环中会用到forEach,其实forEach有很多问题:

forEach无法终止或者跳出循环

forEach()方法不支持使用breakcontinue语句来跳出循环或跳过某一项。如果需要跳出循环或跳过某一项,应该使用for循环或其他支持breakcontinue语句的方法。

forEach 删除自身元素,index不可被重置

forEach中我们无法控制 index 的值,它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置,先看一个简单例子:

let arr = [1,2,3,4]
arr.forEach((item, index) => {
    console.log(item); // 1 2 3 4
    index++;
});

this指向问题

forEach()方法中,this关键字引用的是调用该方法的对象。但是,在使用普通函数或箭头函数作为参数时,this关键字的作用域可能会出现问题。在箭头函数中,this关键字引用的是定义该函数时所在的对象。在普通函数中,this关键字引用的是调用该函数的对象。如果需要确保this关键字的作用域正确,可以使用bind()方法来绑定函数的作用域。以下是一个关于forEach()方法中this关键字作用域问题的例子:

const obj = {
  name: "Alice",
  friends: ["Bob", "Charlie", "Dave"],
  printFriends: function () {
    this.friends.forEach(function (friend) {
      console.log(this.name + " is friends with " + friend);
    });
  },
};
obj.printFriends();

在这个例子中,我们定义了一个名为obj的对象,它有一个printFriends()方法。在printFriends()方法中,我们使用forEach()方法遍历friends数组,并使用普通函数打印每个朋友的名字和obj对象的name属性。但是,当我们运行这个代码时,会发现输出结果为:

undefined is friends with Bob
undefined is friends with Charlie
undefined is friends with Dave

这是因为,在forEach()方法中使用普通函数时,该函数的作用域并不是调用printFriends()方法的对象,而是全局作用域。因此,在该函数中无法访问obj对象的属性。

为了解决这个问题,可以使用bind()方法来绑定函数的作用域,或使用箭头函数来定义回调函数。以下是使用bind()方法解决问题的代码示例:

const obj = {
  name: "Alice",
  friends: ["Bob", "Charlie", "Dave"],
  printFriends: function () {
    this.friends.forEach(
      function (friend) {
        console.log(this.name + " is friends with " + friend);
      }.bind(this) // 使用bind()方法绑定函数的作用域
    );
  },
};
obj.printFriends();

在这个例子中,我们使用bind()方法来绑定函数的作用域,将该函数的作用域绑定到obj对象上。运行代码后,输出结果为:

Alice is friends with Bob 
Alice is friends with Charlie 
Alice is friends with Dave
复制代码

通过使用bind()方法来绑定函数的作用域,我们可以正确地访问obj对象的属性。

另一种解决方法是使用箭头函数。由于箭头函数没有自己的this,它会继承它所在作用域的this。因此,在箭头函数中,this关键字引用的是定义该函数时所在的对象。

forEach性能不及for

foreach相对于for循环,代码减少了,但是foreach依赖IEnumerable。在运行的时候效率低于for循环。当然了,在处理不确定循环次数的循环,或者循环次数需要计算的情况下。使用foreach比较方便。而且foreach的代码经过编译系统的代码优化后,和for循环的循环类似。

可以说,foreach语句是for语句的特殊简化版本,在遍历数组、集合方面,foreach为开发人员提供了极大的方便。在复杂的循环设计时,还是应该使用for循环更加的灵活。



标签:yyds,obj,函数,作用域,聊一聊,forEach,friends,循环
From: https://blog.51cto.com/u_11365839/6179264

相关文章

  • #yyds干货盘点#Python读写文件脚本
    该脚本根据输入的路径,可以读取路径下的所有文件,实现匹配字符串替换,添加内容和删除内容的功能。importosfromfileinputimportFileInput#删除内容defmatch_then_delete(inputpath):forroot,dirs,filesinos.walk(inputpath):forfileinfiles:......
  • #yyds干货盘点#Linux中root与sudo的用法与区别(学习笔记)
    Linux下面有两个概念可能大家接触的比较多,一个是sudo命令,还有一个是root账户。Sudo 命令可以以最高权限执行命令,而root账户下所有命令都有最高权限,也就是相当于所有命令都默认加了sudo。那么 sudo和root的区别到底是什么呢,为什么我们建议使用sudo而不是直接使用roo......
  • #yyds干货盘点#学习笔记3,Linux 安全强化 SSH 远程连接的方法
    7.使用SSH密钥连接连接到服务器的最安全方法之一是使用SSH密钥。使用SSH密钥时,无需密码即可访问服务器。另外,你可以通过更改sshd_config文件中与密码相关的参数来完全关闭对服务器的密码访问。创建SSH密钥时,有两个密钥:Public和Private。公钥将上传到你要连接的服务器,......
  • JavaWeb-JSP-JSTL c foreach -2023-04-09
    <%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%><%@pageimport="java.util.ArrayList"%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><html>&l......
  • #yyds干货盘点#掩盖系统上的操作
    touchfiletouch*statfilels–ltouch-d"2001-01-0120:00:00"filels-lfilenanotimestamps.sh#!/bin/bashif[$#-eq0];thenecho“Useasave(-s)orrestore(-r)parameter.”exit1fichmod+xtimestamps.sh./timestamps.shif[$1......
  • #yyds干货盘点# LeetCode面试题:爬楼梯
    1.简述:假设你正在爬楼梯。需要n 阶你才能到达楼顶。每次你可以爬1或2个台阶。你有多少种不同的方法可以爬到楼顶呢? 示例1:输入:n=2输出:2解释:有两种方法可以爬到楼顶。1.1阶+1阶2.2阶示例2:输入:n=3输出:3解释:有三种方法可以爬到楼顶。1.1阶+1阶+1阶2.1阶......
  • 数组遍历方法: map、filter、forEach
    区别map叫映射,可以重新赋值,拼接用+号,值+另外的值得新值filter叫筛选数组,可以重新赋值,用><=号,比较筛选值forEach叫跟for循环一样,不可以重新赋值......
  • #yyds干货盘点#学习笔记(1)Linux和Windows上实现端口映射
    一、Windows下实现端口映射1.查询端口映射情况netshinterfaceportproxyshowv4tov42.查询某一个IP的所有端口映射情况netshinterfaceportproxyshowv4tov4|find"[IP]"例:netshinterfaceportproxyshowv4tov4|find"192.168.1.1"3.增加一个端口映射netshinterfa......
  • #yyds干货盘点#使用tkinter中的按钮开始/停止循环
    通过使用两个不同的按钮,我试图启动和停止一个基于while循环的进程,该循环扫描整个模式(在本例中实际上只是计数)。在下面的代码中,我试图简化和概括我正在处理的实际项目中发生的更复杂的过程。正如您通过运行代码所看到的,您可以通过按play按钮来开始计数;但是,当您按下stop按钮时,该过......
  • #yyds干货盘点 前端小知识点扫盲笔记记录5
    前言我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结事件委托<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"/> <metahttp-equiv="X-UA-Compatible"content="IE=edge"/&g......