печатает два значения без деструктуризации

Question

Я пытаюсь изучить javascript деструктуризацию и застрял, не нашел ничего подобного, поэтому я спрашиваю, может ли кто-нибудь просветить меня. У меня есть два типа вопросов 1: здесь у меня есть деструктуризация в аргументе (это деструктуризация?), А выше у меня есть функция без деструкции, которая печатает {size: 7, radius: 4} 25, мой вопрос здесь в том, почему он также печатает 25? как теперь он напечатал оба 'radius', если он напечатал только один 'radius (4)'?

function drawChart(size = 'big', radius = 25 ) {
  console.log(size, radius);
} 
 
drawChart({size:7, radius:4} );

2: Теперь я поместил фигурные скобки внутри функции, а также фигурные скобки внутри аргумента (какой из них деструктурирует (деструктурирование объекта?), Оба или чуть выше?) , он печатает «7 4», теперь здесь не 25, почему?

function drawChart({ size = 'big', radius = 25 } ) {
  console.log(size, radius);
} 
 
drawChart({size:7, radius:4} );

если бы кто-нибудь мог прояснить это, я был бы признателен

Answer 1

Для вашей первой функции происходит следующее: -

Параметры функции size и radius являются примитивами типа string и number со значением по умолчанию big и 25.

Теперь вы вызываете drawChart({size:7, radius:4}), который по существу устанавливает ваш параметр функции size, эквивалентный {size:7,radius:4}, а radius не установлен ни на что, но содержит значение по умолчанию 25.

Таким образом, результат будет

{
  "size": 7,
  "radius": 4
} 25

Для вашей второй функции: - Вы фактически использовали деструктуризацию здесь для параметров вашей функции. Здесь вы передаете только один параметр - объект {size:7, radius:4}. Таким образом, во время выполнения size со значением по умолчанию big получает значение 7, а radius со значением по умолчанию 25 получает значение 4.

Таким образом, на выходе получается

7 4

Надеюсь, это имело смысл.

Answer 2

В примере 1 drawChart({size:7, radius:4}) передает один аргумент объекта функции drawChart(). Однако вы объявили drawChart() для принятия 2 аргументов. Это означает, что в функции параметр size будет равен {size:7, radius:4}, тогда как параметр radius принимает значение по умолчанию 25.

В примере 2 вы определяете drawChart() принимать только 1 аргумент, который является объектом, и из этого объекта вы используете деструктуризацию для получения атрибутов size и radius.

Чтобы пример 1 работал как пример 2 без использования фигурных скобок , вы можете drawChart() принять отдельный объект, а затем получить доступ к его атрибутам.

function drawChart(data) {
  console.log(data.size || 'big', data.radius || '25');
} 
 
drawChart({size:7, radius:4});
drawChart({size:7});
drawChart({radius:4});

Answer 3

Я думаю, что вы ищете примерно так:

function drawChart(props) {
  const { size, radius } = props;
  console.log(size, radius);
}