昨天我们看到了无效的合并，今天让我们看一下可选链的另一个很棒的ESnext功能。不谈论真是太棒了。
就像nullish凝聚，可选的链接可以帮助我们处理undefined和null案件。让我们考虑以下示例
let company = {
name: 'Github',
revenue: 2000,
users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
getUserNames() {
return users.map(user => user.name)
}
}
访问该对象的值（如果它们或对象可以），undefined或者null我们通常将执行以下操作。
const companyName = (company !== undefined && company !== null) ? company.name : undefined;
与可选链接相反，我们可以
const companyName = company?.name;
语法
obj?.prop // optional static property access
obj?.[expr] // optional dynamic property access
func?.(...args) // optional function or method call
让我们看看如何处理访问对象属性的多种方式。
- 静态的
- 动态
- 函数调用
- 访问Dom
静态特性
let company = {
name: 'Github',
revenue: 2000,
users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
getUserNames() {
return users.map(user => user.name)
}
}
// with optional Chaining
const companyName = company?.name;
// without optional Chaining
const companyName = (company !== undefined && company !== null) ? company.name : undefined;
动态特性
let company = {
name: 'Github',
revenue: 2000,
users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
getUserNames() {
return users.map(user => user.name)
}
}
// with optional Chaining
const companyName = company?.['name'];
// without optional Chaining
const companyName = (company !== undefined && company !== null) ? company['name'] : undefined;
函数调用
let company = {
name: 'Github',
revenue: 2000,
users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
getUserNames() {
return users.map(user => user.name)
}
}
// with optional Chaining
company.getUserNames?.();
// without optional Chaining
const companyName = (company !== undefined && company !== null && Object.prototype.hasOwnProperty('getUserNames') && typeof company.getUserNames === 'function') ? company['name'] : undefined;
访问Dom
可选链接支持DOM及其方法，因此我们可以做这样的事情
const val = document.querySelector('input#name')?.value;
undefined如果表达式失败，则将始终返回可选的链接。
const value = company?.name;
// 'value' will be undefined if company is undefined.
因此，我们可以将可选链与无效合并配对以处理这些情况。
const value = company?.name ?? 'default name';
// 'value' will be 'default name' if either the company or name is undefined or null.
用一个完整的例子总结一下
let company = {
name: 'Github',
revenue: 2000,
users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
getUserNames() {
return users.map(user => user.name)
}
}
// Static access with default value
const value = company?.name ?? 'default name';
// Dynamic access with default value
const companyName = company?.['name'] ?? 'default value';
// Function call
company.getUserNames?.();
可选的链接和无效合并通过降低复杂性并使代码可读性带来了很多好处。请尝试一下，并在下面的评论中让我知道您的意见。
您可以使用以下babel插件在今天使用它们。
