Деструктуризация в Javascript

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

Примеры

Деструктуризация массива

const [a, b] = ["This", "That"]
console.log(a) // "This"
console.log(b) // "That"
const [a, b, ...rest] = ["This", "That", "Else", "is", "rest"]
console.log(a) // "This"
console.log(b) // "That"
console.log(rest) // ["Else", "is", "rest"]

Возврат к значениям по умолчанию

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

const [email = "[email protected]", name = "John"] = ["[email protected]"];
console.log(email); // "[email protected]"
console.log(name); // "John"

Обмен переменными

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

var x = 33;
var y = 20;
[x, y] = [y, x]
console.log(x); // 20
console.log(y); // 33

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

const data = {
  user: { id: 1, name: "John Doe" }
}
const { user } = data;
console.log(user); // { id: 1, name: "John Doe" }

Деструктуризация вложенных объектов

const data = {
  user: { id: 1, name: "John Doe" }
}
const { user: { id, name } } = data;
console.log(id); // 1
console.log(name); // "John Doe"
// For more complex cases, the left side must have the same 
// structure as the right side.

Возврат к значениям по умолчанию

С деструктуризацией мы можем установить значения по умолчанию или резервные значения, чтобы, если элемент не находится в объекте (или массиве, карте или наборе), он вернется к тому, что вы установили по умолчанию.

const styles = { width: 100 };
const { width = 50, height = 50 } = styles;
console.log(width); // 100
console.log(height); // 50

Примечание. Деструктуризация значений по умолчанию в ES6 срабатывает, только если значение не определено. Если возвращаемое значение - false, null или 0, оно не будет использовать значения по умолчанию.

Резюме

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

Этот синтаксис более декларативен и проясняет намерение.

Альтернативой деструктуризации массива был бы доступ к вещам по умолчанию на основе индекса массива и т. Д., Что менее ясно.

Деструктуризация в ES6 уже изменила способ написания приложений javascript.

Вы можете узнать больше о деструктуризации по этой ссылке. Https://babeljs.io/docs/en/learn/