JavaScript - 可选链

你好啊，未来的JavaScript大师们！? 今天，我们将踏上一段激动人心的旅程，探索可选链（Optional Chaining）的奥秘。如果你是编程新手，不用担心——我会作为你的友好向导，我们会一步一步来。在本课结束时，你将能够像专业人士一样进行链式操作！让我们开始吧！

JavaScript - Optional Chaining

不存在的属性问题

想象你在一个庞大的图书馆里找一本书。你知道它应该在“科幻”区，在三楼的后部角落。但如果图书馆根本没有三楼呢？或者如果没有“科幻”区呢？这就是我们在JavaScript中处理嵌套对象时经常面临的问题。

让我们来看一个例子：

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

如果你运行这段代码，你会得到一个错误：“Cannot read property 'books' of undefined”。为什么？因为library.fiction.sciFi不存在！这就是可选链大显身手的地方。

JavaScript中的可选链是什么？

可选链就像是给你的代码装上了一个安全网。它允许你在不担心中间属性是否存在的情况下访问嵌套对象属性。它用?.操作符表示。

让我们用可选链重写之前的例子：

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

现在，这段代码不会抛出错误，而是简单地返回undefined。就像在问：“如果sciFi存在，你能给我它的books吗？如果不存在，没问题！”

可选链与函数调用

可选链不仅仅适用于对象属性。你还可以用它来调用函数！假设我们有一个图书馆系统，可以借阅书籍：

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`借出 ${book}`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

在这个例子中，'The Hobbit'将被借出，但'nothing'会发生在'Dune'上，因为sciFi不存在。没有错误，一切顺利！

可选链与表达式

你还可以在方括号表示法中使用可选链。这在属性名是动态的或包含特殊字符时很有用：

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

这会返回undefined，因为没有ID为'789'的用户，但不会抛出错误。

可选链与“delete”操作符

delete操作符也可以与可选链一起使用。这在你想要删除可能不存在的属性时很方便：

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

第一个delete将如预期工作，删除innerProp。第二个delete什么也不会做，但不会抛出错误。

可选链的短路特性

可选链有一个很酷的特性，叫做短路。如果?.左边的部分是null或undefined，则评估停止并返回undefined：

const obj = null;
console.log(obj?.prop?.subProp);  // 返回 undefined

这对于避免那些烦人的“Cannot read property of null”错误非常有帮助！

可选链与空值合并运算符

空值合并运算符（??）与可选链配合得很好。它允许你为可选链的结果为null或undefined时提供一个默认值：

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? '失业');  // 返回 '失业'
console.log(user.details?.age ?? '未知');   // 返回 30

这对于在属性可能不存在时提供备用值非常完美。

下面是我们所涵盖方法的总结表格：

方法	语法	描述
属性访问	`obj?.prop`	安全访问嵌套对象属性
函数调用	`func?.()`	安全调用可能不存在的函数
表达式	`obj?.[expr]`	安全访问具有动态或特殊名称的属性
删除操作符	`delete obj?.prop`	安全删除可能不存在的属性
短路	`obj?.prop?.subProp`	如果任何部分为null或undefined，停止评估
与空值合并运算符	`obj?.prop ?? defaultValue`	为null或undefined结果提供备用值

就这样，大家！你们刚刚通过可选链提升了你们的JavaScript技能。记住，编程就像搭乐高——从基础开始，不知不觉中，你就能创作出杰作。继续练习，保持好奇心，快乐编程！??‍??‍?

Credits: Image by storyset