一、引言
在日常的编程工作中，我们经常会遇到处理深层嵌套对象的情况。想象一下，你从服务器获取了一个复杂的 JSON 数据，里面有多层嵌套的对象和数组。要是其中某个层级的值是 null 或者 undefined，直接访问深层属性就可能会报错。这时候，TypeScript 里的可选链和空值合并运算符就能派上大用场了，它们可以让我们更优雅地处理这种情况。
二、可选链运算符（?.）
2.1 基本概念
可选链运算符（?.）是 TypeScript 3.7 引入的一个新特性。它允许我们在访问对象属性或者调用方法时，先检查对象是否为 null 或者 undefined。如果是，就直接返回 undefined，而不会抛出错误。
2.2 示例演示
下面是一个简单的 TypeScript 示例：
// TypeScript 技术栈
// 定义一个可能为 null 或 undefined 的对象
const user: {
name: string;
address?: {
street: string;
city: string;
};
} | null = null;
// 使用可选链运算符访问深层属性
const street = user?.address?.street;
console.log(street); // 输出: undefined
在这个示例中，user 对象可能为 null。我们使用可选链运算符 ?. 来访问 address 属性和 street 属性。因为 user 是 null，所以整个表达式直接返回 undefined，而不会抛出错误。
2.3 更多应用场景
可选链运算符还可以用于调用方法。比如：
// TypeScript 技术栈
const person = {
sayHello: () => {
console.log('Hello!');
}
};
const anotherPerson = null;
// 使用可选链运算符调用方法
person?.sayHello(); // 输出: Hello!
anotherPerson?.sayHello(); // 不会报错，没有输出
这里，person 对象有 sayHello 方法，使用可选链调用可以正常执行。而 anotherPerson 是 null，使用可选链调用不会报错，直接返回 undefined。
三、空值合并运算符（??）
3.1 基本概念
空值合并运算符（??）用于在一个值为 null 或者 undefined 时，提供一个默认值。它和逻辑或运算符（||）有点类似，但逻辑或运算符会把一些假值（如 0、''、false 等）也当作需要替换的值，而空值合并运算符只针对 null 和 undefined。
3.2 示例演示
// TypeScript 技术栈
// 定义一个可能为 null 或 undefined 的变量
const value: string | null = null;
// 使用空值合并运算符提供默认值
const result = value ?? 'default value';
console.log(result); // 输出: default value
在这个示例中，value 是 null，所以空值合并运算符会返回右边的默认值 'default value'。
3.3 与逻辑或运算符的对比
// TypeScript 技术栈
const num = 0;
// 使用逻辑或运算符
const orResult = num || 10;
console.log(orResult); // 输出: 10
// 使用空值合并运算符
const nullishResult = num ?? 10;
console.log(nullishResult); // 输出: 0
这里可以看到，逻辑或运算符把 0 当作假值，返回了右边的值 10。而空值合并运算符只处理 null 和 undefined，所以返回了 0。
四、可选链与空值合并运算符的结合使用
4.1 示例演示
// TypeScript 技术栈
const data = {
user: {
profile: {
age: null
}
}
};
// 结合使用可选链和空值合并运算符
const age = data?.user?.profile?.age ?? 18;
console.log(age); // 输出: 18
在这个示例中，我们先使用可选链运算符安全地访问 age 属性，因为 age 是 null，所以空值合并运算符返回默认值 18。
4.2 实际应用场景
在实际开发中，我们经常会从服务器获取数据，数据可能不完整。比如，一个用户信息对象，有些字段可能没有值。我们可以使用可选链和空值合并运算符来处理这种情况，确保程序的健壮性。
// TypeScript 技术栈
// 模拟从服务器获取的用户数据
const userData = {
name: 'John',
address: {
city: null
}
};
// 安全地获取用户地址的城市信息，并提供默认值
const city = userData?.address?.city ?? 'Unknown';
console.log(city); // 输出: Unknown
五、应用场景
5.1 数据获取与展示
在前端开发中，我们从后端获取数据后，数据结构可能比较复杂，有些字段可能为 null 或 undefined。使用可选链和空值合并运算符可以避免因访问这些字段而导致的错误，确保页面正常展示。
// TypeScript 技术栈
// 模拟从后端获取的用户数据
const userInfo = {
name: 'Alice',
contact: {
phone: null
}
};
// 安全地获取用户的电话号码，并提供默认值
const phone = userInfo?.contact?.phone ?? 'No phone number';
console.log(phone); // 输出: No phone number
5.2 配置文件处理
在处理配置文件时，有些配置项可能没有设置。使用可选链和空值合并运算符可以方便地处理这种情况，提供默认配置。
// TypeScript 技术栈
// 模拟配置文件
const config = {
database: {
host: null,
port: 3306
}
};
// 安全地获取数据库主机地址，并提供默认值
const host = config?.database?.host ?? 'localhost';
console.log(host); // 输出: localhost
六、技术优缺点
6.1 优点
- 提高代码的健壮性：使用可选链和空值合并运算符可以避免因访问 null 或 undefined 对象而导致的错误，让代码更加稳定。
- 代码更简洁：减少了大量的 null 检查代码，使代码更加简洁易读。
// TypeScript 技术栈
// 传统的 null 检查方式
const oldUser = {
info: {
email: null
}
};
let oldEmail;
if (oldUser && oldUser.info && oldUser.info.email) {
oldEmail = oldUser.info.email;
} else {
oldEmail = 'default@example.com';
}
console.log(oldEmail); // 输出: default@example.com
// 使用可选链和空值合并运算符
const newUser = {
info: {
email: null
}
};
const newEmail = newUser?.info?.email ?? 'default@example.com';
console.log(newEmail); // 输出: default@example.com
6.2 缺点
- 兼容性问题：可选链和空值合并运算符是比较新的特性，一些旧版本的浏览器可能不支持。在使用时需要考虑兼容性，可以使用 Babel 等工具进行转换。
- 可能掩盖潜在问题：过度使用可选链和空值合并运算符可能会掩盖一些潜在的问题，比如数据结构的错误。在开发过程中，还是需要对数据进行适当的验证。
七、注意事项
7.1 兼容性处理
如果你的项目需要支持旧版本的浏览器，需要使用 Babel 等工具对代码进行转换。可以安装 @babel/plugin-proposal-optional-chaining 和 @babel/plugin-proposal-nullish-coalescing-operator 插件。
7.2 避免滥用
虽然可选链和空值合并运算符很方便，但也不能滥用。在一些情况下，还是需要对数据进行严格的验证，确保数据的正确性。
八、文章总结
TypeScript 中的可选链和空值合并运算符为我们处理深层嵌套对象可能为 null 或 undefined 的情况提供了一种优雅的解决方案。可选链运算符可以安全地访问对象属性和调用方法，避免了因对象为 null 或 undefined 而导致的错误。空值合并运算符可以在值为 null 或 undefined 时提供默认值，与逻辑或运算符有所区别。
在实际开发中，我们可以将它们结合使用，提高代码的健壮性和简洁性。不过，我们也需要注意兼容性问题和避免滥用。通过合理使用这两个特性，我们可以让代码更加稳定和易读。
评论