const personObj = { name: Alfonso Great, email: "[email protected]", age: 30 } const { name, email, age } = personObj console.log(name, email, age) //RESULT // Alfonso Great [email protected] 30
ЧТО ТАКОЕ УНИЧТОЖЕНИЕ ОБЪЕКТОВ?
Назначение деструктуризации - это специальный синтаксис, который позволяет нам распаковывать массивы или объекты в набор переменных. см.
ПОЧЕМУ УНИЧТОЖЕНИЕ ОБЪЕКТОВ?
- Более чистое извлечение деталей.
- Функции могут принимать не всю сущность, а единственную необходимую часть (и).
У нас есть personObj с «name» в качестве объекта с дочерними «firstname», «lastname», «email» и, наконец, «age» 👇.
const personObj = { name: { firstname: "Alfonso", lastname: "Great" }, email: "[email protected]", age: 30 }
- ОСНОВНОЙ ПРИМЕР
const { name } = personObj; console.log(name);
Вы должны увидеть следующий результат:
Альфонсо Великий
2. ДРУГОЙ ОСНОВНОЙ ПРИМЕР
Если вы хотите получить еще один или несколько.
const { name, email } = personObj; console.log(name, email);
Вы должны увидеть следующий результат:
{имя: «Альфонсо», фамилия: «Великий»} «[email protected]»
3. ОПЕРАТОР ОТДЫХА «…»
Если вы хотите получить все остальное в personObj, не имея представления о том, что это такое. Затем три точки '...' здесь, чтобы спасти.
const { name, ...rest } = personObj; console.log(name, rest);
Вы должны увидеть следующий результат:
{имя: ‘Alfonso’, фамилия: ‘Great’} {email: ‘[email protected]’, возраст: 30}
Вы можете заметить, что результат «rest» заключен в квадратные скобки, потому что оставшихся частей внутри personObj больше одного, поэтому он сгруппирован в скобки или рассматривается как объект. И может быть любого вида.
4. УНИЧТОЖЕНИЕ УНИЧТОЖЕННОГО ОБЪЕКТА ИЛИ УНИЧТОЖЕНИЕ Вложенных объектов.
«Name» внутри personObj также является объектом с дочерними элементами «firstname» и «lastname».
Из простого примера
const { name } = personObj;
При двойной деструктуризации «name» деструктурируется, чтобы получить дочерние «firstname» и «lastname».
const { name: { firstname, lastname }} = personObj; console.log(firstname, lastname);
"Имя" больше не может быть использовано.
5. НАЗНАЧЕНИЕ НОВОЙ ПЕРЕМЕННОЙ
Мы можем присвоить новую переменную, например, name, переменной newNameVar. Это лучше всего использовать, когда "имя" уже назначено.
В приведенном ниже примере конфликт двух переменных "name" во время выполнения.
const name = "Lydia"; //in this line we have 'name' const { name, email, age } = personObj; //another 'name' here
поэтому мы присвоим «name» новой переменной «newNameVar», чтобы избежать конфликта имен одной и той же переменной.
const name = "Lydia"; const { name: newNameVar, email, age } = personObj;