>웹 프론트엔드 >JS 튜토리얼 >ES6 어레이 구조 분해로 인해 예기치 않은 동작이 발생하는 이유는 무엇입니까?

ES6 어레이 구조 분해로 인해 예기치 않은 동작이 발생하는 이유는 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-10-24 06:39:30689검색

Why Did My ES6 Array Destructuring Lead to Unexpected Behavior?

ES6 배열 분해: 예상치 못한 동작 이해

ES6에서 배열 분해를 사용하면 배열에서 특정 요소를 추출하여 할당할 수 있습니다. 변수. 그러나 특정 구문 규칙을 간과하면 예기치 않은 동작이 발생할 수 있습니다. 다음 코드를 고려하십시오.

<code class="js">let a, b, c;
[a, b] = ['A', 'B'];
[b, c] = ['BB', 'C'];
console.log(`a=${a} b=${b} c=${c}`);</code>

예상 결과:

  • a = A
  • b = BB
  • c = C

실제 결과:

  • a = BB
  • b = C
  • c = 정의되지 않음

설명:

질문에서 지적했듯이 줄 사이에 세미콜론이 없으면 예상치 못한 동작이 발생합니다. 명시적인 세미콜론이 없으면 코드는 단일 명령문으로 해석됩니다.

<code class="js">let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);</code>

이 분석은 비정상적인 결과를 설명합니다.

  • [a, b] = ([' A', 'B']는 a를 정의되지 않음으로 설정하고 b를 B로 설정합니다.
  • [(b, c)] = ['BB', 'C']는 할당 표현식 내에서 배열을 b 및 c에 할당하여 배열로 평가되도록 합니다.
  • 'A', 'B'는 배열 리터럴에 대한 속성 참조입니다.
  • (b, c)는 c(정의되지 않음)를 평가하는 효과가 있는 쉼표 연산자를 사용합니다.

이러한 의도하지 않은 결과를 방지하려면 괄호, 대괄호, 나누기 연산자, 더하기 연산자, 빼기 연산자 또는 백틱(태그된 템플릿의 경우)으로 시작하는 명령문 뒤에 세미콜론을 명시적으로 추가하는 것이 중요합니다. 이 규칙을 따르면 각 행이 별도의 명령문으로 처리됩니다. 예상치 못한 평가와 잘못된 결과를 방지합니다.

위 내용은 ES6 어레이 구조 분해로 인해 예기치 않은 동작이 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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