虚值引起循环报错,导致代码阻塞

虚值引起循环报错,导致代码阻塞!
今天在工作中遇见一个场景:
父组件向子组件中传递数据的时候,在子组件中父组件传递过来的数据进行循环的时候;
子组件报错
TypeError: Cannot read property ‘menu_pid’ of null at VueComponent.getTree
后来发现报错的原因是在进行循环的时候,
getTree(list, parentId) {
      let re = new Array();
      for (let i = 0; i < list.length; i++) {
             let pid = list[i].menu_pid; 提示这里报错
            //do something
      }
      return re;
},
发现父组件传递过来的数据 list 中有一个虚值[{},{},null];
就是这个虚值 null,导致报错了;
然后就阻塞了代码;导致后面的代码无法运行;
 
以后如何避免这样的问题;
在父组件向子组件传递数据的时候;
不要传递虚值,因为虚值会导致出现意想不到的错误;
在向下传递值的时候;要对值进行检查;
 
底层在进行循环的时候,注意代码的健壮性;
去除虚值
let arr = [11, 22, 33, null, ”, undefined]
 
let newArr = [];
 
for (let i = 0; i < arr.length; i++) {
    if (arr[i]) {
        newArr.push(arr[i])
    }
}
console.log(newArr);//[11, 22, 33]

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64621.shtml

张贴在3