정보실

웹학교

정보실

javascript 17 배열 및 구조분해할당(Object Destructuring)의 예

본문

JavaScript 구조 지정 할당 구문은 표현형, 간결하고 읽기 쉽게 배열 또는 속성의 값을 다른 변수로 "변형"(업 워프) 할 수 있습니다.


https://buginit.com/javascript/javascript-destructuring-es6-the-complete-guide/ 


JavaScript Destructuring Expression (데모) 


[a, b] = [50, 100];


console.log(a);

// expected output: 50


console.log(b);

// expected output: 100


[a, b, ...rest] = [10, 20, 30, 40, 50];


console.log(rest);

// expected output: [30,40,50]


우리는 다양한 방법으로 JavaScript Destructuring을 사용할 수 있습니다.


TLDR;


1 배열 비구조화 할당 


배열 비구조화 할당은 매우 유사하고 간단합니다. 대입 표현식의 왼쪽에 배열 리터럴을 사용할 수 있습니다. 배열 리터럴의 각 변수 이름은 비 구조화 된 배열의 동일한 인덱스에 있는 해당 항목에 매핑 됩니다.


1.1 기본 변수 할당. 


let foo = ['one', 'two', 'three'];


let [red, yellow, green] = foo;

console.log(red); // "one"

console.log(yellow); // "two"

console.log(green); // "three"


1.2 선언과 별도로 할당. 


변수 선언과 분리하여 변수 값을 할당 할 수 있습니다. 예를 들어 :-먼저 변수를 선언 한 다음 별도로 할당합니다.


// declare the variables

let a, b;

// then you assign separately

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

console.log(a); // 1

console.log(b); // 2


1.3 기본값 


압축 해제 된 값이 undefined 경우 기본값을 설정할 수도 있습니다


let a, b;

// setting default values

[a = 5, b = 7] = [1];

console.log(a); // 1

console.log(b); // 7


위의 예에서는 기본값을 a와 b로 설정합니다. 이 경우 a 또는 b 값이 undefined면 기본값 5를 a에, 7을 b에 할당합니다


1.4 변수 교환 


하나의 비구조화 할당 표현식에서 두 변수를 바꿀 수 있습니다. 멋지지 않습니까?


let a = 1;

let b = 3;


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

console.log(a); // 3

console.log(b); // 1


비구조화할당 하지 않고 변수를 바꾸려면 임시 변수 또는 XOR 스왑 알고리즘이 필요하지만 비구조화할당는 필요합니다


또한 읽기 : JavaScript에서 두 변수를 바꾸는 것에 대해 알아야 할 모든 것


1.5 함수에서 반환 된 배열 파싱 


그렇습니다. 함수에서 배열을 반환하면 구조를 바꿀 수 있습니다.


function c() {

  return [10, 20];

}


let a, b; 

[a, b] = c(); 

console.log(a); // 10

console.log(b); // 20


위의 예에서 c()는 비구조화 할당을 사용하여 출력을 한 줄로 구문 분석 할 수 있으므로 [1, 2] 값을 반환합니다.


1.6 반환 값 무시 / 건너 뛰기 항목 


유용하지 않은 일부 반환 값을 건너 뛸 수도 있습니다. 예를 들면 다음과 같습니다.


function c() {

  return [1, 2, 3];

}


let [a, , b] = c();

console.log(a); // 1

console.log(b); // 3


드물지만 모든 값을 무시하려는 경우.


[,,] = c();


그렇습니다, 나는 이것이 결코 일어나지 않을 것이라는 것을 알고 있습니다. 그러나 이것은 완전한 안내서이므로 나는 당신에게 모든 것을 말해야 합니다.


1.7 나머지 배열을 변수에 할당 


배열 비구조화 할당을 사용하는 경우 배열의 나머지 부분을 단일 변수에 할당 할 수 있습니다.


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

console.log(a); // 1

console.log(b); // [2, 3]


후행 쉼표 구문 오류에 주의하십시오. 후행 쉼표가 나머지 요소와 함께 왼쪽에 사용되면 발생합니다.


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

// SyntaxError: rest element may not have a trailing comma


Rest 연산자에 대한 자세한 내용을 보려면 Javascript의 Rest 연산자 이해


1.8 중첩 배열 비구조화 할당 


객체와 마찬가지로 배열을 사용하여 중첩 비구조화 할당을 수행 할 수도 있습니다. 아래에 예가 있습니다


const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];


// Use nested destructuring to assign red, green and blue

const [hex, [red, green, blue]] = color;


console.log(hex, red, green, blue); // #FF00FF 255 0 255


2 객체 비구조화 할당 


2.1 기본 객체 구조분해할당 


let x = {y: 22, z: true};

let {y, z} = x;


console.log(y); // 22

console.log(z); // true


2.2 선언하지 않은 할당 


선언에서 분리하지 않고 비구조화 할당을 사용하여 변수를 할당 할 수 있습니다. 이는 위 예제에서 x 변수를 만들 필요가 없음을 의미합니다.


let y, z;


({y, z} = {y: 1, z: 2});


참고 : 선언없이 객체 리터럴 비구조화 할당을 사용하는 경우 할당 문 주위의 괄호 (())가 필요합니다. 왼쪽의 {a, b}가 객체 리터럴이 아닌 블록으로 간주되므로 {a, b} = {a : 1, b : 2}는 유효한 독립형 구문이 아닙니다. 그러나 ({a, b} = {a : 1, b : 2})는 isvar {a, b} = {a : 1, b : 2}와 같이 유효합니다. (...) 식 앞에 세미콜론이 있어야 하거나 이전 행에서 함수를 실행하는 데 사용될 수 있습니다. 

소스 MDN 


2.3 새로운 변수 이름에 할당 


아래 예제와 같이 객체 비구조화 할당을 사용하면서 변수 이름을 변경할 수도 있습니다.


let o = {p: 22, q: true};

let {p: foo, q: bar} = o;

 

console.log(foo); // 22 

console.log(bar); // true


예를 들어, var {p : foo} = o는 객체 o에서 p라는 속성을 가져 와서 foo라는 로컬 변수에 할당합니다.


2.4 기본값 


압축 해제 된 객체 값이 undefined 경우 기본값을 설정할 수도 있습니다


let {a = 10, b = 5} = {a: 3};


console.log(a); // 3

console.log(b); // 5


2.5 새 변수 이름에 할당하고 기본값을 함께 제공합니다. 


let {a: aa = 10, b: bb = 5} = {a: 3};


console.log(aa); // 3

console.log(bb); // 5


2.6 중첩 된 객체와 배열 비구조화 할당 


const metadata = {

  title: 'Scratchpad',

  translations: [

    {

      locale: 'de',

      localization_tags: [],

      last_edit: '2014-04-14T08:43:37',

      url: '/de/docs/Tools/Scratchpad',

      title: 'JavaScript-Umgebung'

    }

  ],

  url: '/en-US/docs/Tools/Scratchpad'

};


let {

  title: englishTitle, // rename

  translations: [

    {

       title: localeTitle, // rename

    },

  ],

} = metadata;


console.log(englishTitle); // "Scratchpad"

console.log(localeTitle);  // "JavaScript-Umgebung"


2.7 계산 된 객체 속성 이름과 비구조화 할당 


객체 비구조화 할당을 사용하여 이름을 변경하면서 속성 이름을 계산할 수 있습니다.


let key = 'z';

let {[key]: foo} = {z: 'bar'};


console.log(foo); // "bar"


위 예제에서 키 변수를 계산하고 이름을 foo로 변경


2.8 결합 된 배열과 객체 비구조화 할당 


Destructuring에서 배열과 객체를 결합 할 수 있습니다.


const props = [

  { id: 1, name: 'Fizz'},

  { id: 2, name: 'Buzz'},

  { id: 3, name: 'FizzBuzz'}

];


const [,, { name }] = props;


console.log(name); // "FizzBuzz"


구문은 모든 비구조화 할당에 대해 동일하지만 소스 변수에서 압축을 풀 값을 정의하기 위해 할당의 왼쪽에 있습니다. 예를 들어 :-


let x = [1, 2, 3, 4, 5];

let [y, z] = x;

console.log(y); // 1

console.log(z); // 2



페이지 정보

조회 65회 ]  작성일19-10-25 23:12

웹학교