如何在JavaScript中使用解构赋值

来自菜鸟教程
跳转至：导航、​搜索

JavaScript 让您能够一次性解构对象并分配各个单元。 这使您可以达到您想要做的事情并保持清洁。

简而言之，destructuring 的意思是将对象或数组的值解包成变量。 在本指南的最后，您将了解如何使用它以及它可以为您替代什么。

解构数组

在解构赋值开发之前，如果你有一个数组并且想将它的一些值赋给变量，你会做这样的事情： 

let johnDoe = ["John", "Doe", "Iskolo"]
let firstName = johnDoe[0]
let lastName = johnDoe[1]
let title = johnDoe[2]

console.log(firstName, lastName, title) // John Doe Iskolo

您可以通过解构数组来获得相同的结果，如下所示： 

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName, title] = johnDoe
console.log(firstName, lastName, title) // John Doe Iskolo

此方法允许您选择任意数量的元素： 

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName] = johnDoe
console.log(firstName, lastName) // John Doe

或者： 

let johnDoe = ["John", "Doe", "Iskolo"]
let [, lastName, title] = johnDoe
console.log(lastName, title) // Doe Iskolo

您也可以使用字符串执行此操作： 

let [firstName, ,title] = "John Doe Iskolo".split(" ")
console.log(firstName, title) // John Iskolo

我们可以输入剩余运算符 (...) 来收集剩余的参数： 

let [firstName, ...others] = "John Doe Iskolo".split(" ")
console.log(firstName, others) // John Iskolo

我们甚至可以在这里引入对象： 

let johnDone = {}
[johnDoe.first, johnDoe.last] = "John Doe Iskolo".split(" ")
console.log(johnDoe.first, johnDoe.last) // John Doe

在循环对象中

我们可以使用解构赋值来循环一个键值对变量，比如对象或映射： 

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
Object.keys(obj).forEach(key => {
  console.log(`${key} : ${obj[key]}`)
})

我们可以像这样以不同的方式旋转： 

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
for(let [key, value] of Object.entries(obj)) {
  console.log(`${key} : ${value}`)
}

对你来说，它可能看起来是一样的，但事实并非如此。 在使用上面的 forEach 时，我们将对象的键拉入一个数组，然后现在循环遍历该键数组并使用这些键来挑选对象的值。

在第二部分中，我们直接遍历每个对象条目并提取键和值。

分配默认值我们可以分配默认值，仅适用于我们希望解构的变量为空的情况： 

let [firstName = "John", ,title = "Fire"] = "John Doe".split(" ")
console.log(firstName, title) // John Fire

解构对象

就像我们对数组所做的那样，我们也可以解构对象。 如果您曾经使用过 React，那么您可能已经在导入模块时看到过它。 

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}

let {firstName, lastName) = obj
console.log(firstName, lastName) // John Doe

解构对象时，我们使用 keys 作为变量名。 这就是 JavaScript 如何知道您要分配对象的哪个属性的方式。 与在赋值中使用它们的索引/位置的数组不同，这里使用键。

这种解构适用于任何类型的对象。 如果您的对象具有嵌套值，您仍然可以对其进行解构并将值提取到变量中。 

let obj = {
  name : "John Doe",
  address : {
    city : "Omsk",
    country : "Russia"
  }
}
let {city, country} = obj.address
console.log(city, country) // Omsk Russia

使用它来传递函数参数

您可能已经看到如下所示的函数： 

function sumFunc(a = true, b = "", c = "", d = 0, e = false) {
  console.log(a,b,c,d,e)
}
// Call the function
sumFunc(true, "", "", "", true)
// Or if we want to preserve default values
sumFunc(true, undefined, undefined, undefined, true)

这看起来不太好。 如果您尝试执行诸如制作图表之类的功能并且需要大量参数来创建聊天，情况会变得更糟。

在这种情况下，解构可能很有用： 

function sumFunc({a = true, b = "", c = "", d = 0, e = false}) {
  console.log(a,b,c,d,e)
}
let args = {a : false, e: true}
// Call the function
sumFunc(args)

通过将函数参数作为对象传递，它们将自动解析为独立的参数。 现在，我们传递一个具有匹配键值对的对象，该函数将很好地工作。

结论

解构是一项您可以不做的操作，但是，您已经可以看到它如何使您成为更好的开发人员。 更简洁的代码，更少的重复和更多的结构。

立即使用解构并改进您的代码。

取自“https://cainiaojiaocheng.com/index.php?title=如何在JavaScript中使用解构赋值&oldid=28689”
Powered by MediaWiki