3个在JavaScript中使用解构的实际示例

使用解构模式编写代码清理器

您可能已经熟悉JavaScript的重组。 它是在2015年以ES6规范发布的 ，但是如果您需要更新知识，则可以在Mozilla网站上阅读有关其全部工作原理的大型详细文章 。

但是，知道它如何工作与知道如何使用它完全不同。 这是三种模式，可帮助您使代码更简洁，更可靠且更易于阅读！

1.命名函数参数

命名参数是将函数参数处理为位置参数的另一种方法。 无需按定义明确的顺序指定参数，只需提供其名称即可。 例如，在Python中，它看起来像这样：

def sum(a=1,b=2,c=3): return a+b+c sum(b=5,a=10) 

看吗 如果您明确指定了参数名称，则顺序并不重要。 相对于位置参数的优势在于：

1. 您可以在调用函数时省略一个或多个参数
2. 现在，传递参数的顺序并不重要
3. 代码变得更具可读性

尽管JavaScript不支持以本地命名的参数，但是我们可以使用解构模式来实现上述所有三个优点。 这将是JavaScript中已经存在的最后一个示例：

 function sum({a = 1, b = 2, c = 3}) { return a + b + c } sum({b: 10, a: 5}) // 5 + 10 + 3 = 18 

所有目标均已实现：您可以省略c ，顺序现在不重要，并且参数后面带有自己的名称。 正是由于销毁，所有这些都是可能的。

2.更清洁的服务器响应解析

通常，在服务器的响应中，我们只对数据块感兴趣，甚至只对该数据块中的一个特定值感兴趣。 如果是这种情况，请使用分解来忽略服务器通常发送的所有其他内容。 一个例子：

 function mockServerCall () { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ 'status': 200, 'content-type': 'application/json', 'data' : { dataOfInterest: 42 } }) }, 250) }) } mockServerCall() .then(({data: { dataOfInterest = 100 }}) => { console.log(dataOfInterest) // 42 (    100) }) 

这种模式使您可以在解析参数时提取我们感兴趣的数据。 这样您就有机会调整默认值作为奖励。 顺利将我们带入下一个模式...

在分配期间设置默认值

如果名称空间中不存在变量，我们通常需要将其设置为其默认值。

在进行销毁之前，您可以执行以下操作：

 //      var nightMode = userSettings.nightMode || false 

但是这种方法将需要为每个分配使用一行代码。 销毁将使您一口气完成所有工作：

 const userSettings = {nightMode: true, fontSize: 'large'} const { nightMode = false, language = 'en', fontSize = 'normal' } = userSettings console.log(nightMode) // true console.log(language) // 'en' console.log(fontSize) // 'large' 

此模式可用于设置React！组件的状态。

我希望这些模式派上用场！ 要了解有关销毁的更多信息，请访问以下链接（英语信息-大约翻译） ：

ES6深入探讨：解构

在React中学习分解道具的基础