>웹 프론트엔드 >JS 튜토리얼 >ES6 배열 구조 분해: 예상대로 작동하지 않는 이유는 무엇입니까?

ES6 배열 구조 분해: 예상대로 작동하지 않는 이유는 무엇입니까?

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

ES6 Array Destructuring: Why Doesn't It Work As Expected?

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=undefine

설명:

예상과 달리 이 코드는 원하는 출력을 생성하지 않습니다. 대신 b와 c의 값을 바꾸고 c는 정의되지 않은 상태로 둡니다. 왜 이런 일이 발생하는지 이해하려면 코드를 자세히 조사해야 합니다.

파싱 및 평가:

JavaScript에서 세미콜론은 문을 구분하는 선택 사항입니다. 명시적인 세미콜론이 없으면 코드는 단일 문으로 구문 분석됩니다.

<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']는 원래 코드의 것과 유사한 구조 분해 할당입니다.
  • [(b, c)] = ['BB', 'C']는 다음과 같은 할당 표현식입니다. 배열 ['BB', 'C']를 왼쪽 피연산자에 할당합니다. 이 표현식은 동일한 배열로 평가됩니다.
  • ['A', 'B'][…]는 속성 참조입니다. 정의되지 않음으로 평가되는 배열 리터럴.
  • (b, c)는 정의되지 않은 마지막 피연산자(c)로 평가되는 쉼표 연산자를 사용합니다.

의미:

따라서 코드는 a와 c 모두에 정의되지 않은 값을 할당하는 반면 b는 'C' 값을 올바르게 수신합니다. 이 동작을 방지하려면 프로그래머는 명시적으로 세미콜론을 사용하거나 모든 줄을 an으로 시작해야 합니다. 세미콜론을 자동으로 삽입해야 하는 연산자(예: (, [, /, , - 또는 `)).

이를 이해하면 ES6의 구조 분해 할당이 예상대로 작동하여 예기치 않은 값 교환 및 정의되지 않은 할당을 방지할 수 있습니다. .

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

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