在返回语句中解构

IT技术 javascript reactjs ecmascript-6 relay
2021-05-10 23:59:30

我的应用程序中有多个案例,看起来像这样:

  getVariables() {
    const {
      allowCustomValues,
      budgets,
      budgetsToAdd,
      budgetsToRemove,
      isGlobal,
      isRequired,
      name,
      tagTypeId,
      valuesToAdd,
      valuesToDelete,
    } = this.props;

    return {
      allowCustomValues,
      budgets,
      budgetsToAdd,
      budgetsToRemove,
      isGlobal,
      isRequired,
      name,
      tagTypeId,
      valuesToAdd,
      valuesToDelete,
    };
  }

这看起来很麻烦,但更短的解决方案涉及在我想要的每个变量之前加上this.props.,从维护的角度来看,这并不是更好。

我想要的是这样的:

  getVariables() {
    return this.props.{
      allowCustomValues,
      budgets,
      budgetsToAdd,
      budgetsToRemove,
      isGlobal,
      isRequired,
      name,
      tagTypeId,
      valuesToAdd,
      valuesToDelete,
    };
  }

是否有某种 ES6 语法可以让我使这段代码更加 DRY?

编辑:可能是return 语句ES6 解构的副本,但那个有一个不能解决问题的公认答案。

3个回答

实际上解构不允许这样做。

您正在询问 lodash 的等效项pick()也许你的项目中已经有 lodash。如果你不这样做,你仍然可以自己编写这样的助手(但最好使用来自 lodash 或其他库的稳定的社区证明版本)

为什么不直接使用Object.assign()

    return Object.assign({}, this.props);

这将构建一个新的空对象,然后将所有可枚举属性复制this.props到其中。目标对象由返回,Object.assign()因此它几乎完成了所有工作。

怎么样

return {...this.props}