js 優化雙層循環嵌套

頁面有個接口，一次性返回了5000多條數據，在數據完全加載出來之前，頁面屬於卡死狀態，無法操作；

最開始以為是接口返回了大量數據導致的，后面發現數據才1.9M，而且axios也不存在說同步的問題；

后面發現在拿到數據后，對數據又進行了操作了；

this.formData.employeeList.forEach((item2,index2) => {
              this.insuredPersonnelList.forEach((item,index) => {
                 if (item2.employeeId ==item.employeeId) {
                       this.insurancedName.push(index);
                  }
     });

 });
兩個對象都有5000多條數據，造成頁面卡頓
大佬說可以先循環一次把id放到一個數組里，然后用indexOf判斷；

var arr2 = [];
 this.formData.employeeList.forEach((item2, index2) => {
       arr2.push(item2.employeeId)
 });
 var arr = [];
 this.insuredPersonnelList.forEach((item, index) => {
                 arr.push(item.employeeId)
                arr.push(arr2.indexOf(item.employeeId))
                if(arr2.indexOf(item.employeeId) > -1){
                  this.insurancedName.push(index);
                }
   });

　　

使用console.time打印了兩種方式的運行時間

 

 

計時器2是第一種方式

計時器1的時間是優化后的

第二種遠優於第一種