• Деструктуризация работает для объектов и массивов

Когда использовать деструктурирование для объектов?

Это полезно, когда вам нужно извлечь/деструктурировать несколько свойств из объекта, чтобы использовать их в текущей области, поэтому вы делаете это в одной строке; вместо нескольких строк.

// Math is a built-in Javascript object
// without destructuring (multiple lines)
const PI = Math.PI;              // note that variable name on the left-side is exactly the same as the object property on the right-side
const E = Math.E;
const SQRT2 = Math.SQRT2;

// with destructuring (one line)
const { PI, E, SQRT2 } = Math;
// example
// destructure Component, Fragment, and useState out of the React API
const { Component, Fragment, useState } = require('react');

// to use useState method, just do it as the following
useState();

Деструктурирование объекта, который передается в качестве аргумента функции (так называемые деструктурированные аргументы)

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

Деструктурированный аргумент — это альтернативный способ использования Именованного аргумента в функциях.

const PI = Math.PI;

// object called circle
const circle = {
  label: 'circleX',
  radius: 2, // the property we need to destructure
};

// between the parenthesis, we didn't call the object name: circle
// we just used curly braces to indicate that the function expects an object
// and pass in these curly braces the property name that we're using locally in the circleArea function
const circleArea = ( {radius} ) => (PI * radius * radius).toFixed(2);

// test the result (console.log it)
circleArea(circle); 
// or
circleArea( { radius: 4} );
  • Деструктуризация объекта, который передается в качестве аргумента функции, часто используется для аргумента props в функциях React.
  • Деструктурированные аргументы аналогичны обычным аргументам:
    1. могут иметь значение по умолчанию
    2. могут быть необязательными
  • Если необязательный аргумент не был передан, но имеет значение по умолчанию, будет использоваться значение по умолчанию.

"ссылка"