Реагировать на деструктуризацию ES6
Разрушение
Чтобы проиллюстрировать деструктурирование, мы сделаем бутерброд. Вы достаете все из холодильника, чтобы приготовить бутерброд? Нет, вы берете только те продукты, которые хотите использовать в своем бутерброде.
Деструктуризация точно такая же. У нас может быть массив или объект, с которым мы работаем, но нам нужны только некоторые элементы, содержащиеся в них.
Деструктуризация позволяет легко извлечь только то, что необходимо.
Разрушение массивов
Вот старый способ присвоения элементов массива переменной:
До:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Вот новый способ присвоения элементов массива переменной:
С деструктуризацией:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;При деструктурировании массивов важен порядок объявления переменных.
Если нам нужны только легковые автомобили и внедорожники, мы можем просто пропустить грузовик, но оставить запятую:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Деструктуризация пригодится, когда функция возвращает массив:
Пример
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
}
const [add, subtract, multiply, divide] = calculate(4, 7);
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Разрушение объектов
Вот старый способ использования объекта внутри функции:
До:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
// old way
function myVehicle(vehicle) {
const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}Вот новый способ использования объекта внутри функции:
С деструктуризацией:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
function myVehicle({type, color, brand, model}) {
const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}
Обратите внимание, что свойства объекта не обязательно объявлять в определенном порядке.
Мы даже можем деструктурировать глубоко вложенные объекты, ссылаясь на вложенный объект, а затем используя двоеточие и фигурные скобки, чтобы снова деструктурировать элементы, необходимые из вложенного объекта:
Пример
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red',
registration: {
city: 'Houston',
state: 'Texas',
country: 'USA'
}
}
myVehicle(vehicleOne)
function myVehicle({ model, registration: { state } }) {
const message = 'My ' + model + ' is registered in ' + state + '.';
}