for,forEach和map的区别

1. for方法

for (语句1; 语句2; 语句3){
    被执行的代码块
}
语句1 (代码块)开始前执行
语句2 定义运行循环(代码块)的条件
语句3 在循环(代码块)已被执行之后执行

一般写法如下:

for(var i = 0;i< arr.length;i++) {
}

这就是一个常见的,正序循环的for循环。这样写的缺点大家都明白:每次都从arr里取length与i来对比,浪费性能(而且,要是arr的长度是动态变化的,就会出现死循环)。改进这个循环的办法是用变量保存arr.length

for(var i = 0, len = arr.length;i< len;i++) {
}

这样比第一种可以略微提升点性能,要是数组长,可以提升更多。
不过这样写就多了个变量,且这个变量只在用来与i对比的时候有用,看着有点鸡肋。
如果循环顺序对你不重要,那你可以尝试倒序循环:

for (var i = arr.length - 1; i >= 0; i--) {
}

或者简写

for(var i = arr.length;i--;) {
}

注意语句2为定义运行循环的条件,第一个满足i>=0即可,第二个运行i-- ,并且只要 i 是真值,循环就会继续 ,所以i的开始值为arr.length-1

最后总结下提高for循环性能的要点:
1,适时break!不需要遍历全部的就要加跳出条件!
2,不要在for循环体里声明变量(建议一次var,多次赋值)
3,数组长度缓存,尽量少变量

2.map方法

 //值类型,不改变原数组,形成新的数组
 let valueArr = [11, 22, 33];
 let newArray = valueArr.map(item => item * 2);
 console.log(valueArr, newArray);  //[11,22,33]   [22,44,66]
 
 //引用类型,改变原数组
 let referArr = [{ width: 100 }, { width: 200 }];
 referArr.map(item => item.editable = true);   
 console.log(referArr)  //[{width:100,editable:true},{width:200,eidtable:true}]

3.forEach方法

 //值类型,不改变原数组,返回值undefined
 let valueArr = [11, 22, 33];
 let newArray = valueArr.forEach(item => item * 2);
 console.log(valueArr, newArray);  //[11,22,33]   undefined
 
 //若要改变值,则需配合index来使用
 let newArr1 = valueArr.forEach((item, index) => {
      valueArr[index] = item * 2;
 });
 console.log(valueArr, newArray);  //[22,44,66]   undefined
  
 //引用类型,改变原数组
 let referArr = [{ width: 100 }, { width: 200 }];
 referArr.forEach(item => item.editable = true);   
 console.log(referArr)  //[{width:100,editable:true},{width:200,eidtable:true}]

注意点:
无论用forEach还是map遍历数组,用return来终止后面的语句是无效的,可以用一个变量来作为标记,但在for循环里是有效的。

const valids = []
let flag;
this.$refs[formName].forEach((item) => {
    item.validate((valid) => {
        !valid && (flag = true)
    })
})

总结:
都是用来遍历数组,forEach和map会为数组中每个元素执行回调函数。
for循环是在确定数组的长度下使用,continue终止当前循环,break终止整个循环。
map方法可以链式编程,但需要return。
map:若数组的类型为值类型,则产生新的数组;若数组的类型为引用类型,则会改变原数组。
forEach的基本原理就是for循环,返回值为undefined。
forEach:若数组的类型为值类型,则不会改变原数组,若想改变原数组通过index这个参数来改变;若数组的类型为引用类型,则会改变原数组

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值