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

概述

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

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

1、遍歷

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);
複製代碼

結果：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');
複製代碼

結果：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);
複製代碼

結果：三者都不改變原數組，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);
複製代碼

結果：filter不會提早退出循環，只是當return爲false時，相應的項不會出如今新返回的數組裏面，而some和every都有可能提早退出循環，當some遇到 return 爲true時立馬退出循環，every遇到 return爲false時當即退出

通過以上測試得知
1.全部遍歷方法都不會影響原數組
2.map和filter會返回一個新的數組
3.forEach沒有返回值
4.some和every返回bool值且能提早中斷循環