sobre - Pasando una matriz como parámetro de función en JavaScript

recibir valor en funcion javascript

Question

Me gustaría llamar a una función usando una matriz como parámetros:

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

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

¿Hay una mejor manera de pasar los contenidos de x a call_me() ?

Answer 1

Argumentos de función también pueden ser matrices:

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

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

Por supuesto, también se puede utilizar spread :

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

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

Answer 2

¿Por qué no pasa la matriz completa y la procesa según sea necesario dentro de la función?

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

function call_me(params) {
  for (i=0; i<params.length; i++) {
    alert(params[i])
  }
}

Answer 3

1-puedes unir la matriz en una cadena
2-pasarlo a funcionar
División de 3 llamadas

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

método de llamada:

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

o incluso

myFunction("orange,Apple,fruits");

Answer 4

Como @KaptajnKold había contestado.

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

Y tampoco es necesario que defina todos los parámetros para la función call_me. Puedes usar arguments

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

Answer 5

En la norma ES6 hay un nuevo operador de propagación ... que hace exactamente eso.

call_me(...x)

Es compatible con todos los navegadores principales, excepto para IE.

El operador de propagación puede hacer muchas otras cosas útiles, y la documentación vinculada hace un buen trabajo para demostrarlo.

Answer 6

La respuesta ya estaba dada, pero solo quiero dar mi pedazo de pastel. Lo que quiere lograr se llama method borrowing en el contexto de JS, que cuando tomamos un método de un objeto y lo llamamos en el contexto de otro objeto. Es bastante común tomar métodos de matriz y aplicarlos a argumentos. Dejame darte un ejemplo.

Así que tenemos la función de hashing "super" que toma dos números como argumento y devuelve una cadena de hash "super segura":

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

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

Hasta ahora todo bien, pero tenemos un pequeño problema con el enfoque anterior, está restringido, solo funciona con dos números, eso no es dinámico, hagamos que funcione con cualquier número y, además, no tiene que pasar una matriz (puede si todavía insistes). Ok, basta de hablar, vamos a luchar!

La solución natural sería utilizar el método arr.join :

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

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

Oh hombre. Desafortunadamente, eso no funcionará. Debido a que estamos llamando a hash (argumentos), el objeto de argumentos es iterable y de tipo matriz, pero no es una matriz real. ¿Qué tal el siguiente enfoque?

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

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

El truco se llama method borrowing.

Tomamos prestado un método de join de una matriz regular [].join. Y use [].join.call para ejecutarlo en el contexto de los arguments .

¿Por qué funciona?

Esto se debe a que el algoritmo interno del método nativo arr.join(glue) es muy simple.

Tomado de la especificación casi "como está":

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.

Entonces, técnicamente toma esto y se une a este [0], este [1] ... etc juntos. Está escrito intencionalmente de una manera que permite cualquier arreglo como este (no es una coincidencia, muchos métodos siguen esta práctica). Es por eso que también funciona con this=arguments.

Answer 7

Nota esto

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

};

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

página 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>

Puede llamar a la función con cualquier Args.

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

o

<body onmousemove="FollowMouse(d1)">

Answer 8

Suponiendo que call_me es una función global, por lo que no espera que esto se establezca.

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

Answer 9

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

Consulte los documentos MDN para Function.prototype.apply() .

Si el entorno es compatible con ECMAScript 6, puede usar un argumento de propagación en su lugar:

call_me(...args);