forEach的详解

1、1输出了多少次?

let arr = [1, 2];
arr.forEach((item, index) => {arr.splice(index, 1);console.log(1); //输出几次?
});
console.log(arr)

结果:

1
Array [2]

2、this的回调指向
arr.forEach(function(self,index,arr){},this);
self:数组当前遍历的元素,默认从左往右依次获取数组元素。
index:数组当前元素的索引,第一个元素索引为0,依次类推。
arr:当前遍历的数组。
this:回调函数中this指向。

let arr1 = [1, 2, 3, 4];
let obj = {a: 1
};
arr1.forEach(function (self, index, arr) {console.log(`当前元素为${self}索引为${index},属于数组${arr}`);//做个简单计算console.log(self + this.a);
}, obj)

“当前元素为1索引为0,属于数组1,2,3,4”
2
“当前元素为2索引为1,属于数组1,2,3,4”
3
“当前元素为3索引为2,属于数组1,2,3,4”
4
“当前元素为4索引为3,属于数组1,2,3,4”
5

通俗理解,this指向的是上面所提供的obj对象,而arr则遍历的是当前的数组。
3、可以做到去重

let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2);

[1,2,3]

正如第二条所提的arr是指当前所遍历的对象,所在indexof的过程下都会可以做到数组去重的效果。

注意:
1.forEach不支持break
2.forEach中使用return无效
3.forEach删除自身元素index不会被重置

arr.forEach((item, index) => {arr.splice(index, 1);console.log(1);//这里隐性让index自增加1index++;
});

当第一次遍历结束,此时数组为[2]而index变成了1,此时数组最大索引只是0,不满足条件,所以跳出了循环。
有没有什么办法让此时的forEach不跳出循环呢,当然有,使用ES6的拓展运算符

[...arr].forEach((item, index) => {arr.splice(index, 1);console.log(1);
});

通过拓展运算符重置数组arr,达到不跳出循环的目的,你会发现内部确实执行了两次,很遗憾的是index依旧没被重置,所以数组arr还是无法在遍历的同时删空自己。

4、数组遍历并删除自身
for循环:

let arr = [1, 2, 1],i = 0,length = arr.length;
for (; i < length; i++) {// 删除数组中所有的1if (arr[i] === 1) {arr.splice(i, 1);//重置i,否则i会跳一位i--;};
};
console.log(arr);//[2]

filter过滤方法:

var arr1 = arr.filter((index) => {return index !== 1;
});
console.log(arr1); //[2]

forEach遍历:

arr.slice().reverse().forEach(function (item, index, arr1) {if (item === 1) {arr.splice(arr1.length - 1 - index, 1);}
});
console.log(arr);//[2]

forEach如何遍历和删除自身相关推荐

  1. Java学习之容器上(Collection接口常用方法,Iterator接口,使用foreach循环遍历Collection集合元素,Set集合通用知识(Hashset类,hashcode()与Lin

    1.容器API的类图结构如下: JAVA的集合类是一种特别有用的工具类,它可以用于存储数量不等的多个对象,并可以实现常用数据结构,如栈,队列等,除此之外,JAVA集合还可用于保存具有映射关系的关联数组 ...

  2. 1.12 foreach循环遍历Collection集合

    Java使用foreach循环遍历Collection集合 使用 Iterator 接口迭代访问 Collection 集合里的元素,除了这个方法之外,我们还可以使用 Java 5 提供的 forea ...

  3. 二维数组foreach嵌套遍历,判断连续3天以上的算有效数据

    2019独角兽企业重金招聘Python工程师标准>>> $studycourseinfo = $studycourseinfoModel->where($where)-> ...

  4. 使用foreach循环遍历集合元素

    使用foreach循环遍历集合元素 Java5.0 提供了foreach循环迭代访问Collection和数组 遍历操作不需要获取Collection或数组的长度,无需使用索引访问元素 遍历集合的底层 ...

  5. jsp数据 foreach 循环遍历 (含效果图)- 代码篇

    jsp数据 foreach 循环遍历 (含效果图)- 代码篇 效果图: 重要代码 · 示下: <c:forEach items="${governorlist}" var=& ...

  6. java利用循环打印AVA_ava.util.ArrayList在foreach循环遍历时可以删除元素

    ArrayList是java开发时非常常用的类,常碰到需要对ArrayList循环删除元素的情况.这时候大家都不会使用foreach循环的方式来遍历List,因为它会抛java.util.Concur ...

  7. 使用foreach标签遍历数组

    foreach标签用于实现对数组与集合类型的输入参数的遍历 collection属性表示要遍历的集合类型 separator属性表示间隔符 open属性表示起始 close属性表示结束 item属性值 ...

  8. foreach循环遍历的原理解析

    先编写一个foreach循环遍历的测试方法 运行 public class MyTest {public static void main(String[] args) {List<String ...

  9. foreach循环遍历数组方法vue介绍

    在vue中用foreach循环遍历数组全部元素,利用回调函数对数组进行操作,自动遍历整个数组,且无法break中途跳出循环,不可控,不支持return操作输出,return只用于控制循环是否跳出当前循 ...

最新文章

  1. asp.net2.0导出pdf文件完美解决方案【月儿原创】
  2. 百度 71 个炸天的开源项目!你知道几个?
  3. RPC 的概念模型与实现解析
  4. 基于单片机的超市储物柜设计_基于51单片机对电子储物柜系统的设计
  5. python中对文件、文件夹(文件操作函数)的操作
  6. Java正則表達式詳解
  7. word插入参考文献、目录及公式对齐方法
  8. select函数(一)
  9. python 面试题2
  10. html5 刷子,简单聊聊眼部刷子吧(打底刷、上色刷、晕染刷)
  11. ERROR: Failed to Setup IP tables: Unable to enable SKIP DNAT rule
  12. unity3d大型互动照片墙
  13. bootice.exe linux 启动盘,下载BOOTICE来把你的U盘做成启动盘
  14. Excel 甘特图 一行公式 极简版
  15. 苹果 CMS 搭建视频网站,定时采集视频
  16. css层叠样式表、基本选择器
  17. 最新消息 CV四小龙之一 依图科创板上市“中止”
  18. Dragon of Loowater UVA - 11292
  19. 单条视频播放3700w+,生鲜产品如何开启变现之路?
  20. java毕业生设计校园失物招领系统计算机源码+系统+mysql+调试部署+lw

热门文章

  1. 【数据层解决方案】NOSQL:Redis,MongoDB,ES
  2. 第一页搜索送别谷歌中国……
  3. 分布式事务框架Seata原理详解
  4. 4. Bootstrap - intermediate
  5. BPTT(BackPropagation Through Time)
  6. 关于TCP连接四次握手(或者叫四次挥手)的详细总结
  7. 检测单词拼写语法:是否符合大小写语法
  8. MSSQL·查询数据库中所有索引的相关信息
  9. 长春理工大学中山研究院宿舍怎么样?
  10. 带头结点的单链表就地逆置