es6 분해 란 무엇입니까?

es6에서 구조 분해는 특정 패턴에 따라 배열과 객체에서 값을 추출하고 변수에 값을 할당하는 프로세스입니다. 데이터 결과를 더 작은 부분으로 분할하는 프로세스이므로 단순화할 수 있습니다. 정보 추출 목적; 보다 일반적인 목적에는 객체 구조 분해, 배열 구조 분해 및 혼합 구조 분해가 포함됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6의 구조 분해란

구조 분해를 의미합니다. ES6에서는 배열과 객체에서 값을 추출하고 특정 패턴에 따라 변수에 값을 할당할 수 있습니다.

개발에서 가장 일반적인 것에는 객체 구조 분해, 배열 구조 분해, 혼합 구조 분해가 있습니다. 이는 정보 추출을 단순화하기 위해 데이터 구조를 더 작은 부분으로 나누는 프로세스입니다.

기존 개체나 배열을 하나씩 분할하여 필요한 데이터를 추출하세요. 데이터 구조를 더 작은 부분으로 나누는 과정입니다

ES6에서는 추출하려는 값을 일치시키기 위해 새로운 모드를 사용합니다. 구조 분해 할당은 이 모드를 사용합니다. 패턴은 분해 중인 데이터 구조를 매핑하고 패턴과 일치하는 데이터만 추출됩니다.

객체 구조 분해 예시

객체에서 값을 가져오는 전통적인 방법

let node = {
    type: 'Identifier',
    name: 'foo'
}
console.log(node.type) // Identifier
console.log(node.foo) // foo

구조 분해 사용

let node = {
    type: 'Identifier',
    name: 'foo'
}
let { type, name } = node
console.log(type) // Identifier
console.log(name) // foo

지정된 지역 변수 이름이 객체에 존재하지 않는 경우 지역 변수에는 정의되지 않은 값이 할당됩니다

let { type, name, value } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // undefined

지정된 속성이 존재하지 않는 경우 존재하지 않는 속성에 대해 기본값을 정의할 수 있습니다

let { type, name, value = true } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // true

구조해체 및 할당을 위한 새 변수 이름을 지정합니다

let arr = {
  six: '男',
  age: 19
}
let {six:newSix, age:newAge} = arr
console.log(six, age) // six is not defined
console.log(newSix, newAge) // 男 19

위를 보면 이상하다고 생각하시나요? 기존 개체 할당에는 왼쪽에 4개의 속성이 있고 오른쪽에 값이 있습니다. 하지만 구조 분해에서는 오른쪽이 속성이고 왼쪽이 값이므로 새 변수 이름이 오른쪽에 있습니다.

let, var 또는 const를 사용하여 객체를 분해하는 경우 분해된 객체의 값이 존재하지 않아야 합니다.

var, let, const 할당이 사용되지 않는 경우 구조 분해 문을 ()

（{type，name} = node);//{}在js中作为代码块，单独使用加等号会报错会报错

Nested object destructuring

Object 중첩 객체의 구조 분해, 첫 번째 수준 분해에서 계속 사용합니다. 중괄호는 다음 레이어를 더 깊이 검색하는 데 사용됩니다. 먼저 예를 살펴보겠습니다.

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

위는 중첩된 개체 노드입니다. 먼저 첫 번째 레이어를 분해해 보겠습니다.

let { loc, type, name } = node // {} Identifier foo

우리가 의도적으로 {의 속성을 중단한 것을 볼 수 있습니다. } 순서에 따라 결과가 여전히 올바르게 출력되므로 특정 해당 메소드는 이름을 기반으로 해야 하며 순서와는 아무런 관련이 없음을 추측할 수 있습니다.

계속해서 두 번째 레이어를 분해하세요

let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 4

여기서 start를 새로운 사용자 정의 지역 변수에 할당할 수도 있습니다. 이를 newStart

let { loc: { start: newStart }} = node
console.log(newStart.line) // 1
console.log(newStart.column) // 4

에 할당한다고 가정해 보겠습니다. 요약은 다음과 같습니다.

콜론 앞의 모든 식별자는 검색 위치를 나타냅니다. 개체의 오른쪽은 할당할 변수 이름입니다. 콜론 뒤에 중괄호가 오면 할당할 최종 값이 개체 내의 더 깊은 수준에 중첩되어 있음을 의미합니다.

【관련 추천:

javascript 비디오 튜토리얼, web front-end】

위 내용은 es6 분해 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!