Деструктуризація (анг. destructuring) спосіб присвоєння складних об'єктів (Object, Array) простим змінним - розбивши об'єкт на прості частини.
У JavaScript також використовується термін деструктуризаційне присвоєння, під яким розуміється синтаксис отримання властивостей об'єктів, елементи масивів які присвоюються новим зміним.
//Array
var array=[елемент1, елемент2, ..., елементN];
var [змінна1, змінна2, ..., зміннаN]= array;
//Object
var object={назва1:значення1, назва2:значення2, ..., назваN:значенняN};
var {назва1, назва2, ..., назваN}= object;
//String
var text='текст';
var [c1, c2, ..., cn]=text;
Деструктуризація появилася у специфікації ES6.
Приклад розпакування масиву у змінні за допомогою деструктуризації:
//ES6 деструктуризація
var arr=['Добринська','Оксана','Михайлівна'];
var [last_name, name, sur_name]=arr;
console.log(last_name+' '+name+' '+sur_name);
Приклад без використання деструктуризаційного синтаксису.
//ES5
var arr=['Добринська','Оксана','Михайлівна'];
var last_name=arr[0], name=arr[1], sur_name=arr[2];
console.log(last_name+' '+name+' '+sur_name);
Зверніть увагу! При при деструктуризації масиву можна вказувати змінні які були оголошенні раніше.
let x, y, arr=[10, 8];
[x,y]=arr;
console.log(x,y);
А от при деструктуризації об'єкт при вказані змінних які були оголошенні раніше виникне помилка.
let x, y, ob={x:10, y:8};
//Uncaught SyntaxError: Unexpected token '='
{x,y}=ob;
console.log(x,y);
Даної помилки можна уникнути якщо деструктуризацію вставити у круглі дужки ( ... ).
let x, y, ob={x:10, y:8};
({x,y}=ob);
console.log(x,y);
Деструктуризація масиву дозволяє присвоїти змінним елементи масиву. Присвоїти можна як визначенні так і усі.
let mas=[12, 9.5];
let [x,y]=mas;
console.log(x,y); // 12, 9.5
Деструктуризація багатовимірного масиву.
let arr=[12, 9.5, [24, 30]];
let [x,y, [z, d]]=arr;
console.log(x,y,z,d); //12, 9.5, 24, 30
Отримати можна лише декілька перших елементів. Тобто наступні елементи у масиві не будуть проходити деструктуризацію.
var arr=['Сир', 'Молоко', 'Сметана'];
var [pmP,pmD]=arr;
console.log(pmP, pmD); //"Сир", "Молоко"
Також можна пропустити певний елемент за допомогою коми.
var arr=['Добринська','Оксана','Михайлівна'];
var [, name, sur_name]=arr;
console.log(name+' '+sur_name);
Отримати всі наступні елементи масиву за допомогою ....
var User=['Оля','Катерина','Дмитро','Галина','Іван','Оксана','Оленка','Андрій'];
var [user1, user2, ...users]=User;
// user1="Оля", user2="Катерина", users=["Дмитро","Галина","Іван","Оксана",Оленка","Андрій"]
console.log(user1, user2, users);
Також є можливість задати значення по замовчуваню, яке буде присвоєно змінній якщо масив має меншу кількість елементів.
let arr=['BMW','X5'];
let [car, model, color='black']=arr;
console.log(car, model, color); // "BMW", "X5", "black"
var mas=[];
var [name='user', surname='anonim']=mas;
console.log(name, surname);
Деструктуризація об'єкта дозволяє присвоїти змінним властивості об'єкта.
//ES6
var ob={x:10, y:12};
var {x,y}=ob;
console.log(x,y); //10, 12
Приклад без використання деструктуризаційного синтаксису.
//ES5
var ob={x:10, y:12};
var x=ob.x, y=ob.y;
console.log(x,y); //10, 12
На відміно від масиву у деструктуризації об'єкта порядок змінних і властивостей об'єкта не має значення, тому що деструктуризація відбувається по назві.
var ob={x:10, y:12};
//різний порядок
var {y,x}=ob;
console.log(x,y); //10, 12
let user={name:'Jon', age:28, height: 160, heft:55};
let {height, age, heft, name}=user;
console.log(name, age, height, heft);
//"Jon", 28, 160, 55
Присвоювати значення можна також не всі а лише необхідні.
let user={name:'Jon', age:28, height: 160, heft:55};
let {name, age}=user;
console.log(name, age);
//"Jon", 28
При небхідності ми може вказати іншу назву змінній за допомогою : - двокрапки.
let user={name:'Jon', age:28, height: 160, heft:55};
let {name:ima, age:vik, height}=user;
console.log(ima, vik, height);
//"Jon", 28, 160
Отримати всі наступні властивості об'єкта.
let user={name:'Jon', age:28, height: 160, heft:55};
let {name, ...param}=user;
console.log(name, param); //"Jon", {age:28, height:160, heft:55}
console.log(param.age); //28
Значення по замовчуваню для нової зміної якщо у об'єкті немає такої властивості.
let user={name:'Jon', age:28, height: 160, heft:55};
let {name, stat='man'}=user;
console.log(name, stat); //"Jon", "man"
Деструктуризація String дозволяє отримати один символ тексту для змінної, тобто розбити текст на символи.
var text='JS';
var [s1,s2]=text;
console.log(s1, s2); //"J", "S"
let t='Joni';
let [c1,,c3]=t;
alert(c1+c3); //"Jn"
За допомогою деструктуризації можна розбити текст на масив:
var text='JavaScript';
var [...arr]=text;
alert(arr);
var arr=['Марія',26,'Львів'];
var [name, age, city]=arr;
alert(name+' '+city);
Приклад змішаної (Array, Object) деструктуризації:
var auto={name:'BMW', model:'X5', color: ['black', 'red']};
var {name, model, color:[color1, color2]}=auto;
console.log(color1, color2); //"black", "red"
Деструктуризації у циклі for...of.
let arr=[['Leo', 28], ['Li', 25],['Mari', 27], ['Angi',23]];
for(let [name, age] of arr){
console.log(name+' : '+age);
}
Отримання декількох значень від функції:
function test(a,b){
return [a+b, a*b+b];
}
let [x,y]=test(5, 3);
alert(x+' '+y);
Деструктуризації параметрів функції:
var user={id:1, name:'Ivan', email:'email@mail.com',
adressa:{city:'Lviv', ul:'Svobody', home: '12', kv:'5'}
};
function hello({name}){
return 'Привіт '+name;
}
function getAdressa({name, adressa:{city, ul, home, kv}}){
return 'Пане '+name+', Вам відправлено посилку за адресою: м. '+city+', вул. '+ul+' '+home+', квартира '+kv;
}
console.log( hello(user) );
console.log( getAdressa(user) );
Обмін значенями між двома зміними:
//ES6 деструктуризація
var x='X', y='Y';
[y,x]=[x,y];
console.log('x='+x,'y='+y);
//простий спосіб
var a='A', b='B', tmp;
tmp=a;
a=b;
b=tmp;
console.log('a='+a,'b='+b);