【Js】深入浅出的js for循环 for loop以及闭坑指南

2024-06-05 14:28

本文主要是介绍【Js】深入浅出的js for循环 for loop以及闭坑指南,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在JavaScript中使用forEach循环来删除数组中的特定元素可能会导致一些问题,因为forEach不允许你在迭代过程中修改数组的长度。
这会导致意外的行为,例如跳过元素或错误地索引。因此,建议使用其他方法来安全地删除数组中的元素。
存在的问题
1. 数组长度改变:forEach循环期间,如果你删除了一个元素,数组的长度会改变,
这可能导致一些元素被跳过或多次处理。  
处理少量数据, 这个问题不显著, 当处理成千上万的数据, 会出现数据差异问题, 坑就在这.
2. 无法中途停止:forEach无法中途停止循环,即使你找到了需要删除的元素。

替代方法
  • 使用filter方法:
filter方法会创建一个新的数组,其中包含所有通过指定函数测试的元素。这样可以避免修改数组长度的问题。
let array = [1, 2, 3, 4, 5]; 
let elementToRemove = 3; 
array = array.filter(item => item !== elementToRemove); 
console.log(array); // 输出: [1, 2, 4, 5]
  • 使用for循环
使用普通的for循环, 从后向前遍历数组,可以安全地删除元素而不会跳过任何元素。
let array = [1, 2, 3, 4, 5];
let elementToRemove = 3;
for (let i = array.length - 1; i >= 0; i--) {if (array[i] === elementToRemove) {array.splice(i, 1);}
}
console.log(array); // 输出: [1, 2, 4, 5]

总结
虽然可以使用forEach来迭代数组,但删除元素时应该使用其他方法来避免潜在的问题。
filter方法和从后向前的for循环是更安全和可靠的选择。

从前往后的for循环,  从后往前的for循环 正确使用:

 

  • 从前往后的for循环(需要额外处理索引)
let array = [1, 2, 3, 4, 5];
let elementToRemove = 3;for (let i = 0; i < array.length; i++) {if (array[i] === elementToRemove) {array.splice(i, 1);i--; // 调整索引以确保不会跳过下一个元素}
}console.log(array); // 输出: [1, 2, 4, 5]

  • 从后往前的for循环(无需额外处理索引)
let array = [1, 2, 3, 4, 5];
let elementToRemove = 3;for (let i = array.length - 1; i >= 0; i--) {if (array[i] === elementToRemove) {array.splice(i, 1);}
}console.log(array); // 输出: [1, 2, 4, 5]

这篇关于【Js】深入浅出的js for循环 for loop以及闭坑指南的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1033314

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

基于UE5和ROS2的激光雷达+深度RGBD相机小车的仿真指南(五):Blender锥桶建模

前言 本系列教程旨在使用UE5配置一个具备激光雷达+深度摄像机的仿真小车,并使用通过跨平台的方式进行ROS2和UE5仿真的通讯,达到小车自主导航的目的。本教程默认有ROS2导航及其gazebo仿真相关方面基础,Nav2相关的学习教程可以参考本人的其他博客Nav2代价地图实现和原理–Nav2源码解读之CostMap2D(上)-CSDN博客往期教程: 第一期:基于UE5和ROS2的激光雷达+深度RG

poj3750约瑟夫环,循环队列

Description 有N个小孩围成一圈,给他们从1开始依次编号,现指定从第W个开始报数,报到第S个时,该小孩出列,然后从下一个小孩开始报数,仍是报到S个出列,如此重复下去,直到所有的小孩都出列(总人数不足S个时将循环报数),求小孩出列的顺序。 Input 第一行输入小孩的人数N(N<=64) 接下来每行输入一个小孩的名字(人名不超过15个字符) 最后一行输入W,S (W < N),用

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(