全面解析Js陣列遍歷對原陣列的影響及返回值

stone_fan發表於2019-04-11
原文網址 : https://juejin.im/post/5caec65e5188251ae4157497
JS陣列

概述

本文主要是測試Js中遍歷方法對原陣列的影響及方法的返回值。

測試用到的程式碼地址github.com/fanxuewen/e…

一、遍歷

1.map和forEach

驗證對原陣列的影響及返回值

let originalArr=[1,2,3,4,5,6,7,8,9,10];
console.log('------------map---------------');
let arrMap= originalArr.map(item=>{
     return item*2;
 })
 console.log('original',originalArr);
 console.log('result',arrMap);
 
 console.log('------------forEach---------------');
let arrForEach=originalArr.forEach(item=>{
     return item*2;
 })
 console.log('original',originalArr);
 console.log('result',arrForEach);
複製程式碼

全面解析Js陣列遍歷對原陣列的影響及返回值
結果：map和forEach都不改變原陣列，map返回一個新陣列，forEach沒有返回值

驗證執行效率

let originalArr=[];
for(let i=0;i<1000000;i++){
    originalArr.push(i);
}
console.time('forEach')
originalArr.forEach(item=>{
    return item*2;
})
console.timeEnd('forEach');
console.time('map')
originalArr.map(item=>{
    return item*2;
})
console.timeEnd('map');
複製程式碼

全面解析Js陣列遍歷對原陣列的影響及返回值
結果：forEach的執行效率比map稍微高一些

2.some和every及filter

驗證對原陣列的影響及返回值

let originalArr=[1,2,3,4,5,6,7,8,9,10];
 console.log('------------filter---------------');
let arrFilter= originalArr.filter(item=>{
     return item>2;
 });
 console.log('original',originalArr);
 console.log('result',arrFilter);
 console.log('------------some---------------');
 let arrSome=originalArr.some(item=>{
      return item>2;
 })
 console.log('original',originalArr);
 console.log('result',arrSome);
 console.log('------------every---------------');
 let arrEvery=originalArr.every(item=>{
      return item>2;
})
console.log('original',originalArr);
console.log('result',arrEvery);
複製程式碼

全面解析Js陣列遍歷對原陣列的影響及返回值
結果：三者都不改變原陣列，filter返回滿足條件的新陣列，some和every返回bool值，some只要y有滿足條件的項就返回True,every要全部滿足判定條件才會返回true

驗證是否可以中斷迴圈

let originalArr=[1,2,3];
 console.log('------------filter---------------');
let arrFilter= originalArr.filter((item,index)=>{
    console.log(item);
     if(index==1){
       return false;
     }
      return true;
 });
 console.log('original',originalArr);
 console.log('result',arrFilter);
 console.log('------------some---------------');
 let arrSome=originalArr.some((item,index)=>{
    console.log(item);
    if(index==1){
        return false;
    }
     return true;
 })
 console.log('original',originalArr);
 console.log('result',arrSome);
 console.log('------------every---------------');
 let arrEvery=originalArr.every((item,index)=>{
     console.log(item);
    if(index==1){
        return false;
    }
    return true;
})
console.log('original',originalArr);
console.log('result',arrEvery);
複製程式碼

全面解析Js陣列遍歷對原陣列的影響及返回值

結果：filter不會提前退出迴圈，只是當return為false時，相應的項不會出現在新返回的陣列裡面，而some和every都有可能提前退出迴圈，當some遇到 return 為true時立馬退出迴圈，every遇到 return為false時立即退出

經過以上測試得知
1.所有遍歷方法都不會影響原陣列
2.map和filter會返回一個新的陣列
3.forEach沒有返回值
4.some和every返回bool值且能提前中斷迴圈

相關文章