Passer un tableau comme paramètre de fonction dans JavaScript
j'aimerais appeler une fonction utilisant 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 ) {
// ...
}
y a-t-il une meilleure façon de passer le contenu de x dans call_me() ?
9 réponses
const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);
voir docs MDN Function.prototype.apply() .
si L'environnement supporte ECMAScript 6, Vous pouvez utiliser un spread argument à la place:
call_me(...args);
pourquoi ne pas passer le tableau entier et le traiter comme nécessaire à 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])
}
}
en supposant que call_me est une fonction globale, donc vous ne vous attendez pas à ce qu'elle soit définie.
var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);
dans la norme ES6 il y a un nouveau " spread operator ... qui fait exactement cela.
call_me(...x)
il est supporté par tous les principaux navigateurs sauf IE.
l'opérateur de propagation peut faire beaucoup d'autres choses utiles, et la documentation liée fait un très bon travail pour montrer cela.
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 la fonction call_me non plus.
Vous pouvez simplement utiliser arguments
function call_me () {
// arguments is a array consisting of params.
// arguments[0] == 'p0',
// arguments[1] == 'p1',
// arguments[2] == 'p2'
}
noter 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>
peut appeler la fonction avec N'importe quel Args
<body onmousemove="FollowMouse(d1,d2)">
ou
<body onmousemove="FollowMouse(d1)">
la réponse était déjà 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 courant de prendre des méthodes de tableau et de les appliquer aux arguments. Laissez-moi vous donner un exemple.
donc nous avons" super "fonction de hachage qui prend deux nombres comme argument et renvoie" super sûr " chaîne hachée:
function hash() {
return arguments[0]+','+arguments[1];
}
hash(1,2); // "1,2" whoaa
jusqu'ici si bon, mais nous avons peu de problème avec l'approche ci-dessus, il est contraint, ne fonctionne avec deux nombres, qui n'est pas dynamique, faisons-le fonctionner avec n'importe quel nombre et de plus vous n'avez pas à passer un tableau (vous pouvez si vous insistez encore). 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, mec. Malheureusement, cela ne marchera pas. Parce que nous appelons objet hash(arguments) et arguments est à la fois itérable et de type 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
le tour est appelé method borrowing.
nous empruntons une méthode join à un tableau régulier [].join. et utilisons [].join.call pour l'exécuter dans le contexte de arguments .
pourquoi ça marche?
c'est parce Que l'interne algorithme de la méthode native arr.join(glue) est très simple.
tiré de la spécification presque "tel quel":
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 prend ceci et joint ceci[0], ceci[1] ...etc. ensemble. Il est intentionnellement écrit d'une manière qui permet n'importe quel tableau-comme ceci (pas une coïncidence, beaucoup de méthodes suivent cette pratique). C'est pourquoi il fonctionne aussi avec this=arguments.
1 - vous pouvez 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(',');
.
.
.
}
méthode d'appel:
myFunction(fruits.join(','));
ou même
myFunction("orange,Apple,fruits");