放弃for循环吧

前言

  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)
}) //

总结

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

原文地址:https://www.cnblogs.com/zxd66666/p/12996945.html