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
}
  1. ОСНОВНОЙ ПРИМЕР
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;