tipos - pasar parametros a una funcion javascript desde html

JavaScript variable número de argumentos para funcionar

Question

¿Hay una manera de permitir vars "ilimitados" para una función en JavaScript?

Ejemplo:

load(var1, var2, var3, var4, var5, etc...)
load(var1)

Answer 1

Aunque en general estoy de acuerdo en que el enfoque de los argumentos nombrados es útil y flexible (a menos que le importe el orden, en cuyo caso los argumentos son más fáciles), me preocupa el costo del enfoque de mbeasley (usando valores predeterminados y ampliaciones). Esta es una cantidad extrema de costo para tomar los valores predeterminados. Primero, los valores predeterminados se definen dentro de la función, por lo que se vuelven a llenar en cada llamada. En segundo lugar, puede leer fácilmente los valores nombrados y establecer los valores predeterminados al mismo tiempo utilizando ||. No es necesario crear y fusionar otro objeto nuevo para obtener esta información.

function (a, b, ...args) {}

Esto es aproximadamente la misma cantidad de código (quizás un poco más), pero debería ser una fracción del costo del tiempo de ejecución.

Answer 2

Claro, solo usa el objeto arguments .

function foo() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

Answer 3

Como ya se mencionó, puede usar el objeto de arguments para recuperar un número variable de parámetros de función.

Si desea llamar a otra función con los mismos argumentos, utilice apply . Incluso puede agregar o eliminar argumentos al convertir los arguments en una matriz. Por ejemplo, esta función inserta texto antes de iniciar sesión en la consola:

log() {
    let args = Array.prototype.slice.call(arguments);
    args = [''MyObjectName'', this.id_].concat(args);
    console.log.apply(console, args);
}

Answer 4

En los navegadores recientes, puede aceptar un número variable de argumentos con esta sintaxis:

function my_log(...args) {
     //args is an Array
     console.log(args);
     //You can pass this array as parameters to another function
     console.log(...args);
}

Answer 5

Es preferible usar la sintaxis de los parámetros de descanso como lo señaló Ramast.

function load(context) {
   var parameter1 = context.parameter1 || defaultValue1,
       parameter2 = context.parameter2 || defaultValue2;

   // do stuff
}

Solo quiero agregar una buena propiedad del argumento ... args

1. Es una matriz, y no un objeto como argumentos. Esto le permite aplicar funciones como mapear u ordenar directamente.
2. No incluye todos los parámetros, sino solo el que se pasó. Por ejemplo, la función (a, b, ... args) en este caso args contiene el argumento 3 a argumentos.longitud

Answer 6

Estoy de acuerdo con la respuesta de Ken como la más dinámica y me gusta ir un paso más allá. Si es una función a la que llama varias veces con argumentos diferentes, uso el diseño de Ken pero luego agrego valores predeterminados:

function load(context) {

    var defaults = {
        parameter1: defaultValue1,
        parameter2: defaultValue2,
        ...
    };

    var context = extend(defaults, context);

    // do stuff
}

De esta manera, si tiene muchos parámetros pero no necesariamente tiene que configurarlos con cada llamada a la función, simplemente puede especificar los valores no predeterminados. Para el método de extensión, puede usar el método de extensión de jQuery ( $.extend() ), crear el suyo propio o usar lo siguiente:

function extend() {
    for (var i = 1; i < arguments.length; i++)
        for (var key in arguments[i])
            if (arguments[i].hasOwnProperty(key))
                arguments[0][key] = arguments[i][key];
    return arguments[0];
}

Esto fusionará el objeto de contexto con los valores predeterminados y completará cualquier valor indefinido en su objeto con los valores predeterminados.

Answer 7

Otra opción es pasar sus argumentos en un objeto de contexto.

function load(context)
{
    // do whatever with context.name, context.address, etc
}

y usalo asi

load({name:''Ken'',address:''secret'',unused:true})

Esto tiene la ventaja de que puede agregar tantos argumentos con nombre como desee, y la función puede usarlos (o no) como mejor le parezca.

Answer 8

Sí, así como esto:

function load()
{
  var var0 = arguments[0];
  var var1 = arguments[1];
}

load(1,2);

Answer 9

Si bien @roufamatic mostró el uso de los argumentos de palabras clave y @Ken mostró un gran ejemplo de un objeto para uso, siento que no abordé realmente lo que está sucediendo en este caso y puede confundir a los futuros lectores o inculcar una mala práctica al no indicar explícitamente una función / method está destinado a tomar una cantidad variable de argumentos / parámetros.

function varyArg () {
    return arguments[0] + arguments[1];
}

Cuando otro desarrollador está revisando su código, es muy fácil asumir que esta función no toma parámetros. Especialmente si ese desarrollador no está al tanto de la palabra clave de argumentos . Debido a esto, es una buena idea seguir una pauta de estilo y ser coherente. Usaré Google para todos los ejemplos.

Vamos a indicar explícitamente que la misma función tiene parámetros variables:

function varyArg (var_args) {
    return arguments[0] + arguments[1];
}

Parámetro de objeto VS var_args

Puede haber ocasiones en que se necesite un objeto, ya que es el único método de mejores prácticas aprobado y considerado de un mapa de datos. Arrays asociativos son mal vistos y desanimados.

SIDENOTE: la palabra clave de argumentos realmente devuelve un objeto usando números como la clave. La herencia prototípica es también la familia de objetos. Vea el final de la respuesta para el uso correcto de la matriz en JS

En este caso podemos afirmar explícitamente esto también. Nota: esta convención de nomenclatura no es proporcionada por Google pero es un ejemplo de declaración explícita de un tipo de parámetro. Esto es importante si está buscando crear un patrón tipificado más estricto en su código.

function varyArg (args_obj) {
    return args_obj.name+" "+args_obj.weight;
}
varyArg({name: "Brian", weight: 150});

¿Cuál elegir?

Esto depende de las necesidades de su función y programa. Si, por ejemplo, simplemente está buscando devolver una base de valores en un proceso iterativo a través de todos los argumentos pasados, lo más seguro es que se quede con la palabra clave de los argumentos . Si necesita definición para sus argumentos y mapeo de los datos, entonces el método de objeto es el camino a seguir. ¡Veamos dos ejemplos y luego terminamos!

Uso de argumentos

function sumOfAll (var_args) {
    return arguments.reduce(function(a, b) {
        return a + b;
    }, 0);
}
sumOfAll(1,2,3); // returns 6

Uso de objetos

function myObjArgs(args_obj) {
    // MAKE SURE ARGUMENT IS AN OBJECT OR ELSE RETURN
    if (typeof args_obj !== "object") {
        return "Arguments passed must be in object form!";
    }

    return "Hello "+args_obj.name+" I see you''re "+args_obj.age+" years old.";
}
myObjArgs({name: "Brian", age: 31}); // returns ''Hello Brian I see you''re 31 years old

Acceso a una matriz en lugar de a un objeto ("... args" El parámetro resto)

Como se mencionó en la parte superior de la respuesta, la palabra clave de argumentos realmente devuelve un objeto. Debido a esto, cualquier método que desee utilizar para una matriz tendrá que ser llamado. Un ejemplo de esto:

Array.prototype.map.call(arguments, function (val, idx, arr) {});

Para evitar esto usa el parámetro resto:

function varyArgArr (...var_args) {
    return var_args.sort();
}
varyArgArr(5,1,3); // returns 1, 3, 5

Answer 10

Tenga en cuenta que pasar un Objeto con propiedades con nombre como lo sugirió Ken agrega el costo de asignar y liberar el objeto temporal a cada llamada. Pasar los argumentos normales por valor o por referencia generalmente será el más eficiente. Para muchas aplicaciones, el rendimiento no es crítico, pero para algunas puede serlo.

Answer 11

Use los objetos de arguments cuando esté dentro de la función para tener acceso a todos los argumentos pasados.