터치 ES6 - 할당 해제

앞에 쓰다

계속 구덩이를 메우다.
파생 해제 값이 무엇인지 설명하기 전에 ES5에서 변수에 대한 설명과 파생 값을 살펴보겠습니다.

var str = 'hello word';

왼쪽의 변수 이름, 오른쪽은 문자열, 그룹, 대상일 수 있습니다.
ES6에는 보다 간편한 할당 방식이 추가되었습니다.Destructuring이라고 합니다.모두가 보편적으로 해구로 번역된 것 같다.해구부치는 수조나 대상의 속성을 모든 변수에 부여할 수 있도록 합니다. 이 변수의 정의 문법은 수조의 글씨체나 대상의 글씨체와 매우 비슷합니다.예를 들어 직관적으로 설명할 수 있다.

let [speak, name] = ['hello', 'destructuring'];
console.log( speak + ' ' + name ); // hello destructuring

수조의 해체 값

더욱 직설적인 말로 설명하자면 등호 양쪽이 같은 형식(수조가 대응하는 수조, 대상이 대응하는 대상)을 유지하면 왼쪽의 변수에 대응하는 값이 부여된다.만약에 대응하는 오른쪽 값이 부족하면 일부 변수 값이 undefined이고 오른쪽 값이 남으면 정상적으로 해체할 수 있다.

// ES6  
let arr = [1,2,3,4,5];
let [el1, el2] = [arr];
//  
let [el1, el2] = [1,2,3,4,5];
// el1 => 1, el2 => 2 

구성 해제 지정도 네스트할 수 있습니다.

let value = [1, 2, [3, 4, 5]];
let [el1, el2, [el3, el4]] = value;

또한 지정된 위치에서 변수를 간단하게 생략하여 배열의 요소를 무시할 수도 있습니다.

let value = [1, 2, 3, 4, 5];
let [el1, , el3, , el5] = value;

더 나아가 기본값도 지정할 수 있습니다.

let [firstName = "John", lastName = "Doe"] = [];

ES6에서는 오른쪽 여분의 값을 배열 형식으로 왼쪽 변수에 지정하는 구문인 "rest"모드를 제공합니다.

let [head, ...tail] = [1, 2, 3, 4];  
console.log(tail);  // [2, 3, 4]  

기본값이 존재하지 않으면 변수 값은 undefined와 같습니다

let [missing] = [];  
console.log(missing);  // undefined 

이곳의 수조는 [Iterator](http://www.2ality.com/2015/02/es6-iteration.html) 인터페이스를 배치한 데이터 구조를 가리킨다.

대상의 해체 값

수조의 용법과 유사한데, 하나의 주요한 차이점은 대상이 순서대로 배열되지 않기 때문에 변수는 반드시 속성명과 같아야 한다는 것이다.

let person = {firstName: "John", lastName: "Doe"};
let {firstName, lastName} = person;

또 다른 특징은 변수 키스는 계산된 속성 이름을 사용할 수 있지만, 헷갈리기 쉬우면 사용하지 않는 것이다.

let person = {firstName: "John", lastName: "Doe"};
let {firstName: name, lastName} = person;
// `name`  `person.firstName`  

함수 매개 변수의 해체 값

함수의 매개 변수도 부수 값을 해체할 수 있다.

function add({x: 0, y: 0}){
    return x+y;
}
add({1,2}); // 3

null 및 undefined

해체null와 undefined를 시도할 때 오류가 발생합니다.대상 값 부여 모드를 사용할 때 해체된 값이 하나의 대상 (object) 으로 변환되어야 하기 때문이다.대부분의 유형은 하나의 대상으로 변환될 수 있지만,null과undefined는 변환될 수 없습니다.

기타

부치를 해체하는 장점은 매우 많다. 예를 들어

두 값의 교환

함수 매개 변수 기본값

함수 반환값

정규 일치하는 반환값

JSON 데이터 신속 처리

Map 패브릭 스트리밍

ES6의 해체 값은 JS의 쓰기에 큰 편의성을 가져다 주었고 코드의 가독성을 높였다.그러나 역효과를 피하기 위해 몇 가지 문제도 주의해야 한다.

원괄호에 관한 질문, 완일봉 선생님의 블로그를 펼친 것을 환영합니다

해체된 플러그는 최대한 깊게 하지 마세요

함수에 여러 개의 반환값이 있을 때 가능한 한 대상 해구를 사용하고 수조 해구를 사용하지 않으며 순서 대응 문제가 발생하지 않도록 한다

이미 성명한 변수는 해체에 사용할 수 없음

브라우저 지원

http://kangax.github.io/compat-table/es6/#destructuring불완전한 통계:

IE NO

FF 38+(대부분)

CH/OP NO

Webkit

SF 9+, 8부분

IOS8 섹션

PS: 정리할 때 이전에 이런 문장이 남아 있는 것을 발견했습니다. 새것이 없고 기본적으로 아래의 문장 내용을 참고합니다.학습만 제공하다.

참고 문장

변수의 해체부치-완일봉

ES6 In Depth: Destructuring

Getting Started with JavaScript ES6 Destructuring