为什么在这里使用解构？

Question

我在 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

小提琴：

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

Answer 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
}

然后，正如评论中所指出的，将 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里面的所有功能都可以使用。

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