2

我正在尝试学习javascript解构并陷入困境，没有找到类似的东西所以我问是否有人可以启发我。我有两种问题1：这里我在参数中有解构（它是解构吗？）上面我有没有解构的函数它打印{size：7，radius：4}25，我的问题是为什么它也打印25？就像现在它已经打印了两个“半径”，它应该只打印一个“半径（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} );

如果有人能澄清这一点，我将不胜感激

4

3 回答 3

2

对于您的第一个功能，这是发生的事情：-

size和函数参数都是radius类型的原语string，number默认值为bigand 25。

现在您调用drawChart({size:7, radius:4})which 实际上将您的函数参数设置为size等效于{size:7,radius:4}并且radius未设置为任何内容，但保留默认值25.

所以输出是

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

对于您的第二个功能：-您实际上已经在这里为您的功能参数使用了解构。你在这里只传入一个参数，那就是 object {size:7, radius:4}。因此，在运行时，size将默认值big设置为7，并将radius默认值25设置为4。

所以输出是

7 4

我希望这是有道理的。

于 2020-07-12T14:23:07.557 回答
2

在示例 1 中，drawChart({size:7, radius:4})将单个对象参数传递给drawChart()函数。但是，您已声明drawChart()接受 2 个参数。这意味着在函数中，size参数将等于 ，{size:7, radius:4}而radius参数采用其默认值25。

在示例 2 中，您定义drawChart()仅采用 1 个作为对象的参数，并从该对象中使用解构来获取sizeandradius属性。

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

于 2020-07-12T14:25:27.320 回答
0

我认为您正在寻找的是这样的：

function drawChart(props) {
  const { size, radius } = props;
  console.log(size, radius);
}
于 2020-07-12T14:25:11.373 回答