可选链：list?.map(i =>i) 存在什么问题？

起因是这样一行代码，被提了Comment： "这样可选链似乎没有防住"

props.list?.map(item => item.id) || []

第一反应我竟然没看懂==

解释一下

因为props.list 有可能为string、number等不符合要求的类型，而这些类型下，同样会Type Error;

const list = ''
list?.map // undefined
list?.map(i => i) // TypeError: ""?.map is not a function
list.map?.(i => i) // undefined

基于此，我们复习一下可选链；

扩展

1. 可选链使用

• ?.

防住的是对象为null/undefined。

如a?.b?.c?.d，其中a、b、c任意值为空，不会报错；

• ?.()

防住list.map 为null/ undefined；如list.map?.(i => i)；

Attention: 若list.map = ''会报错；

• ?.[]

防住数组；如list?.[0]

2. 可选链编译大小

用可选链编译之后的大小是远大于直接使用的；

对于包体积要求极致的，请注意；

3. 可选链使用场景

用之前需要思考几个问题：

• a?.b，a是否不可能为空，如this.props、已赋值内容等；
• 若方法，参数已规定不能为空，就不要用。func(arr: Array) 这种；
• api请求回参data中，能够确保有值的，不要用；

对于api请求data的处理，有涉及到一个： 对数据来源信任的程度了。

是否需要在Data层校验强数据的格式，但这就有涉及代码冗余的问题；其中平衡，需要大家自己判断啦～

总结

可选链不可滥用，会导致体积增大等问题；

使用时需要思考一下是否有必要防，以及能防住嘛？

最后：愿我们都不会陷入无限的屎山中