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

今天在工作中遇见一个场景：

父组件向子组件中传递数据的时候，在子组件中父组件传递过来的数据进行循环的时候；

子组件报错

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]