JavaScript의 선택적(?.) 연산자에 대해 이야기해 보겠습니다.-JS 튜토리얼-php.cn

JavaScript의 선택적(?.) 연산자에 대해 이야기해 보겠습니다.

青灯夜游

풀어 주다： 2021-06-16 09:43:03

앞으로

1817명이 탐색했습니다.

이 글에서는 JavaScript의 선택적(?.) 연산자를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

JavaScript의 선택적(?.) 연산자에 대해 이야기해 보겠습니다.

null(null 및 undefine)을 사용하여 액세스 개체의 중첩 속성을 확인하는 방법은 무엇입니까? 백엔드의 인터페이스에서 사용자 세부 정보에 액세스해야 한다고 가정해 보겠습니다. 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 &#39;country&#39; 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 &#39;name&#39; of undefined"

로그인 후 복사

改用 ?. 访问不存在的数组：

console.log(user.dislikes?.[0]?.name); 
// "undefined"

로그인 후 복사

`<strong>??</strong>` 操作符

我们知道 ?. 操作符号如果对象不存在，刚返回 undefined，开发中可能不返回 undefined 而是返回一个默认值，这时我们可以使用双问题 ??

중첩된 삼항 연산자를 사용할 수 있습니다:

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

로그인 후 복사

또는 null 검사에 if를 사용합니다:

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

로그인 후 복사

또는 다음과 같이 && 조건을 한 줄로 연결하는 것이 더 좋습니다. :

rrreee
위 코드의 공통점은 링크가 때때로 매우 장황해지고 형식을 지정하고 읽기가 더 어려워진다는 것입니다. 이것이 ?. 연산자가 제안된 이유입니다. ?.를 변경하고 위 코드를 재구성해 보겠습니다.
rrreee
아주 좋습니다.

구문

?. 구문은 ES2020에서 도입되었으며 사용법은 다음과 같습니다:

rrreee

`?.` 연산자 사용

user 개체가 있다고 가정합니다: rrreee

속성

기존 속성에 액세스: 🎜rrreee🎜존재하지 않는 속성에 액세스: 🎜rrreee🎜 대신 ?.를 사용하세요. 존재하지 않는 속성에 액세스: 🎜rrreee

메서드

🎜기존 메소드에 액세스: 🎜rrreee🎜존재하지 않는 메소드에 액세스: 🎜rrreee🎜존재하지 않는 메소드에 액세스하려면 대신 ?.를 사용하세요. 🎜rrreee배열🎜기존 배열에 액세스: 🎜rrreee🎜존재하지 않는 메서드에 액세스: 🎜rrreee🎜

 사용?. 대신 존재하지 않는 배열에 액세스: 🎜rrreee
<strong>??</strong> 연산자
 🎜우리는 ?. 연산 기호를 알고 있습니다. 객체가 존재하지 않으면 undefine을 반환하지만 개발 중에는 undefine을 반환하지 않을 수도 있습니다. 이 경우에는 이중 질문 ?? 연산자를 사용할 수 있습니다. 🎜🎜좀 추상적이므로 직접 예를 들어보겠습니다. 🎜rrreee🎜기본값 반환 필요: 🎜rrreee🎜🎜영어 원본 주소: https://codingncoepts.com/javascript/ional-chaining-opeator-javascript/🎜 🎜저자: Ashish Lahoti 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 JavaScript의 선택적(?.) 연산자에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!