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

我主要使用React，并且经常发现，当我编写依赖于组件状态的函数时，我必须在执行任何操作之前执行检查，以查看是否定义了状态块

例如：我有一个函数，它使用

.map（）

循环从数据库获取的对象数组，并为数组中的每个对象生成jsx。在my component的

render（）

函数中调用此函数。第一次调用

render（）

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

---

我一直通过进行条件检查来避免这种情况，以查看数组的值是否未定义。每次编写if语句的过程感觉有点笨拙，我想知道是否有更好的方法来执行此检查或完全避免此检查。

在使用map之前检查数组：

arr && arr.map()

或者

或者

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

---

根据你的评论：

---

我希望有一个像C#（arr？.map（））那样安全的导航操作符

是的，很明显。这是在JavaScript中调用的，JavaScript仍在建议中。如果被接受，您可以这样使用：

arr?.map()

您可以在中看到它，您可以使用它

---

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

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

因此，我建议您使用：

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

---

这里实际需要的是可选链接：

obj?.a?.b?.c // no error if a, b, or c don't exist or are undefined/null

？。

是存在运算符，它允许您安全地访问属性，并且在属性丢失时不会抛出。然而，可选链接还不是JavaScript的一部分，但已经被提出并处于第3阶段

但是，使用代理和类，您可以实现可选链接，并在链接失败时返回默认值

wrap（）

函数用于包装要应用可选链接的对象。在内部，

wrap

围绕对象创建一个代理，并使用

Maybe

包装器管理缺少的值

在链的末尾，通过使用链无效时返回的默认值链接

getOrElse（默认值）

来展开值：

const obj={
答:1,，
b:{
c:[4,1,2]
},
c:（）=>“是”
};
console.log（wrap（obj.a.getOrElse（null））//返回1
console.log（wrap（obj）.a.b.c.d.e.f.getOrElse（null））//返回null
log（wrap（obj.b.c.getOrElse（[]）//返回[4,1,2]
console.log（wrap（obj）.b.c[0].getOrElse（null））//返回4
log（wrap（obj.b.c[100].getOrElse（-1））//返回-1
console.log（wrap（obj.c.getOrElse（（）=>'no'）（））//返回'yes'
console.log（wrap（obj.d.getOrElse（（）=>'no'）（））//返回'no'
wrap（obj）.noArray.getOrElse（[1]）.forEach（v=>console.log（v））//显示1
wrap（obj）.b.c.getOrElse（[]）.forEach（v=>console.log（v））//显示4,1,2

完整示例：

类{
构造函数（值）{
此值为.\uuuu值=值；
}
静态的（值）{
if（value instanceof Maybe）返回值；
返回新的可能（值）；
}
getOrElse（elseVal）{
返回此.isNothing（）？elseVal:this.\u值；
}
没什么{
返回此值。u值===null | |此。u值===未定义；
}
地图（fn）{
返回这个。isNothing（）
？可能是（空）
：可能是（fn（这个值））；
}
}
函数换行（obj）{
函数修复（对象、属性）{
常量值=对象[属性]；
返回typeof value==='function'？value.bind（对象）：value；
}
返回新的代理（可能是（obj的）{
get：函数（目标、属性）{
if（目标中的属性）{
返回固定值（目标、属性）；
}否则{
返回包装（target.map（val=>fix（val，property））；
}
}
});
}
const obj={a:1，b:{c:[4,1,2]}，c:（）=>'yes'}；
log（wrap（obj.a.getOrElse（null））
console.log（wrap（obj）.a.b.c.d.e.f.getOrElse（null））
console.log（wrap（obj）.b.c.getOrElse（[]））
console.log（wrap（obj.b.c[0].getOrElse（null））
log（wrap（obj.b.c[100].getOrElse（-1））
log（wrap（obj.c.getOrElse（（）=>'no'）（））
console.log（wrap（obj.d.getOrElse（（）=>'no'）（））
wrap（obj）.noArray.getOrElse（[1]）.forEach（v=>console.log（v））//显示1
wrap（obj）.b.c.getOrElse（[]）.forEach（v=>console.log（v））//显示4,1,2

我希望有一个像c#（

arr？.map（）

）这样的安全导航操作符哇，可选链接很好。对于这个问题，关于

（arr | |[]）。map

？2019年更新的可能副本：可选链接方案现在处于第3阶段！

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

obj?.a?.b?.c // no error if a, b, or c don't exist or are undefined/null