为什么在这里使用解构？答案

【问题标题】：Why use destructuring here?为什么在这里使用解构？
【发布时间】：2021-06-14 18:53:35
【问题描述】：

我在 The Odin Project 中遇到了这个问题，并被引导研究解构，我做到了。我了解正在发生的事情，但我不知道为什么要这样做。简单地使用没有解构大括号的原始变量名称会得到相同的结果（请参阅我的 jfiddle 链接，其中我删除了解构并得到相同的结果）。当我被要求使用更多的代码、打字和复杂性来达到相同的结果时，我发现很难学到东西。通过在 const Person 中使用 return {sayName} 和在 const Nerd 中使用 const {sayName} = Person(name) 可以获得什么好处？我在 jfiddle 中使用了 return sayName 和 const sayName 并得到了相同的结果。

原码：

const Person = (name) => {
  const sayName = () => console.log(`my name is ${name}`)
  return {sayName}
}

const Nerd = (name) => {
  // simply create a person and pull out the sayName function with destructuring assignment syntax!
  const {sayName} = Person(name)
  const doSomethingNerdy = () => console.log('nerd stuff')
  return {sayName, doSomethingNerdy}
}

const jeff = Nerd('jeff')

jeff.sayName() //my name is jeff
jeff.doSomethingNerdy() // nerd stuff

jfiddle:

const Person = (name) => {
  const sayName = () => console.log(`my name is ${name}`)
  return sayName
}

const Nerd = (name) => {
  // simply create a person and pull out the sayName function with destructuring assignment syntax!
  const sayName = Person(name)
  const doSomethingNerdy = () => console.log('nerd stuff')
  return {sayName, doSomethingNerdy}
}

const jeff = Nerd('jeff')

jeff.sayName() //my name is jeff
jeff.doSomethingNerdy() // nerd stuff

【问题讨论】：

“奥丁计划”似乎是一些教学网站。我不确定这里有多少（如果有的话）用户熟悉他们的课程。我最好的猜测是他们现在想介绍这个概念，这样他们就可以在以后的教材中建立它。但我真的不能说。不知道有没有人可以。
当您将解构等强大功能用于简单的事情时，它通常会掩盖该功能的有用性。当你继续在应该使用它的地方使用它时，它会很有意义
嗯，这有点像继承。你可以有Persons，也可以有Nerds，每个人都有sayName()函数，但只有书呆子才有doSomethingNerdy()函数......虽然这也是一种相当奇怪的继承方式。
我的猜测是这应该是一个解构的例子，但在作者的脑海中看起来更好。你是对的，这里没有意义。解构有很多很好的用例，但这不是其中之一。
在原始代码中，这是一个不好的例子。你最好不要使用解构，因为你只返回一个函数。

标签： javascript destructuring

【解决方案1】：

普遍的共识是，这是解构的一个坏例子，但我已经走得太深了，仍然会尝试理解它。

通过使用解构，可以向Person 添加额外的功能。

比如Person需要跳转：

const Person = (name) => {
  const sayName = () => console.log(`my name is ${name}`)

  const jump = () => console.log('I jumped') // new feature

  return {sayName, jump} // jump can inserted into the object here and used externally
}

然后，正如 cmets 中所指出的，将 Person 传递给 Nerd 的更好方法是：

const Nerd = (name) => {
  // simply create a person and pull out the sayName function with destructuring assignment syntax!
  const doSomethingNerdy = () => console.log('nerd stuff')
  return {...Person(name) , doSomethingNerdy}
}

在finally之前可以解构Nerd，Person和Nerd里面的所有功能都可以使用。

我想这就是他们想要达到的目的。

【讨论】：

这也是我能想到的。问题是他们从不将此作为原因。以下课程不会扩展此代码块。感谢您的评论
"通过使用解构，可以为 Person 添加额外的功能" 为了获得相同的行为，无需解构 .您所展示的只是创建一个对象文字 - 除了语法与设计为镜像的相似之外，基本上与解构赋值无关。
第 1 行，你没有给 Person 添加额外的功能。
"Nerd 然后可以解构 Person 并使用 sayName 和 jump" 它也可以不这样做，而是返回{...Person(name), doSomethingNerdy }而不破坏任何东西。