ES6 - деструктуризация

В этом уроке мы разберем с вами такое понятие в es6 как деструктуризация.

Обычно когда нам нужно работать с значением обьекта в ес5 мы пишем там

var obj = {
  width: 100
};
console.log(obj.width);

В ес6 мы можем сделать деструктуризацию обьекта и получить сразу width. Для этого вместо переменно obj мы можем в фигурных скобках указать ключ обьекта, который мы хотим получить

var { width } = {
  width: 100
}

В этой записи мы создаем локальную переменную width в которую сразу присваивается эта строка.

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

var { width, height } = {
  width: 100,
  height: 200
};

Очень часто у нас есть функция, которая возвращает обьект и тогда мы можем также применять деструктуризацию

function generateObj () {
  return {
    width: 100,
    height: 200
  };
}

var { width, height } = generateObj();

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

function generateObj () {
  return {
    title: 'Menu',
    width: 100,
    height: 200
  };
}

var { width: containerWidth, height: containerHeight } = generateObj();
console.log(containerWidth);
console.log(containerHeight);

Очень часто приходится работать с вложеными обьектами

var obj = {
  id: '123',
  attributes: {
    width: 100,
    height: 100
  }
}

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

var { id, attributes: { width, height } } = obj;
console.log(id)
console.log(width)
console.log(height)

В этом случае id мы получаем как обычно, а width и height мы получаем делая опять деструктуризацию уже из attributes.

Также у нас есть возможность указывать при деструктуризации значения по умолчанию. Например мы можем сказать, что если в атрибутах width и height не заданы, то брать значения 50 на 50.

var { id, attributes: { width = 50, height = 50 } } = obj;

Мы просто через равно указали параметры по умолчанию. Если мы перезагрузим страницу, то ничего не изменится, так как у нас width и height указаны, а если мы их удалим, то получим значения 50 и 50.

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

var [ red, yellow ] = ['red', 'yellow'];
console.log(red);
console.log(yellow);

Точно так же можно указывать значения по умолчанию

var [ red = 'super red', yellow = 'super yellow' ] = ['red', 'yellow'];

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

var [first, , , , fifth] = ['red', 'yellow', 'green', 'blue', 'orange'];

Здесь мы указали что нам нужно записать в переменную first первый елемент массива и в fifth пятый, а все остальные елементы массива нас не интересуют.

Точно так же деструктуризацию очень удобно применять в функциях

function getSizes ({ width, height }) {
  console.log(width)
  console.log(height)
}

getSizes({
  width: 100,
  height: 200
})

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

Сюда мы также можем добавить значения по умолчанию

function getSizes ({ width = 50, height = 60 }) {
  console.log(width)
  console.log(height)
}

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

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

#4 ES6 - деструктуризация