Деструктурирование¶
TypeScript поддерживает следующие формы деструктурирования (буквально названо в честь де-структурирования, т. е. разбиения структуры):
- деструктурирование объектов
- деструктурирование массивов
Проще всего представить деструктурирование как обратное от структурирования. Метод структурирования в 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;
Заключение¶
Деструктурирование может сделать ваш код более читаемым и поддерживаемым, уменьшая количество строчек кода и делая его прозрачнее. Деструктурирование массивов позволяет вам использовать массивы как если бы они были кортежами.