如何处理对可能未定义的数据的调用函数？

Question

我主要使用React，经常发现当我编写依赖于组件状态的函数时，必须执行检查以查看状态是否已定义，然后再执行任何操作。

例如：我有一个函数，该函数.map()用于遍历从数据库中获取的对象数组，并为数组中的每个对象生成jsx。该函数在render()我的组件函数中调用。第一次render()调用时，初始数组为空。这将导致错误，因为，当然，数组的第一个索引是未定义的。

我一直在通过进行条件检查来查看数组的值是否未定义来规避此问题。每次编写一个if语句的过程都有些笨拙，我想知道是否有更好的方法执行此检查或完全避免检查。

Answer 1

使用map之前检查数组：

arr && arr.map()

要么，

arr && arr.length && arr.map() // if you want to map only if not empty array

要么，

我们甚至可以这样使用（如devserkan所评论）：

(arr || []).map()

根据您的评论：

我希望有一个像C＃（arr？.map（））这样的安全导航运算符

是的，显然。这在JavaScript中被称为可选链接，目前仍在提议中。如果被接受，则可以这样使用：

arr?.map()

您可以在阶段1中看到它，可以在其中使用babel预设stage1

但是很明显，除了检查数组的长度，您的要求将无法满足：

这将导致错误，因为，当然，数组的第一个索引是未定义的。

因此，我建议您使用：

arr && arr.length && arr.map()