JavaScript
소멸 할당

소개

통사론

• 하자 [x, y] = [1, 2]
• [첫째, ... 휴식] = [1, 2, 3, 4]
• [one, three] = [1, 2, 3]
• 하자 [발 = '기본 값'] = []
• {a, b} = {a : x, b : y}
• {a : {c}} = {a : {c : '중첩 된'}, b : y}
• {b = '기본 값'} = {a : 0}

비고

함수 인자의 소멸

함수에 전달 된 객체에서 속성을 가져옵니다. 이 패턴은 인수 위치에 의존하는 대신 명명 된 매개 변수를 시뮬레이트합니다.

let user = {
    name: 'Jill',
    age: 33,
    profession: 'Pilot'
}    

function greeting ({name, profession}) {
    console.log(`Hello, ${name} the ${profession}`)
}

greeting(user)

이것은 배열에서도 작동합니다.

let parts = ["Hello", "World!"];

function greeting([first, second]) {
    console.log(`${first} ${second}`);
}

소멸시 변수 이름 바꾸기

Destructuring을 사용하면 객체의 한 키를 참조 할 수 있지만 다른 이름을 가진 변수로 선언 할 수 있습니다. 구문은 일반적인 JavaScript 객체의 키 - 값 구문과 비슷합니다.

let user = {
  name: 'John Smith',
  id: 10,
  email: '[email protected]',
};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith
console.log(userId) // 10

배열 소멸

const myArr = ['one', 'two', 'three']
const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

소멸 배열에서 기본값을 설정할 수 있습니다. 소멸 중 기본값 의 예를 참조하십시오.

소멸 배열을 사용하면 2 개의 변수 값을 쉽게 바꿀 수 있습니다.

var a = 1;
var b = 3;

[a, b] = [b, a];
// a = 3, b = 1

빈 슬롯을 지정하여 불필요한 값을 건너 뛸 수 있습니다.

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

객체 파괴하기

파괴는 객체에서 객체로 속성을 추출하는 편리한 방법입니다.

기본 구문 :

let person = {
  name: 'Bob',
  age: 25
};

let { name, age } = person;

// Is equivalent to
let name = person.name; // 'Bob'
let age = person.age;   // 25

파괴 및 이름 바꾸기 :

let person = {
  name: 'Bob',
  age: 25
};

let { name: firstName } = person;

// Is equivalent to
let firstName = person.name; // 'Bob'

기본값으로 파괴 :

let person = {
  name: 'Bob',
  age: 25
};

let { phone = '123-456-789' } = person;

// Is equivalent to
let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

기본값을 사용하여 이름 바꾸기 및 이름 바꾸기

let person = {
  name: 'Bob',
  age: 25
};

let { phone: p = '123-456-789' } = person;

// Is equivalent to
let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

내부 변수 파괴하기

객체를 함수 인자로 분리하는 것 외에도 변수 선언 내에서 다음과 같이 사용할 수 있습니다.

const person = {
  name: 'John Doe',
  age: 45,
  location: 'Paris, France',
};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');
// -> "I am John Doe aged 45 and living in Paris, France."

보시다시피 세 가지 새로운 변수가 만들어졌습니다 : name , age 및 location 와 그 값은 키 이름과 일치하는 경우 개체 person 에게서 부여받습니다.

나머지 매개 변수를 사용하여 인수 배열 만들기

여러분이 특별히 선언 한 것과는 별도로 추가 인수로 구성되는 배열이 필요한 경우 인수 선언 내에 array rest 매개 변수를 다음과 같이 사용할 수 있습니다.

예제 1, 배열에 대한 선택적 인수 :

function printArgs(arg1, arg2, ...theRest) {
  console.log(arg1, arg2, theRest);
}

printArgs(1, 2, 'optional', 4, 5);
// -> "1, 2, ['optional', 4, 5]"

예제 2에서 모든 인수는 이제 배열입니다.

function printArgs(...myArguments) {
  console.log(myArguments, Array.isArray(myArguments));
}

printArgs(1, 2, 'Arg #3');
// -> "[1, 2, 'Arg #3'] true"

myArguments 가 Array이기 때문에 콘솔이 true를 인쇄했습니다 ...myArguments 매개 변수 arguments 선언 내의 ...myArguments 는 쉼표로 구분 된 함수 (매개 변수)에서 얻은 값 목록을 완전한 기능의 배열로 변환합니다 (Array와 유사한 객체가 아닙니다). 네이티브 인수 객체와 같이).

파괴 중 기본값

추출하려고하는 속성이 개체 / 배열에 존재하지 않아 TypeError (중첩 된 개체를 소멸시키는 중) 또는 undefined 개체로 설정되는 상황이 자주 발생합니다. 파괴하는 동안 우리는 기본값을 설정할 수 있습니다. 기본값은 오브젝트에서 발견되지 않는 경우 폴백됩니다.

var obj = {a : 1};
var {a : x , b : x1 = 10} = obj;
console.log(x, x1); // 1, 10
 
var arr = [];
var [a = 5, b = 10, c] = arr;
console.log(a, b, c); // 5, 10, undefined

중첩 된 소멸

우리는 객체 / 배열의 구조를 제한하는 것에 국한되지 않고, 중첩 된 객체 / 배열을 제거 할 수 있습니다.

중첩 된 객체 분해

var obj = {
  a: {
    c: 1,
    d: 3
  },
  b: 2
};

var {
  a: {
    c: x,
    d: y
  },
  b: z
} = obj;

console.log(x, y, z);     // 1,3,2

중첩 배열 소멸

var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d);      // 1 3 4 5

파괴는 단 하나의 패턴에만 국한되지 않고 n 레벨의 중첩으로 배열을 가질 수 있습니다. 마찬가지로 객체를 사용하여 배열을 제거하고 그 반대의 경우도 가능합니다.

객체 내의 배열

var obj = {
  a: 1,
  b: [2, 3]
};

var {
  a: x1,
  b: [x2, x3]
} = obj;

console.log(x1, x2, x3);    // 1 2 3

배열 내의 객체

var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);