【JS】不要做无谓的消耗-Aarray遍历

相信很多小伙伴在web前端开发中都会用到数组，针对数组操作最多无非是增删改查，本不打算描述简单的应用，这里仅对日常中大家循环的使用常犯的错误做举例说明：

 

1、遍历，请优选【优化版的遍历方式】有兴趣的小伙伴可以拷贝去验证下，没有比较就没有伤害！！！！

let fun =(m)=>Array.from(new Array(m),(v,k)=>{return {id:k,name:"test"+k}})
let arr = fun(100000);

console.time("常规for循环")
for(let i=0;i<arr.length;i++){
  arr[i].sex="男";
}
console.timeEnd("常规for循环");


console.time("优化版for循环")
for(let i=0,len = arr.length;i<length;i++){
  arr[i].sex="男";
}
console.timeEnd("优化版for循环");

console.time("forEach")
arr.forEach(it=>{
    it.sex="女";
});
console.timeEnd("forEach");

以上代码执行效率比较：

2、查找很多同学错误的使用forEach进行查找，一定要注意forEach是不允许break和continue的，例如

强烈推荐【优化版的遍历并及时熔断跳出的方式】，如果想偷懒至少也要使用find函数。

 

 

let fun =(m)=>Array.from(new Array(m),(v,k)=>{return {id:k,name:"test"+k}})
let arr = fun(100000);
console.time("错误的使用forEach")
let findItem=null;
arr.forEach(it=>{
    if(it.id=="100"){
        findItem=it;
    }
});
console.log(findItem);
console.timeEnd("错误的使用forEach");

console.time("使用find查找")
findItem = arr.find(it=>{
    return it.id=="100"
});
console.log(findItem);
console.timeEnd("使用find查找");

console.time("优化版for循环查找")
for(let i=0;i<arr.length;i++){
  if(arr[i].id=="100"){
      findItem = arr[i];
     break
  }
}
console.log(findItem);
console.timeEnd("优化版for循环查找")

运行结果

此处附上V8的Array的find源码

v8源码传送门

function InnerArrayFind(predicate, thisArg, array, length) {
  if (!IS_CALLABLE(predicate)) {
    throw MakeTypeError(kCalledNonCallable, predicate);
  }

  for (var i = 0; i < length; i++) {
    var element = array[i];
    if (%_Call(predicate, thisArg, element, i, array)) {
      return element;
    }
  }

  return;
}

     本文最后想说的是，前端技术很杂，但是打好基础尤其重要，学习方法五花八门，动起手来，正所谓“下笔千言，不如一战”，多去尝试体验，会有不一样的体验！！不喜欢写文章，有助于大家的话共同进步。