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' ]

最好在循环时候把想要的数据拿出来，而不是循环完之后拿出来自己想要的数据