Destructuring в Javascript.

Деструктуризация или разбиение на элементы - новая возможность в языке Javascript (ES2015/ES6), которая позволяет извлекать данные из массивов и объектов, используя синтаксис объявления массивов и литералов объектов соответственно.

Деструктуризация массивов

Мне кажется начинать изучение этой темы лучше с массивов. Оно как-то нагляднее что ли выглядит, особенно, когда в первый раз начинаешь читать об этом.

Объявление переменных

В следующем примере мы используем деструктуризацию для задания значения переменных из массива:

1
2
3
4
5
6
//ES2015
var [a,b] = [1,2];

//ES5
var a = 1;
var b = 2;

Казалось бы, ничего интересного, и даже в старом стиле вроде как нагляднее. Но использование деструктуризации позволяет нам, например, поменять местами значения переменных без использования третьей:

1
2
3
4
5
6
7
8
9
10
11
//ES2015
var [a,b] = [1,2];
[a,b] = [b,a];

//ES5
var a = 1;
var b = 2;
var _ref = [b, a];
a = _ref[0];
b = _ref[1];
_ref;

Возврат несколько значений

Функции всегда могли возвращать массивы. Но благодаря деструктуризации мы можем получить дополнительную гибкость.

1
2
3
4
5
6
7
8
9
10
11
12
//ES2015
function getAges(){
  return [14, 15, 18];
}

var [sasha, masha, dasha] = getAges();
console.log(sasha);
//14
console.log(masha);
//15
console.log(dasha);
//18

В ES5 такой пример свелся либо к вызову функции getAges() 3 раза, либо к дополнительной переменной, которая бы хранила значение функции.

Игнорирование значений

Допустим, мы знаем, что предыдущая функции возвращает всегда массив из 3-х возрастов. Если нам не нужны все 3 из них, мы можем просто игнорировать ненужные значения, опуская названия переменных:

1
2
3
4
5
6
7
8
9
10
//ES2015
function getAges(){
  return [14, 15, 18];
}

var [sasha, , dasha] = getAges();
console.log(sasha);
//14
console.log(dasha);
//18

Деструктуризация объектов

После того, как мы поняли суть работы с массивами, понять как работает деструктуризация с объектами труда не составит.

1
2
3
4
5
6
7
8
//ES2015
var person = {name: 'Vladimir', lastname: 'Makushev'};
var {name, lastname} = person;

//ES5
var person = { name: 'Vladimir', lastname: 'Makushev' };
var name = person.name;
var lastname = person.lastname;

В примере выше мы создали две новые переменные, значения которых были взяты из свойств объекта с точно таким же именем. А если мы хотим объявить новые переменные и присвоить им значения старых? Пожалуйста:

1
2
3
4
5
6
7
8
//ES2015
var person = {name: 'Vladimir', lastname: 'Makushev'};
var {name: personName, lastname: personSurname} = person;

//ES5
var person = { name: 'Vladimir', lastname: 'Makushev' };
var personName = person.name;
var personSurname = person.lastname;

Вложенные объекты

Часто бывает что у нас есть объект с опциями или метаданными, и на основе него мы хотим сформировать какой-то другой, новый объект. Давайте рассмотрим следующий пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//ES2015
var options = {
  showCloseButton: true,
  title: 'Some title',
  description: {
    isBold: true,
    isItalic: false,
  },
  urls: ['http://makushev.com', 'http://blog.makushev.com']
};

var {title: modalTitle, urls: myUrls} = options;
console.log(modalTitle);
//Some title
console.log(myUrls);
//["http://makushev.com", "http://blog.makushev.com"]

Объект как параметр функции

Да, деструктуризация будет работать и в этом случае.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//ES2015
var user = { 
  id: 32, 
  displayName: "interist32",
  fullName: { 
      firstName: "Vladimir",
      lastName: "Makushev"
  }
};

//Просто возвращает id
function getId({id}){
  return id;
}

//выводит настоящее имя пользователя
function getName({displayName, fullName: {firstName: normalName}}){
  //здесь в качестве параметра мы используем деструктуризацию
  //мы оставляем displayName как есть
  //а user.fullName.firstName определяем как переменную normalName
  return displayName + ' is ' + normalName;
}

console.log(getId(user));
//32
console.log(getName(user));
//interist32 is Vladimir

Итог

Использование деструктуризации может помочь сократить количество строк кода и сделать его более читабельным. Безусловно, это очередной инструмент, которым нужно уметь пользоваться.