为什么在这里使用解构？

Question

我在 The Odin Project 上问了这个问题，我在那里遇到了它，并被引导去研究解构，我做了。我明白发生了什么，但我不知道为什么要这样做。简单地使用没有解构花括号的原始变量名会得到相同的结果（请参阅我的 jfiddle link，其中我删除了解构并得到了相同的结果）。当我被指示使用更多代码、输入和复杂性来实现相同的结果时，我发现很难学习一些东西。在 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

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里面的所有函数都可以使用

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

为什么在这里使用解构？

Why use destructuring here?

javascript

destructuring