问题 ES6解构函数参数 - 命名根对象


有没有办法保留析构函数参数的名称?即,根对象的名称?

在ES5中,我可能会这样做(使用继承作为隐喻来说明问题):

// ES5:
var setupParentClass5 = function(options) {
    textEditor.setup(options.rows, options.columns);
};

var setupChildClass5 = function(options) {
    rangeSlider.setup(options.minVal, options.maxVal);
    setupParentClass5(options); // <= we pass the options object UP
};

我使用的是同样的 options 用于保存多个配置参数的对象。一些参数由父类使用,一些参数由子类使用。

有没有办法在ES6中使用析构函数参数?

// ES6:
var setupParentClass6 = ({rows, columns}) => {
    textEditor.setup(rows, columns);
};

var setupChildClass6 = ({minVal, maxVal}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6( /* ??? */ );  // how to pass the root options object?
};

或者我是否需要提取所有选项 setupChildClass6() 这样他们就可以单独进入 setupParentClass6()

// ugh.
var setupChildClass6b = ({minVal, maxVal, rows, columns}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6({rows, columns});
};

6173
2018-03-14 16:02


起源



答案:


我自己在很多地方都有'选项'论点。我会选择额外的一行代码。在这个例子中不值得,但在更多线路上进行解构时是一个很好的解决方案。

const setupChildClass6 = options => {
    const {minVal, maxVal} = options;
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options); 
};

8
2017-12-07 21:26



同意 - 这也是我一直在使用的。在过去的几个月里,我们都学会了更好地使用es6! - jbx


答案:


我自己在很多地方都有'选项'论点。我会选择额外的一行代码。在这个例子中不值得,但在更多线路上进行解构时是一个很好的解决方案。

const setupChildClass6 = options => {
    const {minVal, maxVal} = options;
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options); 
};

8
2017-12-07 21:26



同意 - 这也是我一直在使用的。在过去的几个月里,我们都学会了更好地使用es6! - jbx


您不能同时对同一参数使用解构和简单命名位置参数。你可以做什么:

  1. 使用解构 setupParentClass6 功能,但旧的ES6方法 setupChildClass6 (我认为这是最好的选择,只需缩短名称):

    var setupChildClass6 = (o) => {
      rangeSlider.setup(o.minVal, o.maxVal);
      setupParentClass6(o); 
    };
    
  2. 用旧 arguments 目的。但 arguments 可以减慢一个功能(特别是V8),所以我认为这是一个糟糕的方法:

    var setupChildClass6 = ({minVal, maxVal}) => {
      rangeSlider.setup(minVal, maxVal);
      setupParentClass6(arguments[0]); 
    };
    
  3. ES7提出了建议 休息/传播属性 (如果你不需要 minVal 和 maxVal 在 setupParentCalss6 功能):

    var setupChildClass6b = ({minVal, maxVal, ...rest}) => {
      rangeSlider.setup(minVal, maxVal);
      setupParentClass6(rest);
    };
    

    不幸的是,它不是ES6。


3
2018-03-14 16:37



谢谢,超级有帮助。实际上#2最接近意图,并且考虑到如何使用该功能,减速将不相关。目前,我正在使用Babel,所以也许它很快会在对象上获得其他属性。 - jbx
用法 arguments 如#2所示实际上并不慢。但我认为这是不可读的。 - Bergi
休息属性可能无法解决您的问题,因为它确实需要 minVal 和 maxVal 出来的 options 对象。谨防。 - Bergi