es6의 해체는 무엇을 의미합니까?

es6에서 구조 분해란 특정 패턴에 따라 배열과 객체에서 값을 추출하고 변수에 값을 할당하는 행위를 의미하며 분해 방법인 객체 구조, 배열 구조 분해 및 혼합 구조 분해가 포함됩니다. 데이터 구조를 프로세스의 더 작은 부분으로 나누어 정보 추출 목적을 단순화합니다.

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

es6에서 구조 분해란 무엇을 의미하나요?

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

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

객체 해체

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

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

Destructuring 사용

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개의 속성이 있고 오른쪽에 4개의 속성이 값입니다. 하지만 구조 분해에서는 오른쪽이 속성이고 왼쪽이 값이므로 새 변수 이름이 오른쪽에 있습니다.

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

var, let, const 할당을 사용하지 않는 경우 구조 분해 문을 ()로 래핑해야 합니다.

({type, name} = node);//{}는 js에서 코드 블록으로 사용됩니다. 등호만 있으면 오류가 보고됩니다

중첩 객체 구조 분해

객체 중첩 객체에서 구조 분해를 수행하려면 구조 분해의 첫 번째 수준에서 계속 중괄호를 사용하여 다음 단계로 드릴다운하여 살펴보겠습니다. 밤나무 먼저:

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

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

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

Array Destructuring

Array Destructuring은 배열 리터럴을 사용하고 모든 Destructuring 작업은 배열 내에서 완료되며 배열 Destructuring은 객체 리터럴 구문과 같은 객체의 명명된 속성을 사용할 필요가 없습니다.

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, secondColor ] = colors
console.log(firstColor) // 'red'
console.log(secondColor) // 'green'

배열 구조 분해 구문에서는 주로 배열 내 위치에 따라 값을 선택하며, 명시적으로 선언되지 않은 요소는 직접 무시됩니다.

let [ , , thirdColor ] = colors
console.log(thirdColor) // 'blue'

배열 구조 분해의 변수 교환

기존 ES5에서 값을 교환하려면 일반적으로 전송으로 세 번째 임시 변수를 도입해야 하지만 배열 분해 할당 구문을 사용하면 추가 변수를 추가할 필요가 없습니다.

// ES5中互换值：
 let a = 1, b = 2, tmp;
 tmp = a
 a = b
 b = tmp
 console.log(a, b) // 2, 1
 // ES6中互换值
 let a = 1, b = 2;
 [ a, b ] = [b, a]
 console.log(a, b) // 2, 1

중첩 데이터 구조화

 let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ]
 let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors
 console.log(firstColor) // red
console.log(secondColor) // green
console.log(thirdColor) // lightgreen
console.log(fourthColor) // blue

기본값

배열 구조화 할당 표현식에서 배열의 모든 위치에 대한 기본값을 추가할 수도 있습니다. 지정된 위치의 속성이 존재하지 않거나 해당 값이 정의되지 않은 경우 기본값이 사용됩니다

let colors = [ 'red' ]
let [ firstColor, secondColor = 'green' ] = colors
console.log(firstColor) // red
console.log(secondColor) // green

무한 요소

... 우리 모두는 확장 연산자로서의 용도를 알아야 합니다. 배열을 연산할 때 배열을 문자열로 확장하는 데 사용할 수 있습니다. 배열 구조 분해에서 배열의 나머지 요소는... 구문을 사용하여 특정 변수에 할당될 수 있습니다.

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, ...restColors ] = colors
console.log(firstColosr) // 'red'
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

배열 복사

ES5에서 개발자는 배열을 복제하기 위해 concat() 메서드를 자주 사용합니다.

var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

concat() 메서드는 원래 호출 시 매개 변수가 전달되지 않으면 두 개의 배열을 연결하도록 설계되었습니다.

의 사본이 ES6에서는 무한 요소 구문을 통해 동일한 목표를 달성할 수 있습니다.

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

구조해제된 배열에서 무한 요소는 마지막 항목이어야 하며 그 뒤에 쉼표를 추가하면 프로그램이 중단됩니다. 구문 오류.

혼합 해체

let err = {
    errors: [
        {
            msg: 'this is a message'
        },
        {
            title: 'this is a title'
        }
    ]
}

위 코드에서 err 개체에는 오류가 포함되어 있고 오류는 배열이며 새 개체가 포함되어 있으며 개체의 msg가 추출됩니다. 위의 밤나무를 단계별로 분해하고 분해할 수 있습니다.

let { errors } = err
let [ firstArr ] = errors
let { msg } = firstArr
console.log(msg) // 'this is a message'
也可以这样解构
let [ , { title }] = err.errors
console.log(title) // 'this is a title'
let [{ msg }] = err.errors
console.log(msg) // 'this is a message'

더 복잡한 것을 살펴보겠습니다. 사실 순서를 찾을 수만 있다면 이해하기 매우 쉽습니다.

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

실제 사용 - 매개변수 분해

는 일반적으로 아래와 같이 함수 매개변수를 캡슐화할 때 사용됩니다.

// options 上的属性表示附加参数
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

[관련 권장사항:

javascript 비디오 튜토리얼, 웹 프론트엔드]

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