por - pasar parametros a una funcion javascript desde html

Sintaxis extendida vs parámetro de reposo en ES2015/ES6

Question

Estoy confundido acerca de la sintaxis de propagación y el parámetro de descanso en ES2015. ¿Alguien puede explicar la diferencia entre ellos con ejemplos adecuados?

Answer 1

Cuando vemos "..." en el código, se trata de parámetros de reposo o del operador de propagación.

Hay una manera fácil de distinguir entre ellos:

Cuando ... está al final de los parámetros de la función, se trata de "parámetros de descanso" y reúne el resto de la lista en la matriz. Cuando ... ocurre en una llamada de función o similar, se llama un "operador de propagación" y expande una matriz en la lista. Usar patrones:

Los parámetros de descanso se utilizan para crear funciones que aceptan cualquier número de argumentos. El operador de propagación se utiliza para pasar una matriz a funciones que normalmente requieren una lista de muchos argumentos. Juntos ayudan a viajar entre una lista y una variedad de parámetros con facilidad. Para más información sobre esto, haga clic aquí

Answer 2

Resumen:

En javascript el ... está sobrecargado. Realiza diferentes operaciones en función del lugar donde se utiliza el operador:

1. Cuando se usa en argumentos de función de una declaración / expresión de función, convertirá los argumentos restantes en una matriz. Esta variante se llama la sintaxis de los parámetros Rest .
2. En otros casos, extenderá los valores de un iterable en lugares donde se esperan cero o más argumentos (llamadas a funciones) o elementos (literales de matriz). Esta variante se llama sintaxis de propagación .

Ejemplo:

Sintaxis del parámetro de reposo:

function rest(first, second, ...remainder) {
  console.log(remainder);
}

// 3, 4 ,5 are the remaining parameters and will be 
// merged together in to an array called remainder 
rest(1, 2, 3, 4, 5);

Sintaxis extendida:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// the numbers array will be spread over the 
// x y z parameters in the sum function
console.log(sum(...numbers));


// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers);

Answer 3

Agregado en ES6 estos tres puntos ... tiene dos significados, operador Spread y parámetro Rest

Operador de propagación: utiliza los tres puntos para expandir iterables , por iterables me refiero a arrays , string , etc. Como argumentos. Por ejemplo, la función Math.max() espera un número indeterminado de argumentos para que pueda usar el operador Spread para expandir elementos como argumentos en la función Math.max() . Aquí un ejemplo de mdn

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

var array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

Otro caso de uso es agregar, por ejemplo, tener esta matriz

const videoGames = [''mario galaxy'', ''zelda wind waker'', ''ico''];

Puedes agregarlo a otra matriz

const favoritesVideoGames = [''Shadow of the colosus'', ...videoGames];

Entonces el valor de favoritesVideoGames es

[ ''Shadow of the colosus'', ''mario galaxy'', ''zelda wind waker'', ''ico'' ]

Sobre el parámetro Rest, aquí la definición MDN

La sintaxis del parámetro rest nos permite representar un número indefinido de argumentos como una matriz.

Esto significa que puede empaquetar muchos elementos en un solo elemento

Aquí un ejemplo de MDN

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

Normalmente me confundo con estos tres puntos, esta illustration de @stephaniecodes me ayuda a recordar su lógica. Menciono que me inspiré en esta ilustración para responder a esta pregunta.

Espero que sea útil.

Answer 4

Básicamente como en Python:

>>> def func(first, *others):
...    return [first, *others]
>>> func(''a'', ''b'', ''c'')
[''a'', ''b'', ''c'']

Answer 5

Cuando usa spread, está expandiendo una sola variable en más:

var abc = [''a'', ''b'', ''c''];
var def = [''d'', ''e'', ''f''];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == [''a'', ''b'', ''c'', ''d'', ''e'', ''f''];

Al usar argumentos de descanso, está contrayendo todos los argumentos restantes de una función en una matriz:

function sum( first, ...others ) {
    for ( var i = 0; i < others.length; i++ )
        first += others[i];
    return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;

Answer 6

ES6 tiene una nueva característica de tres puntos ...

Así es como podemos usar estos puntos:

Como descanso / coleccionista / recolector

var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

Aquí ...m es un recopilador, recopila el resto de los parámetros. Internamente cuando escribimos:

var [c, ...m] = [1,2,3,4,5]; JavaScript hace lo siguiente

var c = 1,
    m = [2, 3, 4, 5];

Como propagación

var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

Aquí, ...params extienden para asignar todos sus elementos a other

Internamente javaScript hace lo siguiente

var other = [1, 2].concat(params);

Espero que esto ayude.

Answer 7

El operador de tres puntos ( ... ) de Javascript se puede usar de dos maneras diferentes:

1. Parámetro de reposo : recoge todos los elementos restantes en una matriz.

var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]

2. Operador de propagación : permite que los iterables (matrices / objetos / cadenas) se expandan en argumentos / elementos únicos.

var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Tenga en cuenta que el operador de propagación puede ser el primer elemento, pero el parámetro de descanso debe ser el último en recopilar los elementos de descanso.

Answer 8

En referencia a esto, no puedo entender cómo estamos pasando una función y devolviendo argumentos en javascript

La función es un conjunto de instrucciones que toma algunas entradas y las procesa y devuelve el resultado.

aquí tenemos una matriz [1, 2, 3, 4, 5, 6], y la función de filtro itera sobre cada elemento y pasa cada elemento a funciones positivas que devuelve el número si es par, de lo contrario se omite.

rastro:

1 => Filter(1) => positive(1) => skips 1, 2 => Filter(2) => positive(2) => returns 2, 3 => Filter(3) => positive(3) => skips 3, ... 6 => Filter(6) => positive(6) => returns 6

de ahí el resultado [2, 4, 6]