Een array doorgeven als functieparameter in JavaScript

Ik wil graag een functie aanroepen met een array als parameters:

const x = ['p0', 'p1', 'p2'];
call_me(x[0], x[1], x[2]); // I don't like it
function call_me (param0, param1, param2 ) {
  // ...
}

Is er een betere manier om de inhoud van xdoor te geven aan call_me()?


Antwoord 1, autoriteit 100%

const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);

Zie MDN-documenten voor Function.prototype.apply().


Als de omgeving ECMAScript 6 ondersteunt, kunt u een verspreid argumentin plaats daarvan:

call_me(...args);

Antwoord 2, autoriteit 27%

Waarom geef je niet de hele array door en verwerk je deze naar behoefte in de functie?

var x = [ 'p0', 'p1', 'p2' ]; 
call_me(x);
function call_me(params) {
  for (i=0; i<params.length; i++) {
    alert(params[i])
  }
}

Antwoord 3, autoriteit 11%

In de ES6-standaard is er een nieuwe spread-operator...die precies dat doet.

call_me(...x)

Het wordt ondersteund door alle belangrijke browsers behalve IE.

De spread-operator kan vele andere nuttige dingen doen en de gekoppelde documentatie doet echt een goede baan bij het laten zien.


Antwoord 4, Autoriteit 10%

Aangenomen dat Call_Me een wereldwijde functie is, dus u verwacht niet dat dit wordt ingesteld.

var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);

Antwoord 5, Autoriteit 2%

Zoals @kaptajnkold had geantwoord

var x = [ 'p0', 'p1', 'p2' ];
call_me.apply(this, x);

En u hoeft ook niet elke parameters voor Call_ME-functie te definiëren.
U kunt gewoon arguments

gebruiken

function call_me () {
    // arguments is a array consisting of params.
    // arguments[0] == 'p0',
    // arguments[1] == 'p1',
    // arguments[2] == 'p2'
}

Antwoord 6

Tijdens het gebruik van de spread-operator moeten we opmerken dat het de laatste of enige parameter moet zijn. Anders zal het falen.

function callMe(...arr){ //valid arguments
    alert(arr);
}
function callMe(name, ...arr){ //valid arguments
    alert(arr);
}
function callMe(...arr, name){ //invalid arguments
    alert(arr);
}

Als u een array moet passeren als het startargument dat u kunt doen:

function callMe(arr, name){
    let newArr = [...arr];
    alert(newArr);
}

Antwoord 7

Noteer dit

function FollowMouse() {
    for(var i=0; i< arguments.length; i++) {
        arguments[i].style.top = event.clientY+"px";
        arguments[i].style.left = event.clientX+"px";
    }
};

//—————————

html-pagina

<body onmousemove="FollowMouse(d1,d2,d3)">
<p><div id="d1" style="position: absolute;">Follow1</div></p>
<div id="d2" style="position: absolute;"><p>Follow2</p></div>
<div id="d3" style="position: absolute;"><p>Follow3</p></div>
</body>

kan functie aanroepen met elke Args

<body onmousemove="FollowMouse(d1,d2)">

of

<body onmousemove="FollowMouse(d1)">

Antwoord 8

Functieargumenten kunnen ook Arrays zijn:

function foo([a,b,c], d){
  console.log(a,b,c,d);
}
foo([1,2,3], 4)

Antwoord 9

u kunt de spread-operator in een meer basale vorm gebruiken

[].concat(...array)

in het geval van functies die arrays retourneren, maar waarvan wordt verwacht dat ze worden doorgegeven als argumenten

Voorbeeld:

function expectArguments(...args){
  return [].concat(...args);
}
JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))

Antwoord 10

Het antwoord was al gegeven, maar ik wil gewoon mijn stukje taart geven. Wat u wilt bereiken, wordt method borrowingin de context van JS, dat wanneer we een methode van een object nemen en noemen in de context van een ander object. Het is vrij gebruikelijk om arraymethoden te nemen en ze toe te passen op argumenten. Laat me je een voorbeeld geven.

Dus we hebben “Super” Hashing-functie die twee cijfers als argument duurt en “Super Safe” Hashed String retourneert:

function hash() {
  return arguments[0]+','+arguments[1];
}
hash(1,2); // "1,2" whoaa

Tot nu toe zo goed, maar we hebben weinig problemen met de bovenstaande aanpak, het is beperkt, werkt alleen met twee cijfers, dat is niet dynamisch, laten we het laten werken met elk nummer en plus u hoeft geen array te halen (je kunt als je nog steeds aandringt). OK, genoeg praten, laten we vechten!

De natuurlijke oplossing zou zijn om arr.joinmethode te gebruiken:

function hash() {
  return arguments.join();
}
hash(1,2,4,..); //  Error: arguments.join is not a function

Oh, man. Helaas zal dat niet werken. Omdat we hash (argumenten) en argumentenobject bellen, is het object zowel iespen als array-achtig, maar geen echte array. Hoe zit het met de onderstaande aanpak?

function hash() {
  return [].join.call(arguments);
}
hash(1,2,3,4); // "1,2,3,4" whoaa

De truc wordt method borrowing.

We lenen een join-methode van een gewone array [].join.en gebruik [].join.callom het in te voeren de context van arguments.

Waarom werkt het?

Dat komt omdat het interne algoritme van de native methode arr.join(glue)heel eenvoudig is.

Genomen uit de specificatie bijna “zoals het is”:

Let glue be the first argument or, if no arguments, then a comma ",".
Let result be an empty string.
Append this[0] to result.
Append glue and this[1].
Append glue and this[2].
…Do so until this.length items are glued.
Return result.

Dus, technisch gezien neemt het dit en voegt dit[0], dit[1] …etc samen. Het is opzettelijk zo geschreven dat elke array zoals deze mogelijk is (geen toeval, veel methoden volgen deze praktijk). Daarom werkt het ook met this=arguments.

Other episodes