Деструктуризация Flashcards
Деструктуризация
Извлечь часть данных из объекта или массива в какие-то отдельные переменные
//объекты
const employee = {
firstName: “Ivan”,
lastName: “Ivanov”
middleName: “Ivanovich”
}
//обычно
const firstName = emloyee.firstName
//case 1
const {firstName,lastName } = employee
console.log(firstName); //Ivan
console.log(lastName); //Ivanov
//case 2 (зарезервировано имя переменной)
const firstName = “Nina”
const {firstName: name, lastName} = employee
Если имя переменной уже есть, то через двоеточие указываем новую переменную
cosole.log(‘firstName’, firstName) // firstName Nina
cosole.log(“name”, name) // name Ivan
//case 3 (хотим добавить или зайти как пользователь или админ) - дефолтное значение
const {middleName, role = “Welcome user! “} = employee
console.log(role) //Welcome user!
const employee = {
firstName: “Ivan”,
lastName: “Ivanov”
middleName: “Ivanovich”
role: admin
}
const {middleName, role = “Welcome user! “} = employee
console.log(role) // admin
//case 4 //забираем значения из вложенного объекта
const employee = {
firstName: “Ivan”,
lastName: “Ivanov”
middleName: “Ivanovich”
message: “Hello world!”
permission: {
canEdit: true,
canDelete: false,
role: “user”
}
}
const {firstName, permission: {canDelete, canEdit}} = employee
console.log(“canDelete “, canDelete) //canDelete: false
console.log(“canEdit”, canEdit) //canEdit: true
//массивы
const colors = [‘red’, ‘blue’, ‘green’, ‘white’, ‘black’];
//обычно
// const firstName = colors[0]
console.log(firstName)// red
//можем создавать любые названия переменных
const [firstElement, secondElement, greenColor] = colors
//case 1
console.log(firstElement); // red
console.log(secondElement); //blue
console.log(greenColor); // green
//case 2 (пропустить значение)
const [firstElement, secondElement, , WhiteColor] = colors
console.log(secondValue); //blue
console.log(WhiteColor); //white
//case 3 (вложенный массив)
const colors = [‘red’, [“first value”, “second value”], ‘green’, ‘white’, ‘black’];
const [firstValue, [nestedValue1, nestedValue2], thirdValue] = colors;
console.log(firstValue) //red
console.log(nestedValue1) //first value
console.log(nestedValue2) //second value
console.log(thirdValue) //green
