放弃for循环吧

Posted 2020-12-23 zxd66666

前言

　　for(var i=0;i<array.length;i++){}这个可以是初学者必学的知识，也是JS中必不可少的功能，但如果对性能要求较高的小伙伴有了解过就会发现，for循环性能不高且代码冗余，而且如果使用双重for循环，浏览器页面奔溃的几率也会大大的提高；于是本篇文章会讲解替代for循环的方法，如果有更好的方法的小伙伴，也欢迎留言，大家一起讨论成长。

 

1. for of

　　for of类似java中的加强for，性能优于普通的for循环，直接可以取到值，更重要的一点就是，相较于forEach()，for of是可以使用continue和break的！

const array = [‘Tom‘,‘Jerry‘,‘Rechard‘];
for(let val of array){
  if(val === ‘Jerry‘) break;
  console.log(val);//Tom
}

 

2.filter()

　　filter()可以用来创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

　　注意：1.filter不会改变原素组，返回一个新数组； 2.filter不会对空数组进行检测，效率优于for循环;

const array = [34, 65, 87, 48, 99];
// filter() 方法
const arrNew = array.filter(num => {
    return num >= 66;
});
console.log(arrNew); // [ 87, 99 ]

 

3.find()

　　find()就是在数组中找打符合条件的一个元素，找到之后就停止循环，如果没有符合条件的元素就返回undefined.

　　注意：1.find不会改变原数组，只是单独返回某个元素；2.find不会对空数组进行检测，效率优于for循环;

const array = [34, 65, 87, 48, 99];
// find() 方法
const arrNew = array.find(num => {
    return num >= 66;
});
console.log(arrNew); // 87

 

4.map()--划重点！

　　map()数组中的元素为原始数组元素调用函数处理后的值，即新数组里面的值都是被转化为自己想要的类型。

　　注意：1.map不会改变原数组；2.map不会对空数组进行检测;

const array = [1, 3, 4, 5];
const res = array.map((num)=>{
    return num * num;
})
console.log(res) // [ 1, 9, 16, 25 ]

 

5.forEach()

　　forEach()效率也是高于普通的for循环，但是能用for of的情况下优先用for of，这个forEach一般也是不推荐使用，性能这一块和for of相差无几。

const array = [1, 2, 3, 4]
array.forEach(val =>{
    console.log(val)
}) //

 

总结

　　以上五个循环各具特色，小伙伴们可以根据实际业务场景来使用不同的功能，希望能对大家有帮助 ^_^。