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

Поговорим о ECMAScript 2015

по умолчанию + отдых + распространение
Давайте поговорим о ECMAScript 2015 (ES6) medium.com

Деструктуризация - еще одно небольшое дополнение к готовящемуся к выпуску стандарту JavaScript, которое помогает нам писать код более гибко и эффективно.

Это позволяет связывать с использованием сопоставления с образцом. Мы можем использовать его для сопоставления массивов и объектов. Он похож на поиск стандартных объектов и возвращает undefined, если значение не найдено.

массивы

Сегодня часто можно увидеть такой код.

// ES5
var point = [1, 2];
var xVal = point[0],
    yVal = point[1];
 
console.log(xVal); // 1
console.log(yVal); // 2

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

// ES6
let point = [1, 2];
let [xVal, yVal] = point;
 
console.log(xVal); // 1
console.log(yVal); // 2
// .. and reverse!
[xVal, yVal] = [yVal, xVal];
 
console.log(xVal); // 2
console.log(yVal); // 1

Мы даже можем опустить некоторые значения ..

let threeD = [1, 2, 3];
let [a, , c] = threeD;
console.log(a); // 1
console.log(c); // 3

..и имеют деструктуризацию вложенных массивов.

let nested = [1, [2, 3], 4];
let [a, [b], d] = nested;
console.log(a); // 1
console.log(b); // 2
console.log(d); // 4

объекты

Помимо синтаксиса массива, ES6 также может деструктурировать объекты. Он использует литерал объекта в левой части операции присваивания. Шаблон объекта очень похож на шаблон массива, показанный выше. Давайте посмотрим:

let point = {
  x: 1,
  y: 2
};
let { x: a, y: b } = point;
console.log(a); // 1
console.log(b); // 2

Он поддерживает вложенный объект, а также шаблон массива.

let point = {
  x: 1,
  y: 2,
  z: {
    one: 3,
    two: 4
  }
};
let { x: a, y: b, z: { one: c, two: d } } = point;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

смешанный

Мы также можем смешивать объекты и массивы вместе и использовать их литералы.

let mixed = {
  one: 1,
  two: 2,
  values: [3, 4, 5]
};
let { one: a, two: b, values: [c, , e] } = mixed;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(e); // 5

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

function mixed () {
  return {
    one: 1,
    two: 2,
    values: [3, 4, 5]
  };
}
let { one: a, two: b, values: [c, , e] } = mixed();
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(e); // 5

Тот же результат! Это дает нам много возможностей использовать его в нашем коде.

внимание!

Если значение деструктурирующего присваивания не совпадает, оно оценивается как неопределенное.

let point = {
  x: 1
};
let { x: a, y: b } = point;
console.log(a); // 1
console.log(b); // undefined

Если мы попытаемся опустить var, let или const, будет выдана ошибка, поскольку код блока не может деструктурировать присваивание.

let point = {
  x: 1
};
{ x: a } = point; // throws error

Мы должны заключить это в круглые скобки. Просто это ☺

let point = {
  x: 1
};
({ x: a } = point);
console.log(a); // 1

ES6 - строка
Давайте поговорим о ECMAScript 2015 medium.com

Нравится? Рекомендую!

ECMAScript 2015
Давайте поговорим о ES6 medium.com

Вся серия также доступна в виде электронной книги. Я опубликовал это на Leanpub.com

Руководство по ECMAScript 2015
Изменить описание leanpub.com

Будущее светлое!

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