JavaScript 해체 | 당신이 알아야 할 모든 것

여보세요, 점원들, 저는 ES6의 특성과 자바스크립트에서 알아야 할 절대적인 중요한 것들, 예를 들어 iLife,'사용이 엄격함', 클로즈업, 향상 등을 계속 연구하고 있습니다. 저는 어떤 화제를 회피하고 있습니다. 왜냐하면 이것은 무섭고 곤혹스러워 보이기 때문입니다. 예를 들어 다음과 같습니다.

var pokemon =  {
    id: 25,
    name: 'Pikachu',
    type: ['electric'],
    ability: {
      primary: 'Static',
      hidden: 'Lightning Rod'
    },
    moves: ['Quick Attack', 'Thunderbolt', 'Iron Tail', 'Volt Tackle'],
    competative: [
      { weakness: ['Ground'] },
      { resistance: ['Flying', 'Steel', 'Electric'] }
    ]
  };

var returnMoves = function({moves}){
  return moves;
}

var returnAbilities = function({ability}){
  return ability;
}

console.log(returnMoves(pokemon));
// ["Quick Attack", "Thunderbolt", "Iron Tail", "Volt Tackle"]
console.log(returnAbilities(pokemon));
// { hidden: "Lightning Rod", primary: "Static" }

보시다시피 우리는 같은 Object(pokemon) 매개 변수를 두 개의 다른 함수에 전달하여 완전히 다른 출력을 얻을 것입니다.
우리 시작합시다."Destructuring은 JavaScript 표현식으로 배열의 값이나 대상의 속성을 다른 변수로 압축할 수 있습니다."- MDN입니다. 따라서 몇 가지 기본 예시부터 시작하겠습니다.

Lot of code ahead !

1. 기본 패턴 분해

(() => {
    "use strict";
    let pokemonTypes = ['electric', 'flying', 'fire', 'grass'];
    let pikachu, pidgey, charizard, venusaur;

    // pikachu   = pokemonTypes[0];
    // pidgey    = pokemonTypes[1];
    // charizard = pokemonTypes[2];

    // Skipping Values and default values.
    [pikachu, , charizard, venusaur = 'NONE'] = pokemonTypes;

    console.log(`Pikachu   - ${pikachu}`);     // electric
    console.log(`Pidgey    - ${pidgey}`);      // undefined
    console.log(`Charizard - ${charizard}`);   // fire
    console.log(`Venusaur  - ${venusaur}`);    // grass

})();

우리는 수조의 분해를 시작하여 수조의 값을 단일 변수로 변환해야 한다고 가정할 것이다. 가장 간단한 방법은 쓰기 variable = Array[index] 이지만, 우리가 여러 개의 값을 부여할 때 코드를 약간 지루하게 할 것이다.
따라서 수조를 파괴하기 위해서 우리는 먼저 본 예pikachu,pidgey,charizard에서 변수를 성명한 다음에 간단하게 이 변수를 방괄호 안에 쓰고 이를 전체 수조에 분배한다. 다음과 같다.

[pikachu, pidgey, charizard] = pokemonTypes;

우리는 4개의 그룹 구성원이 있지만 3개의 변수만 있다는 것을 알 수 있을 것이다. 이것은charizard가 마지막 두 개의 값을 얻었다는 것을 의미하는 것입니까?화초(포켓몬의 팬으로서 징그러울 수 있다. 특히 부유물이나 다른 물건이 있다면) 하지만 사실은 그렇지 않다. 캐리자드는 해당 불을 켜는 멤버만 받는다.따라서 구성원의'rest'를 받기 위해 해체 값은'rest 요소'라는 것이 있는데 다음과 같다.

[pikachu, pidgey, ...hackedCharizard] = pokemonTypes;

그래서 현재hackedCharizard는rest원소로 변했다. 이것은 그룹의 두 번째 구성원이 그 값인 Fire와grass를 주고 나머지 원소를 받는다는 것을 의미한다.rest 요소는 마지막 요소이어야 합니다. 그렇지 않으면 오류가 발생합니다.
이제 우리가 수조의 한 구성원을 뛰어넘기를 원한다고 가정하면 우리는 이 변수를 간단하게 뛰어넘을 수 있다. 아래와 같다.

[pikachu, , ...hackedCharizard] = pokemonTypes;

그래서 pidgey를 건너뛰었습니다. pidgey의 값을 검사하면 정의되지 않은 값을 줍니다.만약 그룹에 대응하는 구성원이 없다면, 우리도 변수에 기본값을 제공할 수 있다.

let pokemonTypes = ['electric', 'flying', 'fire'];
[pikachu, pidgey , charizard, venusaur = 'NONE'] = pokemonTypes;
//['electric','flying','fire','NONE'] 

pokemonTypes = ['electric', 'flying', 'fire','grass'];
[pikachu, pidgey , charizard, venusaur = 'NONE'] = pokemonTypes;
//['electric','flying','fire','grass'] 

그러나 그룹 구성원이 값을 부여할 때 기본값을 덮어씁니다.

I think that's all there is to array destructuring, if I missed anything let me know, I'll gladly update.

2. 두 변수를 해체하여 교환한다.

let a = 34, b = 89;

console.log(`OLD - a :: ${a} | b :: ${b}`);  // OLD - a :: 34 | b :: 89`

// Swap two variables
// let temp = a;
// a = b;
// b = temp;

// Destructuring assignment

[a,b] = [b,a];

console.log(`NEW - a :: ${a} | b :: ${b}`); // NEW - a :: 89 | b :: 34

따라서 해체의 또 다른 멋진 용도는 변수 값을 교환하는 것이다. 우리는 LHS의 네모난 괄호에 변수를 쓴 다음에 RHS에 필요한 순서대로 필요한 변수를 쓴다.
이것도 세 개의 변수나 임의의 숫자를 통해 실현할 수 있다.

3. 기본 대상 분해.

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
};
let { type, name, moves } = pokemon;

console.log(`Name      :: ${name}`);
console.log(`Type      :: ${type}`);
console.log(`moves     :: ${moves}`);

하나의 대상을 해체할 때, 우리는 네모난 괄호가 아닌 꽃괄호로 변수를 쓰고, 변수의 이름과 대상의 속성이 완전히 같기 때문에, 우리가 어떻게 임의의 순서로 변수를 쓰는지 주의해야 한다.다음 절에서 고급 용법을 알아보시오.

4. 명명된 변수와 네스트된 객체가 분해됩니다.

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": ["Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"]
};
let {
    type,
    name: MXIV,
    moves,
    ability: {
        primary: primaryAbility,
        hidden: hiddenAbility
    },
    moves: [firstMove, , lastMove]
} = pokemon;

console.log(`Name      :: ${MXIV}`);
console.log(`Type      :: ${type}`);
console.log(`moves     :: ${moves}`);
console.log(`ability   :: ${primaryAbility}`);
console.log(`ability   :: ${hiddenAbility}`);
console.log(`1st Move  :: ${firstMove}`);
console.log(`last Move :: ${lastMove}`);

이 절에서, 우리는 주로 변수의 이름을 바꾸고, 중첩된 분해를 시도할 것이다.이를 위해서는 변수 이름을 먼저 쓴 다음에 사용자 정의 변수를 이렇게 써야 한다.

let { name: MXIV } = pokemon;
console.log(`Name  :: ${MXIV}`);  // pikachu

변수 이름을 바꿀 때 원본 변수를 사용할 수 없습니다. 이 예에서는 'name' 을 사용할 수 없고 'MXIV' 만 사용할 수 있습니다.
다음에 우리는 플러그인 속성을 해체해 보려고 한다. 이를 위해 우리는 먼저 속성을 써야 한다. 그 다음에colin, 그 다음에 꽃괄호, 그 다음에 플러그인 속성 이름을 써야 한다. 사용자 정의 변수 이름을 주려고 한다. 우리는 속성 이름만 써야 한다. 그 다음에colin, 마지막에는colin을 사용자 정의 변수 이름을 써야 한다. 아래와 같다.

let { ability: {
        primary: primaryAbility,
        hidden: hiddenAbility
    }
} = pokemon;

console.log(`ability   :: ${primaryAbility}`);  // Static
console.log(`ability   :: ${hiddenAbility}`);   // Lightning Rod

5. 수조와 대상 분해의 차이.

let arr = [10, 20];
let one, two;
[one, two] = arr;

console.log(`${one} ${two}`);

let obj = { prop1: 'mxiv', prop2: 'UAE' };

let name, location;
({ prop1: name, prop2: location } = obj);

console.log(`${name} ${location}`);

그룹 해체 상황에서 우리는 변수를 설명할 수 있으며, 즉각 값을 부여할 필요가 없지만, 대상에 대해 같은 작업을 시도할 때 같은 작업을 수행할 수 없습니다.

let obj = { prop1: 'mxiv', prop2: 'UAE' };

let name, location;
// { prop1: name, prop2: location } = obj //gives error

// you need place the assignment in round brackets
({ prop1: name, prop2: location } = obj); 

6. - 분해 구조를 사용하여 함수를 필터링하는 매개변수

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": [
        "Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"
    ],
    "competative": {
        "weakness": ["ground"],
        "strengths": ["water", "flying"],
        "resistances": ["electric", "flying", "water", "steel"]
    }
};

const getWeakness = ({competative:{weakness:isWeakTo}})=>{
    return isWeakTo;
};

const getStrengths = ({competative:{strengths:isStrongTo}})=>{
    return isStrongTo;
}

const getResistances = ({competative:{resistances:isResistantTo}})=>{
    return isResistantTo;
}

const getMoves = ({moves})=>{
    return moves;
}

const stat = ({name = 'NOT DEFINED' , competative:{weakness}})=>{
    return `${name} is weak to - ${weakness}`;
}

console.log(`Weakness    :: ${getWeakness(pokemon)}`);
console.log(`Strengths   :: ${getStrengths(pokemon)}`);
console.log(`Resistances :: ${getResistances(pokemon)}`);
console.log(`Moves       :: ${getMoves(pokemon)}`);

console.log(stat(pokemon));

빈 파라미터나null을 전달해서 호출하는 것이 아니라 해체를 사용하고 파라미터 정의에 기본값을 지정하는 것이 좋다는 것은 뻔하다.

7. API에서 호출된 응답을 구문 해제하여 필터링합니다.

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": ["Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"]
};

const getAbilities = ({ability})=>{
    return ability;
}

let {primary:primaryAbility} = getAbilities(pokemon);
let {hidden:hiddenAbility} = getAbilities(pokemon);
console.log(primaryAbility);
console.log(hiddenAbility);

나는 API 호출을 하고 싶지 않지만, 위의 예시에서 getababilities () 함수는 숨겨진 기능과 주요 기능을 가진 대상을 되돌려줍니다. 이것도 해체의 가장 좋은 용도 중 하나입니다.작성 대신 직접 필터링할 수 있습니다response.property or response.property.nestedProperty.

8. 사용 해체의 교체에 대해.

let pokemons = [{
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": ["Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"]
}, {
    "name": "Charizard",
    "id": 6,
    "type": "fire",
    "ability": {
        "primary": "Blaze"
    },
    "moves": ["flame thrower"]
}];

for (let {name,type,moves,ability:{primary:primaryAbility}} of pokemons) {
    console.log(`${name} is type ${type}`);
    console.log(`has moves ${moves}`);
    console.log(`Primary Ability is :: ${primaryAbility}`);
    console.log();

}

그래서 여기서 알아야 할 주요 문제는 우리가'for of'를 사용할 때 색인이 아닌 그룹 구성원의 값을 얻는 것이다. 그러면'for of'와'for in'사이의 차이점이다.

let arr = [10,20,304,50];
for( let i in arr) { console.log(i); } // 0 1 2 3
for( let i of arr) { console.log(i); } // 10 20 304 50

그래서 우리의 예에서 우리는'i'를 해체 임무로 대체한다.
나는 페이스북에서 Coding with Daniel라는 게시물을 보았는데 이것은 나로 하여금 깊은 깨우침을 주었다.나는 개인적으로 이런 방식으로 해체를 사용할 생각을 해 본 적이 없다.