JS ES6 변수의 해부값 이해

1. 해구가 무엇입니까?

ES6는 일정한 패턴에 따라 수조와 대상에서 값을 추출하여 변수에 값을 부여할 수 있는데 이를 해구라고 부른다.그것은 문법적으로 ES5가 제공한 것보다 더욱 간결하고 치밀하며 명확하다.그것은 당신의 코드 양을 줄일 뿐만 아니라, 근본적으로 당신의 인코딩 방식도 바꿀 수 있다.

2. 수조 해체

이전에 변수에 값을 부여하기 위해서 우리는 직접 값을 지정할 수 밖에 없었다. 예를 들어

let a = 1;
let b = 2; 
let c = 3;

이제 수조 해체 방식으로 값을 부여할 수 있다

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

이것은 수조 해체의 가장 기본적인 유형의 용법이며, 대상 수조도 해체할 수 있다

//  
let [a, b, c] = [{name: 'jacky'}, {name: 'monkey'}, {name: 'houge'}];
console.log(a, b, c); // {name: 'jacky'}, {name: 'monkey'}, {name: 'houge'}

3. 수조 모드와 값 부여 모드의 통일

이것은 등호 왼쪽과 등호 오른쪽의 형식이 통일되어야 한다고 이해할 수 있으며, 통일되지 않으면 해체에 실패할 것이다.

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

 //  、 
let [a, , , d] = [1, 2, 3, 4];
console.log(a, d); //1 4
    
let [a, ...b] = [1, 2, 3, 4];
console.log(a, b); // 1 [2, 3, 4]
        
let [a, , , ...d] = [1, 2, 3, 4, 5];
console.log(a, d); // 1 [4, 5]
 ， undefined

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

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

만약 해체가 성공하지 못한다면, 변수의 값은undefined와 같다

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

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

상술한 것은 완전 해구의 상황이고 또 하나는 불완전 해구이다. 즉, 등호 왼쪽의 모델은 일부분의 등호 오른쪽의 수조만 일치하고 해구는 여전히 성공할 수 있다.

let [x, y] = [1, 2, 3]; 
console.log(x, y); // 1 2

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

4. 구성 해제의 기본값

구성 해제 값을 사용하면 기본값을 지정할 수 있습니다.

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

let [a=1, b=2, c, d=13] = [10, 11, 12];
console.log(a, b, c, d); // 10 11 12 13

5. 대상의 해체 값

대상의 해체와 수조는 중요한 차이가 있다.수조의 원소는 순서에 따라 배열되고 변수의 값은 그 위치에 의해 결정된다.대상의 속성은 순서가 없고 변수는 속성과 동명이어야 정확한 값을 얻을 수 있습니다.

//  ， ， 。 ， 。
let obj = { a: "aaa", b: "bbb" };
let { a: x, b: y } = obj; 
console.log(x, y); // aaa bbb

let { a, b } = { a: 'aaa', b: 'bbb' };
console.log(a, b); // aaa bbb

//  
let { b, a } = { a: 'test1', b: 'test2' }
console.log(a, b) // test1 test2


//  
let { obj: { name }} = { obj: { name: 'jacky', age: '22' } }
console.log(name) // jacky

//  
let obj = {
    p: [
        'Hello',
        { y: 'World' }
    ]
};

let { p: [x, { y }] } = obj;
console.log(x, y); // Hello World

변수 이름이 속성 이름과 일치하지 않으면 다음과 같이 써야 합니다.

var { foo: rename } = { foo: "aaa",bar: "bbb" };
console.log(rename); // aaa
console.log(foo); // Uncaught ReferenceError: foo is not defined

만약 해구 전에 변수를 정의했다면 이때 해구에 문제가 생길 것이다.다음은 잘못된 코드입니다. 컴파일은 오류를 보고합니다. (js 엔진이 {a}를 하나의 코드 블록으로 이해하기 때문에 문법 오류가 발생합니다. 대괄호를 줄에 쓰지 않고 js가 코드 블록으로 해석하지 않아야 이 문제를 해결할 수 있습니다.)

let a;
let obj = { a: "aaa" };
{a} = obj; // Uncaught SyntaxError: Unexpected token '='

오류를 보고하고 프로그램을 정상적으로 하려면 이때 해체된 문장 바깥쪽에 원괄호를 추가하면 된다

let a;
let obj = { a: "aaa" };
( {a} = obj );
console.log(a); // aaa

6. 함수 매개변수

함수의 매개 변수도 해구 값을 사용할 수 있다.

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

add([1, 2]); // 3

함수 매개 변수의 해체도 기본값을 사용할 수 있다.

function fn(x, y = 7) {
    return x + y;
}
console.log(fn(3)); // 10

7. 문자열 해독

문자열은 유사한 그룹의 대상으로 변환되었다.

const [a, b, c, d, e, f] = "hello";
console.log(a); //h
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(e); //o
console.log(f); //undefined

8. 수치와 부울 값의 해체 값

부호를 해독할 때 등호 오른쪽이 수치와 부울 값이면 먼저 대상으로 바뀝니다.

let {toString: s} = 0;
console.log(s === Number.prototype.toString); // true

let {toString: s} = true;
console.log(s === Boolean.prototype.toString); // true

부값을 해체하는 규칙은 등호 오른쪽의 값이 대상이나 수조가 아니라면 먼저 대상으로 바꾸는 것이다.undefined와null는 대상이 될 수 없기 때문에, 그것들에 대한 해구부치는 모두 오류를 보고할 수 있습니다

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

9. 해구부치의 응용

1. 교환 변수의 값

일반적으로 두 변수를 교환하는 방법은 다음과 같은 추가 임시 변수가 필요하다.

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

console.log(a, b); // 2 1

ES6로 값을 해독하면 간결해진다

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

console.log(a, b); // 2 1

2. 함수에서 여러 값 반환

함수는 한 개의 값만 되돌릴 수 있고, 여러 개의 값을 되돌리려면 그룹이나 대상에 넣어서 되돌릴 수 있습니다.구성 값을 이해하면 이 값을 꺼내는 것이 매우 편리하다.

//  
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

//  
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3. 그룹 요소에 접근

예를 들어 하나의 수조가 있는 장면이 있다.또한 그룹의 첫 번째, 두 번째 또는 n 번째 항목에 접근하기를 원하지만, 이 항목이 존재하지 않으면 지정한 기본값을 사용합니다.
보통 수조의 length 속성을 사용하여 판단합니다.

const list = [];

let firstItem = 'hello';
if (list.length > 0) {
    firstItem = list[0];
}

console.log(firstItem); // hello

이 논리를 위해 ES6 디버그 값을 사용하는 경우

const list = [];
const [firstItem = 'hello'] = list;

console.log(firstItem); // 'hello'

4. JSON 데이터 추출

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

5. 맵 구조를 반복

Iterator 인터페이스가 설치된 모든 대상은 for...of 순환 반복.맵 구조 원본은 Iterator 인터페이스를 지원하며 변수의 해체 값과 결합하여 키 이름과 키 값을 얻는 것이 매우 편리하다.

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

키 이름만 가져오거나 키 값만 얻으려면 아래와 같이 쓰십시오.

//  
for (let [key] of map) {
  // ...
}

//  
for (let [,value] of map) {
  // ...
}

다음은 JS ES6 변수의 해부값에 대한 상세한 내용입니다. JS ES6 변수의 해부값에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!