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进行中断循环。
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区别
原文地址:https://www.cnblogs.com/mengfangui/p/9577433.html