javascript - JavaScript，解构与赋值

Question

我有这个代码：

const availableDays = status.availableDays;

我有一个改变的建议：

const { availableDays } = status;

它们都是一行代码，但我想知道是否有解释为什么解构比第一个更好的编码方式。

如果代码是：

const availableDays = status.availableDays;
const someVar = status.someVar;
const someOtherVar = status.someOtherVar;

我知道这样会是最短的（不知道是否更好）：

const { availableDays, someVar, someOtherVar } = status;

但我的问题涉及性能、安全性、可读性等原因。

Answer 1

优点是不重复标识符，这对于属性名称和变量是相同的。

这使代码更简洁，更易于阅读/理解，并减少了拼写错误的可能性。性能（如果不计算代码大小）或安全性（如果不计算错误可能性）没有区别。

Answer 2

以下是提高可读性的示例：

const myObj = { availableDays: 3, someVar: "foo", someOtherVar: "bar" };

function myFunc(status) {
   const availableDays = status.availableDays;
   const someVar = status.someVar;
   const someOtherVar = status.someOtherVar;

   // do stuff
}

可以重构为：

function myFunc({ availableDays, someVar, someOtherVar }) {
   // do stuff
}

这在处理传递到 React 组件的 prop 时特别有用。