es6의 해체는 무엇을 의미합니까?-프런트엔드 Q&A-php.cn

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!