js 數組遍歷map踩坑

在react或者vue進行頁面渲染時候，我們比較喜歡使用map循環遍歷屬性相似的節點，例如列表渲染

let res: any[] | JSX.Element[] = []
    Object.keys(item).forEach((rowItem: any) => {
      if (rowItem === 'id' || rowItem === 'show' || rowItem === 'text') {
        return
      } else {
        res.push(
          <div style={{ paddingBottom: '10px' }}>
            <span className="desc-title">{`${item[rowItem].label}：`}</span>
            <span className="desc-text">{`${item[rowItem].value}`}</span>
          </div>,
        )
      }
    })

我們在map循環一個數組的時候，在map中加入判斷條件例如item.key = id時候，map不會中斷條件而繼續執行item.key != id的條件，循環中不會直接跳出循環；

map和foreach都不會跳出循環

let arr = [
  {id:'1',num:'1'},
  {id:'2',num:'2'},
  {id:'3',num:'3'},
];
let arr1 = arr.map(item=>{
  if(item.id == 1){
    return item.id;
  }
});
//[ '1', undefined, undefined ]

let arr2 = arr.forEach(item=>{
  if(item.id == 1){
    return;
  }
});
//undefined

通過上面我們了解到map在條件結束后還會繼續執行循環，出現兩個undefined數據，forEach由於不能返回結果，所以直接返回undefined

所以我們想要map或者forEach進行數據篩選時候不能直接拿到結果，所以我們需要另外一個數組arr3

let arr = [
  {id:'1',num:'1'},
  {id:'2',num:'2'},
  {id:'3',num:'3'},
];
let arr1 = [];
let arr2 = [];
arr.map(item=>{
  if(item.id == 1){
    return;
  }else{
    arr1.push(item.id);
  }
});
[// '2', '3' ]

arr.forEach(item=>{
  if(item.id == 1){
    arr2.push(item.id);
  }
});
//[ '1' ]

最好在循環時候把想要的數據拿出來，而不是循環完之后拿出來自己想要的數據