ES6 에서 변수의 해체 와 할당

오늘 은 es6 가 우리 에 게 제공 하 는 변수의 구조 적 할당 을 정리 합 니 다.이것 은 우리 가 변 수 를 대량으로 설명 하고 배열 을 옮 겨 다 니 는 것 이 매우 실 용적 입 니 다.es6 가 제공 하 는 이런 방법 도 간단 하고 이해 하기 쉽다.
1. 배열 의 할당 과 해석
1. 우 리 는 이전에 할당 변 수 를 이렇게 할당 했다.

var b = 1;
var c = 2;
var d = 3;
var e = 4;

지금 우 리 는 이렇게 값 을 부여 할 수 있다.

 let [a,b,c,d] = [1,2,3,4];
 console.log(a,b,c,d) // 1,2,3,4

2. 배열 할당 우 리 는 이렇게 할 수 있다.

 let [a,b=2] = [1];
console.log(a,b) // 1,2 

하면, 만약, 만약...

 let [a,b=2] = [1，4];
console.log(a,b) // 1,4  b      4，   2     

중점 내용 과 같은 일치 하 는 방식 은 es6 에서 패턴 일치 에 속한다. 즉, 역할 양쪽 구조 가 같 으 면 값 을 부여 할 수 있다.
2. 대상 의 할당 과 분석
1. 대상 의 할당 과 해석 과 배열 은 중요 한 차이 점 이 있 습 니 다. 배열 의 할당 은 위치 에 따라 판단 하고 할당 하 는 것 이 고 대상 은 변수 와 속성 에 따라 할당 하 는 것 입 니 다. 예 를 들 어:

 let obj = {
    name:"Jhone",
    age:"23",
    sex:"man"
  }

  let obja = {name,age,sex} = obj;
  console.log(obja.name)

대상 의 변수 name, age, sex 와 대상 obj 의 속성 name, age, sex 는 할당 값 을 비교 합 니 다.아마 이렇게 말 하 는 것 은 네가 좀 현혹 되 었 을 것 이다. 그러면 우 리 는 아래 의 이 예 를 보 자.

let a= {name:"jhon"} = {name: 1}; 
console.log(a) //    Invalid destructuring assignment target

위 에서 잘못 보고 한 것 은 잘못된 재 구성 작업 목표 입 니 다. 이것 은 {name:"jhon"} 중의 jhon 이 변수 가 아니 라 문자열 이기 때 문 입 니 다. 즉, name 자체 가 고정 적 인 가치 가 있 기 때문에 우 리 는 더 이상 값 을 부여 할 수 없습니다.
2. 그리고 우 리 는 이렇게 값 을 부여 할 수 있다.

 let a= {name:jhon,age:ba} = {name:1,jhon:3,}; 
 console.log(a) // {name:1,jhon:3}

이것 은 앞의 대상 이 값 을 부여 할 때 일부 속성 이 뒤의 대상 에 없 으 면 결 과 는 이 속성 을 삭제 합 니 다. 만약 뒤의 대상 에 앞의 대상 이 포함 하지 않 는 속성 이 포함 되 어 있다 면 결 과 는 이 속성 을 추가 합 니 다.
3. 만약 우리 가 사전에 let 로 일부 변 수 를 설명 했다 면 아래 와 같이

let jhon;
let {name:jhon} = {name:"King"}

//     'jhon' has already been declared 

이것 은 해상도 가 대괄호 를 부호 블록 으로 이해 하기 때 문 이지, 값 을 부여 하 는 문장 이 아니 기 때문이다.let 성명 의 변 수 는 변경 할 수 없습니다 (변수의 값 만 변경 할 수 있 습 니 다)
우 리 는 이렇게 할 수 있다.

    let jhon;
    let ({name:jhon} = {name:"King"}); //       

성명 의 변수 가 충돌 하면 큰 괄호 를 추가 하 는 것 이 필요 합 니 다.
3. 배열 과 대상 혼합 할당
1. 배열 에 포 함 된 대상

  let obj = [
    name,
      {age:"30"}
  ]

  var ary = [a,{b}] = obj;
  console.log(ary)

2. 대상 에 배열 삽입

 let obj = {
      ar:[
        "name",
         "age"
       ]
 }
 var ary = {ar:[a,b]} = obj;
 console.log(ary)

3. 대상 에 포 함 된 대상

let obj = {
  name:"jhon",
  age:{one:1,two:2}
}
var ary = {name,age:{one,two}} = obj;
console.log(ary)

4. 재 구성 및 할당
1. 문자열 재 구성

let [a,b,c]="123"
// a = 1
// b = 2
// c = 3

let {length : len} = 'come';  
//length = 5

2. 배열 재 구성

var ary = [1, 2, 3];  
var {0 : one, 1 : two} = ary;  
one // 1  
two // 2  

3. 함수 매개 변수의 해체 할당

  function add([x, y]){  
   alert(x + y);  
  }  

  add([5, 5]); //   10