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

정의되지 않은 속성 오류 해결

JavaScript에서 중첩된 데이터 구조를 처리할 때 "정의되지 않은 속성을 읽을 수 없습니다" 오류가 발생하면 실망스러울 수 있습니다. 정의되지 않은 값이나 null 값의 속성에 액세스하려고 시도할 때 발생합니다. 다음 배열을 고려해보세요.

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

이 배열을 반복하고 다음과 같이 c 속성을 기록하려고 시도하면

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

a.b가 다음인 두 번째 항목에서 오류가 발생합니다. 한정되지 않은. 이 오류를 방지하기 위해 일반적인 접근 방식은 속성 체인의 각 수준을 확인하는 것입니다.

if (a && a.b) {
    console.log(a.b.c);
}

그러나 깊게 중첩된 데이터 구조를 처리할 때 이는 지루할 수 있습니다. 다행히 대체 솔루션이 있습니다.

선택적 체이닝(ES2020 및 TypeScript 3.7)

ECMAScript 2020 이상 또는 TypeScript 버전 3.7에 따라 JavaScript를 사용하는 경우 이상에서는 선택적 연결을 활용할 수 있습니다. 이 연산자 ?.는 오류 발생 없이 안전하게 중첩된 속성에 액세스합니다.

console.log(obj?.a?.lot?.of?.properties);

도우미 함수 해결 방법(이전 JavaScript 버전)

이전 버전의 JavaScript의 경우 ES6 화살표 기능이 포함된 try/catch 도우미 기능이 솔루션을 제공할 수 있습니다.

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

console.log(getSafe(() => obj.a.lot.of.properties));

다음을 수행할 수 있습니다. 또한 선택적 기본값을 제공하십시오:

console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

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