ES6 해체 할당 의 원리 및 활용

배열 의 해체 할당

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

여러 변 수 를 동시에 정의 합 니 다.a 는 1,b 는 2,c 는 3 과 일치 합 니 다.

재 구성 할당 값 은 기본 값 을 지정 할 수 있 습 니 다.즉,왼쪽 변 수 는 기본 값 을 지정 하고 오른쪽 에 대응 하 는 값 이 없 으 면 기본 값 을 우선 출력 합 니 다.

let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'

x 일치 문자 a,y 기본 값 은 문자 b 입 니 다.오른쪽 에 대응 하지 않 으 면 기본 출력 문자 b 입 니 다.
대상 의 해체 할당
해 구 는 배열 뿐만 아니 라 대상 에 도 사용 할 수 있 습 니 다.대상 의 해 구 는 배열 과 중요 한 차이 가 있 습 니 다.배열 의 요 소 는 순서에 따라 배열 되 고 변수의 수 치 는 그의 위치 에 의 해 결 정 됩 니 다.대상 의 속성 은 순서 가 없고 변 수 는 속성 과 동명 이 어야 정확 한 값 을 얻 을 수 있 습 니 다.

let {
    name,
    age,
    hobbies: [one, two]
} = {
    name: 'shiramashiro',
    age: 21,
    hobbies: ['  ', '  ']
}

예 를 들 어 저 는 age 의 값 을 abc 의 값 으로 바 꾸 었 습 니 다.대상 의 속성 명 과 대응 하지 않 아 할당 할 수 없 기 때문에 undefined 입 니 다.
할당 해제 활용
교환 변수의 값
변 수 를 교환 하 는 값 을 정상적으로 생각 하 는 방식

let x = 1,
    y = 2,
    temp = 0

temp = x // x = 1 = temp
x = y // y = 2 = x
y = temp // temp = 1 = y

console.log('x => ', x)
console.log('y => ', y)

재 구성 할당 교환 변 수 를 이용 합 니 다.

let x = 1;
let y = 2;
[x, y] = [y, x];

console.log('x => ', x)
console.log('y => ', y) 

이렇게 변수 x 와 y 의 값 을 교환 하면 쓰기 가 간결 할 뿐만 아니 라 읽 기 쉬 우 며 의미 가 매우 뚜렷 하 다.
함수 에서 여러 값 을 되 돌려 줍 니 다.
함 수 는 한 값 만 되 돌려 줄 수 있 습 니 다.여러 값 을 되 돌려 주 려 면 배열 이나 대상 에 넣 고 되 돌아 갈 수 밖 에 없습니다.구조 대 가 를 알 고 있 으 면 더욱 편리 해 집 니 다.
hobbies 배열 의 두 번 째 값 추출

function getArray() {
    return {
        name: 'kongsam',
        age: 21,
        hobbies: ['  ', '  ', '   ']
    }
}
console.log(getArray().name + '  ' + getArray().hobbies[1]) //   

해체 할당 을 이용 하여 hobbies 배열 의 두 번 째 값 을 가 져 옵 니 다.

let {name, age, hobbies} = getArray()
console.log(name + '  ' + hobbies[1]) //   

지도 구 조 를 편력 하 다.
for...of 순환 에 있어 서 옮 겨 다 니 는 값 은 하나의 배열 이 고,할당 을 재 구성 하 는 것 은 배열 에 있어 서'패턴 일치'할 수 있 습 니 다.이것 은 키-값 을 빠르게 꺼 냅 니 다.

for...of 순환 옮 겨 다 니 며 구조 할당 키-값 을 가 져 오 는 것 이 편리 합 니 다.

for (let [key, value] of map) {
    console.log("key => ", key)
    console.log("value => ", value)
}

함수 매개 변수의 해체 값

// let { x = 10, y = 5 } = {}

function f({ x = 10, y = 5 } = {}) {
    return [x, y]
}

console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, 5]
console.log(f({})) // [10, 5]
console.log(f()) // [10, 5]

함수 의 매개 변수 에 대상 을 입력 할 수 있 고 들 어 오 는 대상 에 게 기본 값 을 설정 할 수 있 습 니 다.그것 은 함수 내부 로 재 구성 되 어 사용 할 것 이 며,너 도 이렇게 이해 할 수 있다.

function f(x = 10, y = 5) {
    return [x, y]
}

console.log(f(100, 50)) // [100, 50]
console.log(f(3)) // [3, 5]
console.log(f()) // [10, 5]

위의 서법 이 다 르 면 결과 도 다 를 수 있다.

function f({ x, y } = { x: 10, y: 5 }) {
    return [x, y]
}

console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, undefined]
console.log(f({})) // [undefined, undefined]
console.log(f()) // [10, 5]

세 번 째 와 네 번 째 인쇄 는 undefined 가 있 습 니 다.이것 은 들 어 오 는 x 나 y 가 대상 속성 에 대응 하지 않 는 값 으로 일치 하지 않 아서 발생 합 니 다.
이상 은 바로 ES6 해체 할당 의 원리 와 운용 에 관 한 상세 한 내용 입 니 다.더 많은 ES6 해체 할당 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 시기 바 랍 니 다!