ES6 解构 function 参数-命名根 object

Question

Is there a way to retain the name of a destructured function argument? Ie, the name of the root object?

In ES5, I might do this (using inheritance as a metaphor to make the point):

// 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
};

I'm using the same options object to hold multiple configuration parameters. Some parameters are used by the parent class, and some are used by the subclass.

Is there a way to do this with destructured function arguments in 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?
};

Or do I need to extract all of the options in setupChildClass6() so that they can be individually passed into setupParentClass6() ?

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

Answer 1

I have the 'options' arguments on too many places myself. I would opt for 1 extra line of code. Not worthy in this example, but a good solution when having destructuring on more lines.

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

Answer 2

You cannot do it directly in the arguments, but you can extract the values afterward:

function myFun(allVals) {
    const { val1, val2, val3 } = allVals;
    console.log("easy access to individual entries:", val2);
    console.log("easy access to all entries:", allVals);
}

Answer 3

You cannot use destructuring and simple named positional argument for the same parameter at the same time. What you can do:

1. Use destructuring for setupParentClass6 function, but old ES6 approach for setupChildClass6 (I think this is the best choice, just make name shorter):

    var setupChildClass6 = (o) => { rangeSlider.setup(o.minVal, o.maxVal); setupParentClass6(o); };

2. Use old arguments object. But arguments can slow down a function (V8 particular), so I think it's a bad approach:

    var setupChildClass6 = ({minVal, maxVal}) => { rangeSlider.setup(minVal, maxVal); setupParentClass6(arguments[0]); };

3. ES7 has proposal for rest/spread properties (if you don't need minVal and maxVal in setupParentCalss6 function):

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

   Unfortunately it's not ES6.

Answer 4

Personally I'd rather destructure within the function body, but for completeness I wanted to show that it's technically possible to access both the "root" object and destructured properties via parameters.

To do we take advantage of the fact that parameters have access to preceding parameters in their default values. That allows you to define a second parameter that destructures the first one:

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

So this function takes two arguments and defaults to using the first value of the first argument for the second argument.

Of course you'd have to take great care that it's communicated properly what the purpose of this is.

Answer 5

This is the best I could come up with. Not great, but far better (IMO) than doing the destructing on another line. It gives you a heads-up in a way too that you are going to provide options first and foremost, and also that you are destructuring it in the function...

var setupParentClass6 = options => (({rows, columns}) => {
    textEditor.setup(rows, columns);
})(options);

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