很是有热情写点说明可是,本身一直都不敢开始。有时候不知道写什么?有时候写点东西怕露怯,你都工做 8 ~ 9 年了还写这么 low 的东西。读了如何消除写做过程当中的痛苦,让写做变成一种享受 收到鼓舞。决定把工做遇到的问题及时记录下来。嗯,我不是个开拓者,我只是个记录者。javascript
一段时间观察线上监控(目前咱们公司的用的是 Sentry),发现大部分错误是java
TypeError: Cannot read property 'xxx' of undefined
复制代码
发生这样的错误,缘由其中有 2 条常常碰到:typescript
null
或者 {}
Staff
字段为 Staff: { Department: {...}}
, 迭代以后 Department
改为了 Id
参照,即Staff: {Department: xxxxxxxx}
这两种状况在业务迅速迭代的状况下很是常见。json
原生 js 的解决方案:segmentfault
if (Staff && Staff.Department && Staff.Department.Name) {
// your code here
}
复制代码
除了上面 👆 的方法 lodash 提供了 get 方法来解决这个问题,get 方法的定义:后端
Gets the value at
path
ofobject
. If the resolved value isundefined
, thedefaultValue
is returned in its place.async
根据 object 对象的 path 路径获取值。若是解析值是 undefined,就返回一个默认的值(defaultValue)函数
使用 get 方法上面的代码能够简化成fetch
_.get(Staff, `Staff.Department.Name`, "DefaultName");
复制代码
详细讲解请移步 ➡️ :lodash 的 get 方法jsonp
TypeScript 3.7 推出了两个新语言特性 可选链(Optional Chaining)和 空值合并运算符(nullish coalescing operator)更优雅地解决了这个问题。
那么什么是可选链呢?从本质上讲,有了可选链后,咱们编写代码时若是遇到 null 或 undefined 就能够当即中止某些表达式的运行。可选链的核心是新的 ?.
运算符,用于可选的属性访问。代码能够成
if(Staff?.Department?.Name){
// your code here
}
复制代码
那么?.
是否等价 &&
? 答案是否认的,&&
还包含了被强制转换成布尔值的状况(例如空字符串、0、NaN 和 false)
可选链的三种「姿式」
obj?.prop // Property access
obj?.[expr] // Optional element access
func?.(...args) // Optional function or method call
复制代码
用一个例子说明如何使用
type UserResponse = {
firstName: string
lastName: string
age: number
occupation?: string
jobHistory?: {
firstJob?: string
},
favoriteFoods?: string[]
}
const user: UserResponse;
// without optional chaining 🤢
const userOccupation = user && user.occupation;
// with optional chaining ❤️
const userOccupation = user?.occupation;
const userOccupation = user?.["occupation"];
// or
const favFood = user?.favoriteFoods?.[0];
复制代码
第三种状况:可选函数或方法调用
可选链式也能够用在函数调用中。当你须要在运行时有条件地调用一个函数时,它们就会派上用场,即只有在函数存在的状况下才会调用它。这能够这样实现。
const callFakeApi = async (url: string, log?: (user: object) => void ) => {
const response = await fetch(url);
const data = await response.json();
log?.(data);
}
callFakeApi('https://jsonplaceholder.typicode.com/todos/1', console.log);
复制代码
空值合并(Nullish Coalescing) 是 TypeScript 3.7 中的另外一个新特性,它与 Optional Chaining 密切相关。它使用一个独特的操做符:??,当一个表达式返回为 null
或 undefined
时,它做为默认值或 "回落"值。
使用方法:
// null value
null || 20 // returns 20
null ?? 20 // returns 20
// undefined value
undefined || 20 // returns 20
undefined ?? 20 // returns 20
// boolean
true ?? 10 // returns true
false ?? 10 // returns false
// NaN
NaN ?? 20 // returns NaN
// empty string
'' ?? 5 // returns ''
复制代码
特别注意和经常使用的||
区别:??
只对null
和 undefined
生效,可是 ||
对强制转换成布尔值都有效。用一个场景说明:下面这段代码片断尝试从 localStorage 中读取上次存储的值(若是有的话);然而,由于使用了 ||,它是有 bug 的:
unction initializeAudio() {
let volume = localStorage.volume || 0.5;
// ...
}
复制代码
当 localStorage.volume
被设成 0 时,volume
变量将被设成 0.5,这显然不是咱们想要的结果。??
避免了一些因假值(例如 0,NaN 以及 "")引发的一些预料以外的行为。