Skip to content

Latest commit

 

History

History
118 lines (92 loc) · 6.13 KB

destructuring.md

File metadata and controls

118 lines (92 loc) · 6.13 KB
Raw

Деструктурирование

TypeScript поддерживает следующие формы деструктурирования (буквально названо в честь де-структурирования, т.е. разбиения структуры):

  1. деструктурирование объектов
  2. деструктурирование массивов

Проще всего представить деструктурирование как обратное от структурирования. Метод структурирования в JavaScript - это объект:

var foo = {
    bar: {
        bas: 123
    }
};

Без потрясающей поддержки структурирования в JavaScript, создание новых объектов на лету было бы очень громозким. Деструктурирование обеспечивает тот же уровень удобства для извлечения данных из структуры.

Деструктурирование объектов

Деструктурирование полезно, потому что позволяет в одну строку выполнить то, что обычно требует нескольких строк кода. Рассмотрим следующий случай:

var rect = { x: 0, y: 10, width: 15, height: 20 };

// деструктурирование
var {x, y, width, height} = rect;
console.log(x, y, width, height); // 0,10,15,20

rect.x = 10;
({x, y, width, height} = rect); // присваивание существующим переменным, используя внешние скобки
console.log(x, y, width, height); // 10,10,15,20

При отсутствии деструктурирования вам придется выбирать x,y,width,height по одному из rect.

Чтобы присвоить извлеченную переменную новой переменной, вы можете сделать следующее:

// структурирование
const obj = {"some property": "some value"};

// деструктурирование
const {"some property": someProperty} = obj;
console.log(someProperty === "some value"); // true

Дополнительно вы можете получить глубокие данные из структуры, используя деструктурирование. Это показано на следующем примере:

var foo = { bar: { bas: 123 } };
var {bar: {bas}} = foo; // Фактически `var bas = foo.bar.bas;`

Деструктурирование объекта с rest параметрами

Вы можете выбрать любое количество элементов из объекта и получить объект из оставшихся элементов, используя деструктурирование объекта с rest параметром.

var {w, x, ...remaining} = {w: 1, x: 2, y: 3, z: 4};
console.log(w, x, remaining); // 1, 2, {y:3,z:4}

Распространенный вариант использования - это игнорирование определенных свойств. Например:

// Пример функции
function goto(point2D: {x: number, y: number}) {
  // Представим что внутри код, который не может быть выполнен
  // если мы передадим объект
  // с большим количеством свойств
}
// Значения, которые мы получаем откуда-то
const point3D = {x: 1, y: 2, z: 3};
/** Используем rest параметр для удаления лишних свойств */
const { z, ...point2D } = point3D;
goto(point2D);

Деструктурирование массивов

Популярный вопрос в программировании: "Как поменять местами две переменные без использования третьей?". Решение на TypeScript:

var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2,1

Обратите внимание, что деструктурирование массива это фактически выполнение компилятором [0], [1], ... и тд. Нет никаких гарантий, что эти значения существуют.

Деструктурирование массива с rest

Вы можете выбрать любое количество элементов из массива и получить массив оставшихся, используя деструктурирование.

var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1, 2, [3,4]

Деструктурирование массива с игнорированием

Вы можете игнорировать любой элемент просто оставив его место пустым, т.е. , , в левой части присваивания. Например:

var [x, , ...remaining] = [1, 2, 3, 4];
console.log(x, remaining); // 1, [3,4]

Генерация JS

Генерация JavaScript для версий до ES6 просто добавляет временную переменную, так же, как делали бы вы без поддержки деструктурирования в языке, например:

var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2,1

// становится: 

var x = 1, y = 2;
_a = [y,x], x = _a[0], y = _a[1];
console.log(x, y);
var _a;

Заключение

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