JavaScript에서 '정의되지 않은 속성을 읽을 수 없음' 오류를 방지하는 방법은 무엇입니까?

정의되지 않은 속성 오류를 방지하는 방법

JavaScript에서는 다양한 중첩 수준의 객체가 혼합된 배열을 접하는 것이 일반적입니다. 모든 객체의 깊이가 동일하지 않은 경우 배열을 반복할 때 오류가 발생할 수 있습니다.

문제:

객체의 중첩 속성에 액세스하려고 하면 해당 속성에 대한 경로가 존재하지 않으면 JavaScript에서 오류가 발생합니다. 예를 들어 다음 코드에서는

var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

for (i=0; i<test.length; i++) {
    console.log(a.b.c);
}

i가 1일 때 루프에서 "정의되지 않은 속성을 읽을 수 없습니다" 오류가 발생합니다. 테스트 배열의 두 번째 요소에는 단일 a 속성만 있기 때문입니다. 중첩된 b 속성이 아닙니다.

해결책:

이러한 오류를 피하는 한 가지 방법은 다음을 사용하는 것입니다. 액세스하기 전에 각 속성이 존재하는지 확인하는 조건부 연산자:

for (i=0; i<test.length; i++) {
    if (a.b) {
        console.log(a.b.c);
    }
}

그러나 이 접근 방식은 깊게 중첩된 개체나 확인할 속성이 여러 개 있는 경우 지루할 수 있습니다.

선택적 연결(ES2020 ):

ES2020 이후 JavaScript 버전의 경우 선택 사항 체인(?.)은 속성에 액세스하기 전에 속성 존재 여부를 확인하는 보다 간결한 방법을 제공합니다. 예:

for (i=0; i<test.length; i++) {
    console.log(a?.b?.c);
}

배열의 개체에 대해 a 또는 b가 없으면 선택적 연결 연산자는 오류를 발생시키는 대신 정의되지 않음을 반환합니다.

getSafe () 도우미 기능(ES2020 이전):

ES2020 이전 JavaScript 버전의 경우 try/catch 블록을 사용하여 속성에 안전하게 액세스하는 도우미 함수를 정의할 수 있습니다.

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

for (i=0; i<test.length; i++) {
    console.log(getSafe(() => a.b.c));
}

이 함수는 속성 값이 있으면 속성 값을 반환하고, 속성이 없으면 기본값을 반환합니다.

위 내용은 JavaScript에서 '정의되지 않은 속성을 읽을 수 없음' 오류를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!