为啥要设计一个库来在 Javascript 中使用 const [] 而不是 const ？

Posted 2023-02-22

【中文标题】为啥要设计一个库来在 Javascript 中使用 const [] 而不是 const ？

【英文标题】：Why would you design a library to use const [] instead of const in Javascript?为什么要设计一个库来在 Javascript 中使用 const [] 而不是 const ？

【发布时间】：2019-12-28 23:39:33

【问题描述】：

我已经使用const ... 在 javascript 中进行对象解构，但我看到了一些最近使用 const [ ... ] 进行数组解构的示例。

例如，来自React Hooks documentation：

const [state, setState] = useState(() => 
  const initialState = someExpensiveComputation(props);
  return initialState;
);

在这种情况下，为什么要使用数组解构或最好使用数组解构？换句话说，为什么他们设计useState函数以数组的形式返回一对结果，而不是返回一个对象？

对象解构的好处似乎在于它的命名、更熟悉且与顺序无关。

【问题讨论】：

如果我猜是因为它允许开发人员在他们的变量命名方案中拥有更大的灵活性。

使用 vs [] 取决于方法返回什么.....

【参考方案1】：

您认为的数组实际上是tuple。 JavaScript 没有为它们提供额外的数据类型，但它的异构数组运行良好。正如你所说，这是一对结果，而不是数组。

为什么宁愿将一对结果作为数组返回，而不是返回一个对象？

因为它的简单性。您不需要声明一些详细类型（假设是 TypeScript）并为属性提供名称。这不是 StateUse<S> state: S, setState: S => S 结果，而是简单的 Tuple<S, S=>S> 或 [S, S=>S]（取决于您喜欢的语法）。

这与我们在只有几个参数时使用functions with multiple parameters instead of a parameter object的原因完全相同，只是应用了输出类型而不是输入类型。

对象解构的好处似乎在于它的命名、更熟悉且与顺序无关。

数组解构比对象解构更简单，也应该很熟悉。当只处理两个结果值并且从不改变它时，元组更简单。预计永远不需要添加另一个属性（在这种情况下，对象会更好）。 没有属性名称可以更容易（不那么冗长）使用别名作为解构目标。它迫使用户自己想出一个好的、适当的描述性变量名。

它依赖于顺序无关紧要，顺序只是遵循[getter, setter] 或[key, value] 之类的约定，并且您通常总是希望使用这两个值，因此能够从解构中省略属性没有任何好处.

【参考方案2】：

所以你可以随意调用变量

const [bananas, setBananas] = useState(...)

如果是这样的话：

const bananas, setBananas = useState(...)

那么useState 需要返回：

   bananas: (...),
   setBananas: (...)

每个想要useState 的开发人员都需要有一个名为bananas 的变量，或者将其别名为其他东西，这比仅仅返回一个数组要复杂得多

【讨论】：

"所以你可以随心所欲地调用变量"——你也可以用一个对象来做到这一点：const state: bananas, setState: setBananas = useState(...)。

但是你需要返回的属性的名称，你需要更多的代码来给它起别名

@str 是的，你可以，但是 a) 它过于冗长 b) 它确实会诱使用户不要给属性起别名，而是使用非描述性的变量名。

【参考方案3】：

您可以在一个组件中拥有多个状态。

当你返回一个对象时，你几乎总是需要给state & setState 加上别名。

function App() 
  const state: age, setState: setAge = useState(0);
  const state: name, setState: setName = useState('');

返回一个数组，让你简单命名返回的状态&setState。

而名称state 和setState 过于笼统，在很多情况下都无法使用。

但是当您编写自己的自定义钩子返回状态/更新器/调度程序时，在许多情况下返回一个对象会更有意义。