你的代码不堪一击！太烂了！

前言

小王，你的页面白屏了，赶快修复一下。小王排查后发现是服务端传回来的数据格式不对导致，无数据时传回来不是 [] 而是 null, 从而导致 forEach 方法报错导致白屏，于是告诉测试，这是服务端的错误导致，要让服务端来修改，结果测试来了一句：“服务端返回数据格式错误也不能白屏！！” “好吧，千错万错都是前端的错。” 小王抱怨着把白屏修复了。

刚过不久，老李喊道：“小王，你的组件又渲染不出来了。” 小王不耐烦地过来去看了一下，“你这个属性data 格式不对，要数组，你传个对象干嘛呢。”老李反驳： “ 就算 data 格式传错，也不应该整个组件渲染不出来，至少展示暂无数据吧！” “行，你说什么就是什么吧。” 小王又抱怨着把问题修复了。

类似场景，小王时不时都要经历一次，久而久之，大家都觉得小王的技术太菜了。小王听到后，倍感委屈：“这都是别人的错误，反倒成为我的错了！”

等到小王离职后，我去看了一下他的代码，的确够烂的，不堪一击！太烂了！下面来吐槽一下。

一、变量解构一解就报错

优化前：

const App = (props) => {
   
  const {
    data } = props;
  const {
    name, age } = data
}

如果你觉得以上代码没问题，我只能说你对你变量的解构赋值掌握的不扎实。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 、null 无法转为对象，所以对它们进行解构赋值时都会报错。

所以当 data 为 undefined 、null 时候，上述代码就会报错。

优化后：

const App = (props) => {
   
  const {
    data } = props || {
   };
  const {
    name, age } = data || {
   };
}

二、不靠谱的默认值

估计有些同学，看到上小节的代码，感觉还可以再优化一下。

再优化一下：

const App = (props = {
    }) => {
   
  const {
    data = {
   } } = props;
  const {
    name, age } = data ;
}

我看了摇摇头，只能说你对ES6默认值的掌握不扎实。

ES6 内部使用严格相等运算符（===）判断一个变量是否有值。所以，如果一个对象的属性值不严格等于 undefined ，默认值是不会生效的。

所以当 props.data 为 null，那么 const { name, age } = null 就会报错！

三、数组的方法只能用真数组调用

优化前：

const App = (props) => {
   
  const {
    data } = props || {
   };
  const nameList = (data || []).map(item => item.name);
}

那么问题来了，当 data 为 123 , data || [] 的结果是 123，123 作为一个 number 是没有 map 方法的，就会报错。

数组的方法只能用真数组调用，哪怕是类数组也不行。如何判断 data 是真数组，Array.isArray 是最靠谱的。

优化后：

const App = (props) => {
   
  const {
    data } = props || {
   };
  let nameList = [];
  if (Array.isArray(data)) {
   
    nameList = data.map(item => item.name);
  }
}

四、数组中每项不一定都是对象

优化前：

const App = (props) => {
   
  const {
    data } = props || {
   };
  let infoList = [];
  if (Array.isArray(data)) {
   
    infoList = data.map(item =>