打印两个值而不解构

Question

我正在尝试学习 javascript 解构并卡住了，没有找到类似的东西所以我想问问是否有人可以启发我。我有两种问题 1：这里我在参数中有解构（它是解构吗？）上面我有没有解构的函数它打印 {size: 7, radius: 4}25，我的问题是为什么它也打印 25？就像现在它已经打印了两个“半径”应该只打印一个 '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}。因此在运行时，默认值为 big 的 size 设置为 7，默认值为 25 的 radius 设置为 4。

所以输出是

7 4

我希望这是有道理的。

Answer 2

我想你要找的是这样的：

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

Answer 3

在示例 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});

打印两个值而不解构

prints two values without destructuring

html

javascript

function

destructuring

object-destructuring