ES6 배열 구조 분해 이상: 세미콜론이 중요한 이유는 무엇입니까?

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

설명

예기치 않은 동작은 두 구조 분해 문 사이에 세미콜론이 없기 때문에 발생합니다. ES6에서는 세미콜론이 자동으로 삽입되지 않습니다. 따라서 코드는 하나의 큰 명령문으로 구문 분석됩니다.

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

이 명령문에서 쉼표 연산자는 배열 ['BB', 'C의 할당인 괄호 안의 마지막 표현식으로 평가됩니다. ']를 왼쪽(b, c)으로 이동합니다. 결과적으로 b는 'BB'를 받고 c는 'C'를 받습니다.

그러나 두 번째 구조 분해 할당은 배열 ['BB', ' 대신 빈 배열 리터럴([])에 잘못 할당되었습니다. 기음']. 이는 배열 리터럴이 줄 시작 부분에 세미콜론 없이 괄호로 묶여 있기 때문입니다.

이 문제를 해결하려면 세미콜론을 사용하여 개별 할당을 구분하세요.

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

세미콜론을 올바르게 사용하면 예상한 결과를 얻을 수 있습니다.

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