Modern JS Cheatsheet / Памятка по современному JavaScript: Деструктуризация объектов и массивов

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

wizjer 29.09.17 в 02:08

*Деструктуризация* — это удобный способ создавать новые переменные, напрямую получая значения из объектов или массивов.

wizjer 29.09.17 в 02:14

На практике *деструктуризацию* можно использовать, чтобы присваивать переменные, разбивая на части параметры функции или *this.props* в React-проектах.

wizjer 29.09.17 в 02:21

#### Объяснение с примером кода

wizjer 29.09.17 в 02:21

- Объект

wizjer 29.09.17 в 02:22

Давайте использовать во всех примерах следующий объект:

wizjer 29.09.17 в 02:22

```js
const person = {
firstName: "Коля",
lastName: "Андреев",
age: 35,
sex: "М"
}
```

wizjer 29.09.17 в 02:23

Без деструктуризации

wizjer 29.09.17 в 02:23

```js
const first = person.firstName;
const age = person.age;
const city = person.city || "Санкт-Петербург";
```

wizjer 29.09.17 в 02:24

С деструктуризацией всё поместится в одну строчку:

wizjer 29.09.17 в 02:24

```js
const { firstName: first, age, city = "Санкт-Петербург" } = person; // И всё!

wizjer 29.09.17 в 02:25

console.log(age) // 35 -- Создана новая переменная age и ей присвоено значение, равное person.age
console.log(first) // "Коля" -- Создана новая переменная first и ей присвоено значение, равное person.firstName
console.log(firstName) // Undefined -- person.firstName существует, НО новая созданная переменная называется first
console.log(city) // "Санкт-Петербург" -- Создана новая переменная city и, поскольку свойство person.city ранее не было определено, переменной присвоено альтернативное значение "Санкт-Петербург".
```

wizjer 29.09.17 в 02:33

**Примечание:** В `const { age } = person;` скобки после ключевого слова *const* не используются для определения объекта или блока. Это синтаксис самой *деструктуризации*.

wizjer 29.09.17 в 02:35

- Параметры функции

wizjer 29.09.17 в 02:35

*Деструктуризация* часто используется, чтобы разбить на части параметры в функциях.

wizjer 29.09.17 в 02:36

Без деструктуризации

wizjer 29.09.17 в 02:36

```js
function joinFirstLastName(person) {
const firstName = person.firstName;
const lastName = person.lastName;
return firstName + '-' + lastName;
}

wizjer 29.09.17 в 02:36

joinFirstLastName(person); // "Коля-Андреев"
```

wizjer 29.09.17 в 02:37

Если деструктурировать параметр *person*, то функция выйдет куда короче:

wizjer 29.09.17 в 02:47

```js
function joinFirstLastName({ firstName, lastName }) { // мы создали переменные firstName и lastName из частей параметра person
return firstName + '-' + lastName;
}

wizjer 29.09.17 в 02:38

joinFirstLastName(person); // "Коля-Андреев"
```

wizjer 29.09.17 в 02:47

Ещё удобнее использовать деструктуризацию со [стрелочными функциями](#arrow_func_concept):

wizjer 29.09.17 в 02:48

```js
const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;

wizjer 29.09.17 в 02:48

joinFirstLastName(person); // "Коля-Андреев"
```

wizjer 29.09.17 в 02:48

- Массив

wizjer 29.09.17 в 02:48

Давайте рассмотрим следующий массив:

wizjer 29.09.17 в 02:59

```js
const myArray = ["a", "b", "c"];
```

wizjer 29.09.17 в 02:59

Без деструктуризации

wizjer 29.09.17 в 02:59

```js
const x = myArray[0];
const y = myArray[1];
```

wizjer 29.09.17 в 02:59

С использованием деструктуризации

wizjer 29.09.17 в 02:59

```js
const [x, y] = myArray; // И это всё!

wizjer 29.09.17 в 03:00

console.log(x) // "a"
console.log(y) // "b"
```

wizjer 29.09.17 в 03:00

#### Полезные ресурсы

wizjer 29.09.17 в 03:01

- [Особенности ES6 - Деструктурирующее присваивание](http://es6-features.org/#ArrayMatching)
- [Деструктуризация объектов - WesBos](http://wesbos.com/destructuring-objects/)
- [ExploringJS - Деструктуризация](http://exploringjs.com/es6/ch_destructuring.html)

wizjer 29.09.17 в 03:02