JavaScript为您提供了摧毁对象和分配单个单元的能力,这允许您到达您想要做的事情,并保持清洁。
简而言之, destructuring 意味着将对象或数组的值解包成变量. 在本指南的末尾,您将看到如何使用它以及它可以替代什么。
破坏线路
在开发破坏任务之前,如果您有一个数组,并且想将其某些值分配给变量,则可以这样做:
1let johnDoe = ["John", "Doe", "Iskolo"]
2let firstName = johnDoe[0]
3let lastName = johnDoe[1]
4let title = johnDoe[2]
5
6console.log(firstName, lastName, title) // John Doe Iskolo
您可以通过破坏数组来获得相同的结果,如下:
1let johnDoe = ["John", "Doe", "Iskolo"]
2let [firstName, lastName, title] = johnDoe
3console.log(firstName, lastName, title) // John Doe Iskolo
此方法允许您选择您想要的任何数量的元素:
1let johnDoe = ["John", "Doe", "Iskolo"]
2let [firstName, lastName] = johnDoe
3console.log(firstName, lastName) // John Doe
或:
1let johnDoe = ["John", "Doe", "Iskolo"]
2let [, lastName, title] = johnDoe
3console.log(lastName, title) // Doe Iskolo
您也可以使用 Strings:
1let [firstName, ,title] = "John Doe Iskolo".split(" ")
2console.log(firstName, title) // John Iskolo
我们可以扔在休息运算器(...)中,以收集其余的论点:
1let [firstName, ...others] = "John Doe Iskolo".split(" ")
2console.log(firstName, others) // John Iskolo
我们甚至可以将物体带到这里:
1let johnDone = {}
2[johnDoe.first, johnDoe.last] = "John Doe Iskolo".split(" ")
3console.log(johnDoe.first, johnDoe.last) // John Doe
通过物体走来走去( )
我们可以使用破坏分配来循环通过一个关键值对变量,如对象或地图:
1let obj = {
2 firstName : "John",
3 lastName : "Doe",
4 title : "Iskolo"
5}
6Object.keys(obj).forEach(key => {
7 console.log(`${key} : ${obj[key]}`)
8})
我们可以把它转换成这样不同的方式:
1let obj = {
2 firstName : "John",
3 lastName : "Doe",
4 title : "Iskolo"
5}
6for(let [key, value] of Object.entries(obj)) {
7 console.log(`${key} : ${value}`)
8}
在上面的forEach中,我们将对象的密钥拖入一个数组中,然后通过该数组的密钥滚动,并使用这些密钥来选择对象的值。
在第二部分中,我们只是通过每个对象输入进行直循环并提取密钥和值。
分配默认值 我们可以分配默认值,仅适用于我们想要破坏的变量是空的情况:
1let [firstName = "John", ,title = "Fire"] = "John Doe".split(" ")
2console.log(firstName, title) // John Fire
破坏物体
与数组一样,我们还可以摧毁对象. 如果您曾经使用过 React,您可能在导入模块时看到它。
1let obj = {
2 firstName : "John",
3 lastName : "Doe",
4 title : "Iskolo"
5}
6
7let {firstName, lastName) = obj
8console.log(firstName, lastName) // John Doe
在破坏对象时,我们使用键作为变量名称,这就是JavaScript如何知道你要分配对象的属性。
如果你的对象有嵌入值,你仍然可以摧毁它,并将值提取为变量。
1let obj = {
2 name : "John Doe",
3 address : {
4 city : "Omsk",
5 country : "Russia"
6 }
7}
8let {city, country} = obj.address
9console.log(city, country) // Omsk Russia
使用它来通过函数论点
您可能已经看到的功能看起来像这样:
1function sumFunc(a = true, b = "", c = "", d = 0, e = false) {
2 console.log(a,b,c,d,e)
3}
4// Call the function
5sumFunc(true, "", "", "", true)
6// Or if we want to preserve default values
7sumFunc(true, undefined, undefined, undefined, true)
它变得更糟,如果你试图执行一个功能,如创建图表,你需要很多论点来创建聊天。
在这种情况下,破坏可以是有用的:
1function sumFunc({a = true, b = "", c = "", d = 0, e = false}) {
2 console.log(a,b,c,d,e)
3}
4let args = {a : false, e: true}
5// Call the function
6sumFunc(args)
通过将函数参数作为一个对象,它们将自动解决为独立参数。
结论
破坏是你可以做不到的操作,但是你已经可以看到它如何使你成为一个更好的开发者。
今天使用破坏并改进您的代码。