«Деструктуризация позволяет распаковывать значения из массивов или свойства объектов в отдельные переменные».
Приведенное выше утверждение определяет стандартное определение деструктуризации в javascript. Здесь мы попытаемся понять концепцию деструктурирования немного подробнее.
«Деструктуризация позволяет распаковывать значения из массивов».
Сначала определим массив
let array = [1, 2, 3];
«Деструктуризация позволяет распаковывать значения из массивов в отдельные переменные».
Сейчас мы попытаемся понять это утверждение на примере —
распаковать значения из массивов в отдельные переменные
Допустим, нам нужно присвоить значение из массива отдельным переменным. Легкий !!! Хорошо, давайте сделаем это
Традиционный способ
let array = [1, 2, 3]; let a = array[0]; console.log(a); // Expected output: 1 let b = array[1]; console.log(b); // Expected output: 2 let c = array[2]; console.log(c); // Expected output: 3
Es6 — Способ разрушения
let array = [1, 2, 3]; let a, b, c; [a, b, c] = array; console.log(a); // Expected output: 1 console.log(b); // Expected output: 2 console.log(c); // Expected output: 3
Давайте рассмотрим еще несколько вариантов, чтобы лучше понять деструктурирование.
let array = [1, 2, 3]; [a,b,c] = array; // No need to declare variable a, b, c explicitly console.log(a); // Expected output: 1 console.log(b); // Expected output: 2 console.log(c); // Expected output: 3
Что делать, если переменные меньше размера массива?
let array = [1, 2, 3]; [a, b] = array; console.log(a); // Expected output: 1 console.log(b); // Expected output: 2 console.log(c); // Expected output: Uncaught ReferenceError: c is not defined ------------------------------------------------------------------- //Another example, this time lets define 'c' let array = [1, 2, 3]; let c; [a, b] = array; console.log(a); // Expected output: 1 console.log(b); // Expected output: 2 console.log(c); // Expected output: undefined
Что делать, если переменные больше, чем размер массива?
let array = [1, 2, 3]; [a, b, c, d] = array; console.log(d); // Expected output: undefined
Разрушение с помощью оператора (…) Rest.
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; [a, b] = array; console.log(a); // Expected output: 1 console.log(b); // Expected output: 2 ----------------------- With Rest Operator ------------------------------- let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; [a, b, ...c] = array; console.log(a); // Expected output: 1 console.log(b); // Expected output: 2 console.log(c); // Expected output: [3, 4, 5, 6, 7, 8, 9, 10] // Yes we get an array.
«Деструктуризация позволяет распаковывать значения из объектов».
Давайте сначала определим объект.
const employee = {
name: "Ajinkya",
id: 12345,
department: "Engineering"
}
«Деструктуризация позволяет распаковывать значения из объектов в отдельные переменные».
Сейчас мы попытаемся понять это утверждение на примере —
распаковать значения из объекта в отдельные переменные
Допустим, нам нужно присвоить значение объекта отдельным переменным. Легкий !!! Правильно, давайте
Традиционный способ
const employee = {
name: "Ajinkya",
id: 12345,
department: "Engineering"
}
const name = employee.name;
const id = employee.id;
const department = employee.department;
console.log(name);
// Expected output: Ajinkya
console.log(id);
// Expected output: 12345
console.log(department);
// Expected output: Engineering
Es6 — Способ разрушения
const employee = {
name: "Ajinkya",
id: 12345,
department: "Engineering"
}
const {name, id, department} = employee;
console.log(name);
// Expected output: Ajinkya
console.log(id);
// Expected output: 12345
console.log(department);
// Expected output: Engineering
Имя переменной имеет значение!!!
Имя переменной и имя свойства объекта должны совпадать при деструктурировании объектов. Давайте посмотрим это на примере.
const employee = {
name: "Ajinkya",
id: 12345,
department: "Engineering"
}
const {name, id, dept} = employee;
console.log(dept);
// Expected output: undefined
Здесь, в приведенном выше примере, у нас есть несоответствие имени переменной «отдел» и имени свойства объекта «отдел», поэтому при деструктуризации не удается сопоставить значение отдела с переменной «отдел».
Значит ли это, что мы не можем использовать разные имена для нашей переменной при деструктуризации?
Ответ: Нет, мы можем иметь другие имена для нашей переменной, отличные от тех, которые определены в объектах. (Мы, программисты, обычно любим давать переменным более осмысленные имена!!)
Давайте посмотрим на это в действии.
const employee = {
name: "Ajinkya",
id: 12345,
department: "Engineering"
}
const {name, id, department:dept} = employee;
console.log(dept);
// Expected output: Engineering
Деструктуризация также помогает при назначении значений по умолчанию.
Если в нашем объекте отсутствует какое-либо свойство, мы можем добавить значение по умолчанию для всех отсутствующих свойств с помощью деструкции. Давайте посмотрим это.
const employee = {
name: "Ajinkya",
id: 12345,
department: "Engineering"
}
const {name, id, department, company} = employee;
console.log(company);
// Expected output: undefined
---------------------- With Default Value ---------------------------
const employee = {
name: "Ajinkya",
id: 12345,
department: "Engineering"
}
const {name, id, department, company="Winsoft"} = employee;
console.log(company);
// Expected output: Winsoft
Деструктуризация с параметрами функции
Мы определим функцию для печати сведений о сотруднике
const employee = {
name: "Ajinkya",
lastName: "Dhote"
id: 12345,
department: "Engineering"
city: "Pune",
country: "India",
experience: 6,
title: "Fullstack Developer"
skills: [
{
"tech": "Java",
"experience": 6
},
{
"tech": "Javascript",
"experience": 5
},
{
"tech": "Angular",
"experience": 4
},
{
"tech": "React",
"experience": 4
}
]
}
function printEmployeeDetails(emp) {
const name = emp.name;
const lastName = emp.lastName;
console.log("Name of employee: " + name + " " + lastName);
}
printEmployeeDetails(employee);
// Expected Output: Employee: Ajinkya Dhote
--------------------------- Destructuring ---------------------------------
function printEmployeeDetails(emp) {
const {name, lastName} = emp
console.log("Name of employee: " + name + " " + lastName);
}
printEmployeeDetails(employee);
// Expected Output: Name of employee: Ajinkya Dhote
---------------------------Again Destructuring ----------------------------
function printEmployeeDetails({name, lastName}) { <<--- Notice the parameters
console.log("Name of employee: " + name + " " + lastName);
}
printEmployeeDetails(employee);
// Expected Output: Name of employee: Ajinkya Dhote
----------------------Destructuring with variable rename -------------------
function printEmployeeDetails({name, lastName: surname}) { <<--- Notice the parameters
console.log("Name of employee: " + name + " " + surname);
}
printEmployeeDetails(employee);
// Expected Output: Name of employee: Ajinkya Dhote
----------------------Destructuring with default value -------------------
function printEmployeeDetails({name, lastName: surname, company="Winsoft"}) {
console.log("Name of employee: " + name + " " + surname + ", from: " + company);
}
printEmployeeDetails(employee);
// Expected Output: Name of employee: Ajinkya Dhote, from: Winsoft
Хотите узнать больше
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
