Passer un tableau en paramètre d'une fonction en JavaScript

J'aimerais appeler une fonction à l'aide d'un tableau comme paramètres:

const x = ['p0', 'p1', 'p2'];
call_me(x[0], x[1], x[2]); //I don't like it

function call_me (param0, param1, param2 ) {
  //...
}

Est-il une meilleure façon de transmettre le contenu de x en call_me()?

InformationsquelleAutor Robert | 2010-05-18
  1. 399
    const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);

    Voir MDN docs pour Function.le prototype.appliquer().

    Si l'environnement prend en charge ECMAScript 6, vous pouvez utiliser un la propagation de l'argument à la place:

    call_me(...args);
    • Comme une note de côté, si quelqu'un veut passer d'un tableau associatif (nommé touches) à la place, puis utiliser un objet. Venant de PHP (et toujours en tête de ce fil par google) ce qui m'a pris un certain temps à comprendre. Vous pouvez passer l'ensemble de l'objet en tant que paramètre. w3schools.com/js/js_objects.asp
    • Merci de remarquer le "spread", argument! Ne savais pas à ce sujet.
    • votre note de côté le commentaire est intéressant, mais je ne peux pas l'analyser (je suis un javascript noob de travail à travers un couple de tutoriels). En JS, un tableau associatif est un objet selon plusieurs tutoriels.
    • et lors de l'utilisation de l'objet json à passer comme paramètre à une fonction, n'oubliez pas les Paramètre Destruction pour une meilleure lisibilité
    InformationsquelleAutor KaptajnKold
  2. 102

    Pourquoi ne pas passer l'ensemble de la matrice et de les traiter en tant que de besoin à l'intérieur de la fonction?

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

function call_me(params) {
  for (i=0; i<params.length; i++) {
    alert(params[i])
  }
}
    • C'est parce que je ne peux pas modifier call_me(). Il est défini dans une autre bibliothèque, et il n'est pas possible de jouer avec l'API.
    • +1 parce que même si elle ne répond pas à la question d'origine, c'est probablement ce qui a le+ de 100K personnes ayant consulté cette page ont été à la recherche pour.
    • Quelqu'un peut m'expliquer ce qu'est la "call_me(x)" est en train de faire? Il me semble que c'est le nom d'une fonction sans la fonction de mot-clé? Qu'est-ce exactement faire?
    • C'est un appel à la call_me fonction. Il manque juste un point-virgule à la fin.
    • c'est la mise en exécution de la déclaration de l'call_me(params) de la fonction.
    InformationsquelleAutor Karl Johan
  3. 42

    En supposant que call_me est une fonction globale, de sorte que vous ne vous attendez pas à être ensemble.

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

    Dans l'ES6 standard, une nouvelle la propagation de l'opérateur ... qui fait exactement cela.

    call_me(...x)

    Il est pris en charge par tous les navigateurs sauf IE.

    La propagation de l'opérateur peut faire beaucoup d'autres choses utiles, et le lien de la documentation fait un très bon travail en montrant que.

    InformationsquelleAutor BoltKey
  5. 6

    Comme @KaptajnKold avait répondu

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

    Et vous n'avez pas besoin de définir tous les paramètres pour call_me fonction.
    Vous pouvez simplement utiliser arguments

    function call_me () {
    //arguments is a array consisting of params.
    //arguments[0] == 'p0',
    //arguments[1] == 'p1',
    //arguments[2] == 'p2'
}
    • C'est une mauvaise pratique... vous ne serez pas en mesure de voir ce que la fonction de besoins et de tous les paramètres est facultative si vous regardez la fonction.
    InformationsquelleAutor 徐竟峰
  6. 3

    Note ce

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

};

    //---------------------------

    page html

    <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>

    pouvez appeler la fonction avec toute Args

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

    ou

    <body onmousemove="FollowMouse(d1)">
    • C'est clairement une partie de la réponse. "arguments" est absolument nécessaire pour obtenir le tableau après l'appel. Merci!
    InformationsquelleAutor ali.b.y
  7. 2

    Les arguments de la fonction peuvent également être des Tableaux:

    JS:

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

foo([1,2,3], 4)

    de-sûr, on peut aussi utiliser propagation:

    JS:

    function foo(a, b, c, d){
  console.log(a, b, c, d);
}

foo(...[1, 2, 3], 4)

    InformationsquelleAutor vsync
  8. 2

    Tout en utilisant la propagation de l'opérateur il faut noter qu'il doit être le dernier ou le seul paramètre passé. Sinon ce sera un échec.

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

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

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

    Si vous avez besoin pour passer un tableau en argument de départ que vous pouvez faire:

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

    vous pouvez utiliser la propagation de l'opérateur, en plus d'un formulaire de base

    [].concat(...array)

    dans le cas de fonctions qui retournent des tableaux, mais il devrait se passer comme arguments

    Exemple:

    function expectArguments(...args){
  return [].concat(...args);
}

JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))
    InformationsquelleAutor rman
  10. 0

    La réponse a déjà été donnée, mais je veux juste donner mon morceau de gâteau. Ce que vous voulez atteindre est appelé method borrowing dans le contexte de JS, que lorsque nous prenons une méthode d'un objet et de l'appeler dans le contexte d'un autre objet. Il est assez fréquent de prendre éventail de méthodes et de les appliquer à des arguments. Laissez-moi vous donner un exemple.

    Nous avons donc "super" fonction de hachage qui prend deux nombres comme argument et renvoie "super fort" haché chaîne:

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

hash(1,2); //"1,2" whoaa

    C'est très bien, mais nous avons peu de problème avec l'approche ci-dessus, il est contraint, ne fonctionne qu'avec deux chiffres, ce n'est pas dynamique, nous allons le faire fonctionner avec n'importe quel nombre et de plus vous n'avez pas à passer un tableau (vous pouvez si vous insistez toujours). Ok, Assez parlé, battons-nous!

    La solution naturelle serait d'utiliser arr.join méthode:

    function hash() {
  return arguments.join();
}

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

    Oh, l'homme. Malheureusement, cela ne marchera pas. Parce que nous sommes d'appel de hachage(arguments) et les arguments de l'objet est à la fois objet iterable et de tableau, mais pas un vrai tableau. Comment se fait-dessous approche?

    function hash() {
  return [].join.call(arguments);
}

hash(1,2,3,4); //"1,2,3,4" whoaa

    L'astuce est appelé method borrowing.

    Nous empruntons un join méthode à partir d'un réseau régulier [].join. Et l'utilisation [].join.call pour l'exécuter dans le contexte de arguments.

    Pourquoi ça marche?

    C'est parce que l'algorithme interne de la méthode native arr.join(glue) est très simple.

    Prises à partir de la spécification de la près de “en”:

    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.

    Donc, techniquement, il le prend et se joint à cette[0], [1] ...etc ainsi que. C'est intentionnellement écrit d'une manière qui permet à n'importe quel tableau comme ceci (pas une coïncidence, de nombreuses méthodes à suivre cette pratique). C'est pourquoi il travaille également avec this=arguments.

    InformationsquelleAutor Humoyun Ahmad
  11. -5

    1-vous pouvez vous joindre le tableau dans une chaîne

    2-le passer à la fonction

    3-appel d'split

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(name)
{
    var nameArray = name.split(',');
.
.
.
}

    appel de la méthode:

    myFunction(fruits.join(','));

    ou même

    myFunction("orange,Apple,fruits");
    InformationsquelleAutor Hojjatollah Bakhtiyari Kiya