자바 스크립트의 파괴 대상 및 배열

JavaScript 해체 및 할당 : 코드를 단순화하고 가독성 향상

JavaScript의 해체 된 할당을 사용하면 간결한 구문을 사용하여 배열 또는 객체에서 개별 요소를 추출하여 변수에 할당하여 코드를 단순화하고 더 명확하고 쉽게 읽을 수 있습니다.

API 응답 처리, 기능 프로그래밍 및 React와 같은 프레임 워크 및 라이브러리를 포함하여 해체 및 할당은 널리 사용됩니다. 또한 중첩 된 객체 및 배열, 기본 기능 매개 변수, 가변 값 교환, 함수에서 여러 값을 반환하고, 고리를 찾는 경우 및 정규 표현 처리에도 사용할 수 있습니다. 해체 된 할당을 사용할 때 다음 사항에주의를 기울여야합니다. 코드 블록처럼 보이므로 곱슬 괄호로 진술을 시작할 수 없습니다. 오류를 피하려면 변수가 선언 된 경우 변수를 선언하거나 브래킷을 사용하십시오. 또한 선언 된 변수와 노출되지 않은 변수를 혼합하지 않도록주의하십시오.

해체 할당을 사용하는 방법

배열 해체

우리가 배열이 있다고 가정하십시오 :

해체는 각 요소를 추출하는 데 더 쉽고 오류가 발생하기 쉬운 대안을 제공합니다.

예를 들어 할당 할 때 값 이름을 생략하여 특정 값을 무시할 수 있습니다.

또는 나머지 연산자 (...)를 사용하여 나머지 요소를 추출하십시오.

객체 해체 해체는 물체에도 적용됩니다 : 이 예에서 변수 이름 1, 2 및 3은 객체 속성 이름과 일치합니다. 예를 들어 이름의 변수에 속성을 할당 할 수도 있습니다.

중첩 객체 해체 더 복잡한 중첩 객체도 참조 할 수 있습니다.

이것은 조금 복잡해 보이지만 모든 해체 된 과제에서 :

.

할당의 왼쪽은 해체 목표입니다. 과제의 오른쪽에는 해체 된 소스 - 추출 된 데이터가 포함 된 배열 또는 객체

const myArray = ['a', 'b', 'c'];

예방 조치

주목해야 할 다른 것들이 있습니다. 첫째, 코드 블록처럼 보이기 때문에 곱슬 괄호로 진술을 시작할 수 없습니다.

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

예를 들어 와 같은 변수를 선언해야합니다

또는 변수가 선언 된 경우 괄호를 사용하십시오.

다음과 같은 선언 된 변수 및 명확하지 않은 변수를 혼합하지 않도록주의해야합니다.

const [one, , three] = myArray;

// one = 'a', three = 'c'

위는 해체에 대한 기본 지식입니다. 그렇다면 어떤 상황에서 작동합니까? 이 질문을 해줘서 다행입니다.

해체 된 사용 사례

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

간단한 진술

변수는 각 값을 명시 적으로 정의하지 않고 선언 할 수 있습니다. 정통, 해체 된 버전이 더 길다. 더 많은 항목의 경우에는 해당되지 않을 수도 있지만 읽기가 더 쉽습니다.

변수 값 exchange

스왑 값은 임시 세 번째 변수가 필요하지만 해체를 사용하는 것이 훨씬 쉽습니다.

당신은 두 가지 변수에 국한되지 않습니다.

const myArray = ['a', 'b', 'c'];

기본 함수 매개 변수 메타 객체를 출력 할 수있는 prettyprint () 함수가 있다고 가정합니다. 해체가없는 경우 적절한 기본값을 사용할 수 있도록이 개체를 구문 분석해야합니다.

이제 모든 매개 변수에 기본값을 할당 할 수 있습니다.

그러나 우리는 해체를 사용하여 값을 추출하고 필요한 경우 기본값을 할당 할 수 있습니다.

이것이 읽기가 더 쉬운 지 확실하지 않지만 분명히 짧습니다.

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

함수에서 여러 값을 반환

const [one, , three] = myArray;

// one = 'a', three = 'c'

함수는 하나의 값 만 반환 할 수 있지만 복잡한 객체 또는 다차원 배열 일 수 있습니다. 과제 해체는 이것을보다 실용적으로 만듭니다

for-of loop

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

도서 정보 배열을 고려하십시오 :

es6의 for-of는 index/key 대신 각 값을 추출한다는 점을 제외하고는 for-in과 유사합니다.

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

해체 할당은 다음과 같은 추가 개선 사항을 제공합니다

정규 표현 처리

정규 표현 함수 (예 : 일치)는 해체 된 과제의 출처를 구성 할 수있는 일련의 일치를 반환합니다. 추가 읽기

해체 할당 - Mdn

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'

JavaScript를 사용하여 과제 해체에 대한 성능 손실 -Reddit 진술의 - mdn ES6 해체 할당 (FAQ)에 대한 자주 질문을 자주 묻습니다 (FAQ 부분은 길이가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부분의 내용은 원래 텍스트와 우연의 일치이며 직접 보유는 의사가 유발됩니다. -원래가 너무 낮아서.) 명세서 조정, 동의어 교체 및 단락 개편을 원본 텍스트의 재구성, 원본 텍스트의 의사 원리 처리가 완료되며 그림의 원래 형식과 위치가 유지됩니다.

위 내용은 자바 스크립트의 파괴 대상 및 배열의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!