ES6 입문 튜 토리 얼 변수의 해체 할당 에 대한 상세 한 설명

머리말
우 리 는 항상 많은 대상 과 배열 을 정의 한 후에 조직 적 으로 관련 정 보 를 추출 합 니 다.ES6 에 이러한 작업 을 간소화 할 수 있 는 새로운 특성 을 추가 했다.재 구성.재 구성 은 데이터 구 조 를 깨 고 더 작은 부분 으로 나 누 는 과정 이다.본 고 는 ES6 해체 대 가 를 상세 하 게 소개 할 것 이 며,다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
배열 의 해체 할당
기본 용법
ES6 는 일정한 패턴 에 따라 배열 과 대상 에서 값 을 추출 하고 변 수 를 할당 할 수 있 도록 하 는데 이 를 구조 라 고 한다.
ES6 이전에 변수 에 값 을 부여 하려 면 값 만 지정 할 수 있 습 니 다.다음 과 같 습 니 다.

let a = 1;
let b = 2

ES6 에 서 는 다음 과 같이 쓸 수 있 습 니 다.

let [a,b] = [1,2]
// a = 1, b = 2

주의해 야 할 것 은 등식 양쪽 의 값 이 대등 해 야 왼쪽 의 변 수 는 오른쪽 에 대응 하 는 값 을 부여 할 수 있 습 니 다.만약 에 왼쪽 의 값 을 기다 리 지 않 으 면 undefined 가 나타 날 것 입 니 다.다음 과 같이 쓰 십시오.

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

 
주의:좌우 양쪽 의 형식 만 반드시 대등 해 야 합 니 다.수량 이 대등 하지 않 아 도 됩 니 다.

let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined

let [a,,c] = [1,2,3]
a = 1, c = 3

let [a, ...b] = [1,2,3]
a = 1, b = [2,3]

let [a] = []
let [b,a] = [1]
a = undefined

등호 왼쪽 은 배열 이지 만 등호 오른쪽 은 다른 값 이 므 로 오 류 를 보고 할 수 있 는 경우 도 있다.다음 과 같다.

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

      

그러나 왼쪽 이 배열 이 고 오른쪽 이 문자열 이 라면 문자열 의 첫 번 째 아래 표 시 된 값 을 가 져 옵 니 다.

let [a] = '121321' a = '1'
let [a] = 'adgasg' a = 'a'

set 구조 에 대해 서도 배열 의 재 구성 대 가 를 사용 할 수 있 습 니 다.

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

기본 값
할당 을 해제 하면 기본 값 을 지정 할 수 있 습 니 다.

let [a = 3] = [] // a:3
let [a = 3,b] = [,4] // a:3 b:4
let [a = 3,b] = [5,4] // a:5 b:4

특별 하 다

let [a = 3] = [undefined] // a:3
let [a = 3] = [null] // a:null

Tips:es6 에 서 는 엄격 한 같은 연산 자 를 사용 합 니 다.구조 할당 에서 기본 값 이 필요 하 다 면 대응 등 값 이 undefined 일 때 기본 값 을 사용 합 니 다.그렇지 않 으 면 할당 을 사용 합 니 다.위 에서 null 이 엄격 하지 않 은 것 은 undefined+와 같 습 니 다.
기본 값 의 할당 값 이 표현 식 이 라면 등호 오른쪽 에 있 는 할당 값 이 undefined 가 없 을 때 만 표현 식 의 값 을 가 져 옵 니 다.다음 과 같 습 니 다.

function demo(){
 console.log('demo')
}

let [a = demo()] = [] // a: demo
let [a = demo()] = [1] // a : 1

대상 의 해체 할당
배열 과 다른 점 은 배열 의 요 소 는 할당 요소 와 위치 가 일치 해 야 정확 한 할당 을 할 수 있 고 대상 의 재 구성 할당 값 은 등호 양쪽 의 변수 와 속성 동명 으로 정확 한 값 을 얻 을 수 있다 는 것 이다.그렇지 않 으 면 undefined 입 니 다.

let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}

//           a: 23 b: 3

let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined

대상 의 해체 할당 은 기 존 대상 의 방법 을 새로운 변수 에 할당 합 니 다.다음 과 같 습 니 다.

let {sin,cos} = Math
// Math   sin cos          sin cos

let {log} = console
// log(2) === console.log(2)

등호 왼쪽 의 변수 명 이 등호 오른쪽 대상 의 속성 명 과 일치 하지 않 으 면 다음 과 같은 형식 으로 써 야 합 니 다.

let {a:b} = {a:'ss'} // b：ss
//a    ，b          

대상 의 해체 할당 값 은 똑 같이 끼 워 넣 을 수 있 습 니 다.다음 과 같 습 니 다.

   ：

let obj = {
	p:[
		'Hello',
 {y:'world'}
	]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

   p        ，  p       ：

let {p,:[x,{y}]} = obj

   ：
const a = {
	loc: {
		t :1,
		b :{
			c:1,
			d:2	
		}
	}
}
let {loc:{t,b:{c,d}}} = a
  
let {loc,loc:{t,b,b:{c,d}}} = a

끼 워 넣 기 할당

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

재 구성 모드 가 포 함 된 대상 이 라면 하위 대상 이 있 는 부모 속성 이 존재 하지 않 으 면 다음 과 같이 잘못 보 고 됩 니 다.

let {foo:{bar}} = {baz:'baz'} //  

기본 값

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = 'hhhh'} = {}
//y = 'hhhh'

Tips:     x    ，y   


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

             
     undefined          

주의 점:
1)코드 블록 이기 때문에 설명 한 변 수 를 할당 을 해제 하 는 데 사용 할 수 없습니다.
문자열 의 해체 할당
할당 대상 이 배열 이 라면 문자열 은 배열 의 형식 으로 나 뉘 어 할당 에 대응 합 니 다.

let [a,b] = 'ha'
// a = h , b = a

            ：

let {length:len} = '12121'
// len = 5

수치 와 불 값 의 해체 할당
등호 오른쪽 에 숫자 나 불 값 이 있 으 면 대상 으로 바 꾸 거나 배열 과 대상 을 제외 하고 다른 값 은 대상 으로 바 뀌 며 null 과 undefined 는 제외 합 니 다.다음 과 같다.

let {t:s} = 123
let {t: s} = true

함수 매개 변수의 해체 값

function add([x,y]){
 return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
 return [x,y]
}
m({x:33,y:8})  // [33,8]
m({x:32})   // [32,4]
m({})    // [3,4]
m()    // [3,4]

function m({x,y} = {x=0,y=0}){
 return [x,y]
}
m({x:33,y:8})  // [33,8]
//       x:0, y:0       33 8

m({x:32})   // [32,undefined]
//           ，    x  y
//  y     y    ，         undefined

m({})    // [undefined,undefined] 
//    x,y    ，        undefined

m()    // [0,0]
//     ，          0

기타
괄호 를 사용 할 수 없 는 경우

변수 성명 문

함수 매개 변수

할당 문장의 패턴

괄호 사용 가능 한 경우

할당 문장의 비 모드 적 부분 은 괄호

를 사용 할 수 있 습 니 다.
할당 용도 재 구성

교환 변수의 값

함수 에서 여러 값 을 되 돌려 줍 니 다

함수 매개 변수의 정의

JOSN 데이터 추출

함수 매개 변수의 기본 값

지도 구조 옮 겨 다 니 기

입력 모듈 의 지정 방법

총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.