How does the spread syntax in ES6 JS work as a function argument?

那年仲夏 提交于 2019-12-11 13:57:06

问题


OK, so I'm trying to understand how the new spread works as a function parameter. Imagine a function with an unknown number of parameters and adds them all together.

let addNums = ...a => a.reduce ((a,b) => a+b);

This function obviously works. So, what's my problem? Well here's some observations, followed by my problem:

  1. the spread syntax as a function parameter / argument seems designed to 'spread' an array of values as separate arguments:

Based on the research I've done, the spread syntax can be used to pass arrays to functions that will not accept arrays as arguments as standard, e.g. Array.prototype.push(), without having to use apply:

var x = [];
var y = [1,2,3];
// where Array.push(arg1,arg2,...) requires separate arguments this is now possible:
x.push(...y);
// which 'spreads' 'y' into separate arguments: x.push (arg1,arg2,...)

but the Array passed to push in this case needs to be declared/defined beforehand (in this case y)

  1. this is confirmed by looking at the length of the arguments object inside the function

if I use addNums(1,2,3,4), arguments.length is still == 4. So, it seems that the function is also still being called as addNums(1,2,3,4)

THE PROBLEM

My problem is that I'm not calling addNums with an array as an argument for the spread syntax to process. I'm NOT calling addNums([1,2,3,...]) The behaviour I'm struggling to understand is that there seems to be a secret hidden step where, given a function declared with the spread syntax as its single argument:

let x =  ...someSetOfValues => return something ;

and then called with a list of arguments:

x(1,2,3,4,...);

there's the generation of the arguments object AND a variable of type Array is also created with the same name as the function parameter with the spread syntax.

Perhaps this is obvious or trivial to more experienced coders, but this seems to me to be counter-intuitive to the use cases put forward so far like spreading an array of values across a set of parameters of unknown length.

In fact, I would go so far to say as rather than reading and splitting an array across parameters, when a function is called with multiple parameters, but defined with a single parameter with the spread syntax, the spread syntax actually acts as something similar to : Array.apply(null, arguments) or var a = [arg1, arg2, ...] - ** it is a creator not a spreader **

Sources for my research:

  • http://es6-features.org/#SpreadOperator
  • https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_Syntax
  • Spread Syntax ES6

particularly the comment on the question "@void Mostly for use in function calls, I.e. if myFunc takes an unknown number of arguments, we can give it arguments as an array with spread. Like this: myFunc(...dynamicallyGeneratedArgs)"


回答1:


After doing more research, I was able to find a reference to what are called rest parameters.

Rest parameters look like they use the ... spread syntax as part of the parameter, but behave differently. They will in fact collect an indefinite number of arguments/parameters and then make them available as an array inside the function.

Source: link to MDN description of 'rest' parameters

Basically the behaviour that I observed in the first place!



来源:https://stackoverflow.com/questions/37718331/how-does-the-spread-syntax-in-es6-js-work-as-a-function-argument

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!