>웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 중첩된 개체 속성에 안전하게 액세스하고 '정의되지 않은 속성을 읽을 수 없음' 오류를 방지하려면 어떻게 해야 합니까?

JavaScript에서 중첩된 개체 속성에 안전하게 액세스하고 '정의되지 않은 속성을 읽을 수 없음' 오류를 방지하려면 어떻게 해야 합니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-05 07:37:09426검색

How Can I Safely Access Nested Object Properties in JavaScript and Avoid

중첩 객체에서 '정의되지 않은 속성을 읽을 수 없음' 오류 방지

JavaScript에서 일부 객체에 다음이 있는 경우 중첩 객체 작업이 어려울 수 있습니다. 속성이 누락되었습니다. 이로 인해 존재하지 않을 수 있는 속성에 액세스하려고 하면 "정의되지 않은 속성을 읽을 수 없습니다"와 같은 런타임 오류가 발생합니다.

한 가지 해결 방법은 조건문을 사용하여 속성에 액세스하기 전에 속성이 존재하는지 확인하는 것입니다. 그러나 깊게 중첩된 객체의 경우 이는 지루할 수 있습니다. 또 다른 접근 방식은 try/catch와 함께 도우미 함수를 활용하는 것입니다.

function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}

이 함수는 두 개의 매개 변수를 사용합니다.

  • fn: 검색하는 함수 속성 값.
  • defaultVal: 다음 경우에 반환할 선택적 기본값입니다. 속성이 정의되지 않았습니다.

이 도우미 함수를 사용하면 오류 없이 중첩된 속성에 액세스할 수 있습니다.

console.log(getSafe(() => obj.a.b.c)); // Logs "foo" or undefined if "c" doesn't exist

console.log(getSafe(() => obj.a.b.c, "Not found")); // Logs "Not found" if "c" doesn't exist

선택적 체이닝(ES2020)

ECMAScript 2020 이상에 따라 JavaScript를 사용하는 경우 다음과 같이 선택적 체이닝을 사용할 수 있습니다. 더 간단한 솔루션:

console.log(obj?.a?.b?.c); // Logs "foo" or undefined if any property in the chain is undefined

선택적 연결은 체인의 각 속성을 확인하고 정의되지 않은 속성이 있으면 정의되지 않은 것을 반환하여 오류를 방지합니다.

TypeScript 버전 3.7 이상에서는 선택적 연결도 지원됩니다. , 사용자 정의 도우미 기능이나 조건부 확인 없이 중첩된 객체를 처리하는 편리한 방법을 제공합니다.

위 내용은 JavaScript에서 중첩된 개체 속성에 안전하게 액세스하고 '정의되지 않은 속성을 읽을 수 없음' 오류를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.