Lassen Sie uns über den optionalen (?.) Operator in JavaScript sprechen

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 而是返回一个默认值，这时我们可以使用双问题 ??

Sie können verschachtelte ternäre Operatoren verwenden:

const country = user.officeaddress?.country;
console.log(country);
// undefined

Oder if für die Nullprüfung verwenden:

const country = user.officeaddress?.country ?? "中国";
console.log(country);
// 中国

Oder noch besser: Machen Sie daraus eine einzeilige verkettete && Bedingung, wie diese :

rrreee

Was 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 ?. vorgeschlagen. Ändern wir ?. und rekonstruieren den obigen Code:

rrreee

Es ist sehr schön.

Syntax

?.-Syntax wurde in ES2020 eingeführt und wird wie folgt verwendet:

rrreee

Verwenden Sie den Operator ?.

Angenommen, wir haben ein user-Objekt: rrreee

Attribute

Zugriff auf vorhandene Attribute: 🎜rrreee🎜Zugriff auf nicht vorhandene Attribute: 🎜rrreee🎜Verwenden Sie stattdessen ?.. Zugriff auf nicht vorhandene Attribute: 🎜rrreee

Methoden

🎜Zugriff auf vorhandene Methoden: 🎜rrreee🎜Zugriff auf nicht vorhandene Methoden: 🎜rrreee🎜Verwenden Sie stattdessen ?., 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!