Dieser Artikel stellt Ihnen den optionalen (?.)-Operator in JavaScript vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Wie überprüfe ich verschachtelte Eigenschaften eines Zugriffsobjekts mit null (null und undefiniert)? Angenommen, wir müssen über die Schnittstelle im Backend auf Benutzerdetails zugreifen. null和undefined)检查访问对象的嵌套属性?假设我们必须从后台的接口访问用户详细信息。
可以使用嵌套的三元运算符 :
const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null;
或者使用 if 进行空值检查：
let userName = null;
if(response && response.data && response.data.user){
userName = response.data.user.name;
}或者更好的方法是使它成为一个单行链接的&&条件，像这样:
const userName = response && response.data && response.data.user && response.data.user.name;
上述代码的共同之处在于，链接有时会非常冗长，并且变得更难格式化和阅读。这就是 ?.操作符被提出来的原因，我们改下 ?. 重构上面的代码：
const userName = response?.data?.user?.name;
很 nice 呀。
?. 语法在ES2020 中被引入，用法如下：
obj.val?.pro // 如果`val`存在，则返回`obj.val.prop`，否则返回 `undefined`。 obj.func?.(args) // 如果 obj.func 存在，则返回 `obj.func?.(args)`，否则返回 `undefined`。 obj.arr?.[index] // 如果 obj.arr 存在，则返回 `obj.arr?.[index]`，否则返回 `undefined`。
?.操作符假设我们有一个 user 对象：
const user = {
name: "前端小智",
age: 21,
homeaddress: {
country: "中国"
},
hobbies: [{name: "敲代码"}, {name: "洗碗"}],
getFirstName: function(){
return this.name;
}
}访问存在的属性：
console.log(user.homeaddress.country); // 中国
访问不存在的属性：
console.log(user.officeaddress.country); // throws error "Uncaught TypeError: Cannot read property 'country' of undefined"
改用 ?. 访问不存在的属性：
console.log(user.officeaddress?.country); // undefined
访问存在的方法：
console.log(user.getFirstName());
访问不存在的方法：
console.log(user.getLastName()); // throws error "Uncaught TypeError: user.getLastName is not a function";
改用 ?. 访问不存在的方法：
console.log(user.getLastName?.()); // "undefined"
访问存在的数组：
console.log(user.hobbies[0].name); // "敲代码"
访问不存在的方法：
console.log(user.hobbies[3].name); // throws error "Uncaught TypeError: Cannot read property 'name' of undefined"
改用 ?. 访问不存在的数组：
console.log(user.dislikes?.[0]?.name); // "undefined"
<strong>??</strong> 操作符我们知道 ?. 操作符号如果对象不存在，刚返回 undefined，开发中可能不返回 undefined 而是返回一个默认值，这时我们可以使用双问题 ??
const country = user.officeaddress?.country; console.log(country); // undefined
if für die Nullprüfung verwenden: const country = user.officeaddress?.country ?? "中国"; console.log(country); // 中国
&& Bedingung, wie diese : rrreeeWas die oben genannten Codes gemeinsam haben, ist, dass Links manchmal sehr ausführlich sein können und schwieriger zu formatieren und zu lesen sind. Aus diesem Grund wurde der Operator
rrreee?.vorgeschlagen. Ändern wir?.und rekonstruieren den obigen Code:Es ist sehr schön.
Syntax
?.-Syntax wurde in ES2020 eingeführt und wird wie folgt verwendet: rrreee
?.user-Objekt: rrreee?.. Zugriff auf nicht vorhandene Attribute: 🎜rrreee ?., um auf nicht vorhandene Methoden zuzugreifen: 🎜rrreeeArray🎜Zugriff auf ein vorhandenes Array: 🎜rrreee🎜Zugriff auf eine nicht vorhandene Methode: 🎜rrreee🎜Verwenden Sie ?. stattdessen auf nicht vorhandenes Array zugreifen: 🎜rrreee
<strong>??</strong> Operator
🎜Wir kennen das Operationssymbol ?. Wenn das Objekt nicht existiert, wird es nur undefiniert zurückgeben. Während der Entwicklung wird möglicherweise nicht undefiniert zurückgegeben Geben Sie einen Standardwert zurück. Sie können den Doppelfrage-Operator ?? verwenden. 🎜🎜Es ist etwas abstrakt, nehmen wir direkt ein Beispiel: 🎜rrreee🎜Der Standardwert muss zurückgegeben werden: 🎜rrreee🎜🎜Englische Originaladresse: https://codingncoepts.com/javascript/optional-chaining-opeator-javascript/🎜 🎜Autor: Ashish Lahoti 🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜Das obige ist der detaillierte Inhalt vonLassen Sie uns über den optionalen (?.) Operator in JavaScript sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
