js forEach for区别
1、循环中断差别
具体见示例代码:
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>js for forEach区别 </title>
</head> <body>
<script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
<script type="text/javascript">
let arr = [1, 2, 3, 4]
for(let i = 0; i < arr.length; i++) {
if(arr[i] == 2) {
continue;
//break;
}
console.log(arr[i], ' for')
}
for(let i in arr) {
if(i == 2) {
break;
}
console.log(arr[i], ' for in')
}
for(let i of arr) {
if(i == 2) {
break;
}
console.log(i, ' for of')
}
arr.forEach(val => {
if(val == 2) {
//此处的return false 仅仅相当于continue
return false;
//break或者continue均不能使用 会报错,对于map filter方法一样会报错
//break;
//continue
}
console.log(val, ' forEach')
})
</script>
</body> </html>
数组的迭代方法:every、filter、forEach、map、some均不能使用break或者continue进行中断循环。
以上几个函数的参数都是:一个回调函数 和 一个this的指向
array.map(function(currentValue,index,arr), thisValue)
2、数组变化时差别
(1)数组添加操作
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>js for forEach区别 </title>
</head> <body>
<script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
<script type="text/javascript">
let arr = [1, 2, 3, 4]
for(let i = 0; i < arr.length; i++) {
if(arr[i] == 2) {
//对于添加时,for可以遍历新数组
arr.push(5)
}
// 输出1 2 3 4 5
console.log(arr[i], ' for')
} arr.forEach(val => {
if(val == 2) {
//对于添加时,forEach
arr.push(5)
}
// 输出1 2 3 4 5
console.log(val, ' forEach')
})
</script>
</body> </html>
(2)数组更新、删除操作
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>js for forEach区别 </title>
</head> <body>
<script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
<script type="text/javascript">
let arr = [1, 2, 3, 4]
for(let i = 0; i < arr.length; i++) {
if(arr[i] == 2) {
//对于更新、删除时,for可以遍历新数组
arr[1] = 100
//arr.splice(i,1)
}
// 输出1 100 3 4
console.log(arr[i], ' for')
} arr.forEach((val, i) => {
if(val == 2) {
//对于更新、删除时,forEach可以遍历新数组
val = 100
//arr.splice(i,1)
}
// 输出1 100 3 4
console.log(val, ' forEach')
})
</script>
</body> </html>
js forEach for区别的更多相关文章
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- JS中map和foreach的区别以及some和every的用法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- js forEach参数详解,forEach与for循环区别,forEach中如何删除数组元素
壹 ❀ 引 在JS开发工作中,遍历数组的操作可谓十分常见了,那么像for循环,forEach此类方法自然也不会陌生,我个人也觉得forEach不值得写一篇博客记录,直到我遇到了一个有趣的问题,我们来 ...
- JS中map与forEach的区别
很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...
- 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点
应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...
- js == 与 === 的区别,‘’与“”的区别
js == 与 === 的区别 1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值&quo ...
- 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类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...
- jQuery each和js forEach用法比较
本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...
随机推荐
- 使用matplotlib的示例:调整字体-设置colormap和colorbar
使用matplotlib的示例:调整字体-设置colormap和colorbar # -*- coding: utf-8 -*- #********************************** ...
- BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊 (动态树LCT)
2002: [Hnoi2010]Bounce 弹飞绵羊 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 2843 Solved: 1519[Submi ...
- QCon大会上推荐阅读的10本书
QCon北京2014大会将于4月25-27日在北京国际会议中心盛大开幕.QCon是由@InfoQ 主办的全球顶级技术盛会.在此次盛会中,现场将有@人民邮电出版社-信息技术分社 主办的现场扫描二维码赠书 ...
- Tasker to answer incoming call by pressing power button
nowadays, the smartphone is getting bigger in size, eg. samsung galaxy note and note 2, sorta big in ...
- WIN7 下面 装XP
WIN7 下面1.解压 GHOST.ISO2.点里面的 安装系统3.进入 DOS GHOST 界面,进行GHOST系统到自已指定的XP分区4.开始安装XP5.安装完毕后,打开 dbr-1.2.0.0. ...
- Access-Control-Allow-Origin,跨域
1.浏览器的同源安全策略 浏览器只允许请求当前域的资源,而对其他域的资源表示不信任.那怎么才算跨域呢? 请求协议http,https的不同 域domain的不同 端口port的不同 好好好,大概就是这 ...
- WCF服务端调用client.
wcf服务端 1,新建一个"windows窗口程序"名称为WCFServer2. 2.然后加入一个"WCF服务"名称为Service1. 详细步骤为:解决方式试 ...
- Ext ComboBox 动态查询
Ext中的combobox有属性typeAhead:true 可以实现模糊匹配,但是是从开始匹配的,如果需要自定的的匹配,则需要监听beforequery方法,实现自己的匹配查询方法: var gfx ...
- struts2 iterator 迭代标签只显示前五条记录
<s:iterator value="#session.produceLists" var="produce" begin="0" e ...
- 10 Big Data Possibilities for 2017 Based on Oracle's Predictions
2017 will see a host of informed predictions, lower costs, and even business-centric gains, courtesy ...