Un artículo que explica en detalle los parámetros de las funciones de JavaScript.

función foo (a, b) {
    console.log([a, b]);
}

foo(1, 2); //

función foo (a, b) {
    let a = 1; // Error, se ha declarado a const b = 1; // Error, se ha declarado b}

función agregar(núm) {
    devolver número + 1;
}

vamos a contar = 5;
let result = add(count); // El proceso de paso de parámetros aquí puede considerarse como num = count;

consola.log(recuento); // 5
console.log(resultado); // 6

función setName(obj) {
    obj.nombre = "Xiao Ming";
}

dejar persona = {};

setName(person); // El proceso de paso de parámetros aquí puede verse como obj = person;
console.log(person); // {name: "Xiao Ming"}

función foo(a, b) {
	console.log(argumentos[0]);
    console.log(argumentos[1]);
    console.log(argumentos.longitud);
}

foo(10, 20); // Salida 10, 20, 2 en secuencia

función foo() {
	console.log(argumentos[0]);
    console.log(argumentos[1]);
}

foo(10, 20); // Salida 10 y 20 en secuencia.

función foo(a) {
	argumentos[0]++;
    consola.log(a);
}

foo(10); // Salida 11
//----------------------------------------
función foo2 (a) {
	a++;
    console.log(argumentos[0]);
}

foo2(10); // Salida 11

function foo(a,b) {
    argumentos[1] = 2;
    consola.log(b);
}

foo(1); // Salida indefinida

foo(1, undefinido); //

deja foo = () => {
    console.log(argumentos[0]);
}foo(); // Error, los argumentos no están definidos.

función fn1().
    sea ​​fn2 = () => {
    	console.log(argumentos[0]);
    }
    
    fn2();
}fn1(5);

función foo(obj) {
    console.log(obj.nombre, obj.sexo, obj.edad);
}

foo({ sexo: 'Hombre', edad: 18, nombre: 'Xiao Ming' }); // Xiao Ming es hombre 18

function sayHi(name) {.
    nombre = nombre || 'todos';
    
	console.log( 'Hola ' + nombre + '!');
}

sayHi(); // Muestra '¡Hola a todos!'

// la declaración if determina la función sayHi(name) {.
	si (nombre === indefinido) {
		nombre = 'todos';
	}
    
	console.log( 'Hola ' + nombre + '!');
}

//Función de juicio de expresión ternaria sayHi(nombre) {
	nombre = (nombre! == indefinido)? nombre: 'todos';
	
    console.log( 'Hola ' + nombre + '!');
}

function sayHi(name = 'everyone') { // Al definir una función, asigna valores directamente a los parámetros formales console.log( 'Hola' + nombre + '!');
}

sayHi(); // Salida '¡Hola a todos!' 
sayHola('Tony'); // Salida '¡Hola Tony!' 
sayHi(undefinido); // Salida '¡Hola a todos!'

function sayHi(name = 'every'+'one') {
	console.log( 'Hola ' + nombre + '!');
}

sayHi(); // Salida '¡Hola a todos!' 
//------------------------------------------
función foo() {
    console.log('Llamando a foo');
    devolver 'Tony';
}

función decirHola(nombre = foo()) {
	console.log( 'Hola ' + nombre + '!');
}
		  
sayHola(); // Salida 'llamar a foo'
         // Salida '¡Hola Tony!' 

sayHi(indefinido); // Salida 'llamar a foo'
                  // Salida '¡Hola Tony!' 

sayHi('John'); // Salida '¡Hola John!'

Por lo general, establecemos valores predeterminados para los parámetros para que podamos omitirlos adecuadamente al llamar a la función. Lo que debe tenerse en cuenta aquí es que cuando hay varios parámetros, si el parámetro con un valor predeterminado no se coloca al final. En realidad es imposible omitirlo.

 función fn(x = 1, y) {
	console.log([x, y]);
}

fn(); // salida[1, indefinido]
fn(2); //salida[2, indefinido]
fn(, 2); // Error, error de sintaxis (aquí no se admiten espacios vacíos como matrices)
fn(undefinido, 2); // Salida [1, 2] (¡Es mejor pasar 1 por conveniencia!)

En el ejemplo anterior, el valor predeterminado establecido para el parámetro formal x parece no tener sentido. Por tanto, lo mejor es poner parámetros con valores predeterminados al final:

 función fn(x, y = 2) {
	console.log([x, y]);
}

fn(); // salida[indefinido, 2]
fn(1); //salida[1, 2]
fn(1, 1) //salida[1, 1]

Cuando varios parámetros tienen valores predeterminados establecidos, el problema vuelve a surgir. No puede omitir los parámetros anteriores y solo pasar los parámetros reales al último parámetro.

 función fn(x, y = 2, z = 3) {
	console.log([x, y, z]);
}

fn(1, , 10) // Informar error

Sabíamos antes que podemos evitar la restricción del orden de los parámetros pasando objetos. ¿Cómo implementar los valores predeterminados de los parámetros? Usar || , sentencias if o expresiones ternarias para juzgar también es una solución, pero parece un poco al revés. Los siguientes son otros dos métodos nuevos en ES6.

Los valores predeterminados de los parámetros se utilizan junto con Object.assign()

 función fn(obj = {}) {
    dejar defaultObj = {
        x: indefinido,
        y: 2,
        z: 3
    }
    
    let resultado = Object.assign(defaultObj, obj);
    
	console.log([resultado.x, resultado.y, resultado.z]);
}

fn(); // salida [indefinido, 2, 3]
fn({ x: 1, z: 10 }); // Salida [1, 2, 10]

En el ejemplo anterior, se define un objeto defaultObj en la función y las propiedades que contiene se usan como los valores predeterminados de los parámetros. Luego, Object.assagin () se usa para fusionar el objeto entrante y el objeto predeterminado. Las propiedades en defaultObj serán Los mismos atributos de obj se anulan. Si hay otros atributos en obj, se asignarán a defaultObj. Aquí se utiliza una variable para recibir el objeto combinado devuelto.

Al mismo tiempo, el valor predeterminado del parámetro formal obj también se establece en un objeto vacío para evitar que se pasen parámetros cuando se llama a la función, porque esto hará que el segundo parámetro recibido por Object.assign() undefined esté definido , lo que genera un error.

Los valores predeterminados de los parámetros y las asignaciones de desestructuración se utilizan juntos

Cuando se llama a una función, la coincidencia de parámetros reales y parámetros formales es en realidad un proceso de asignación implícito. Por lo tanto, el paso de parámetros también se puede deconstruir y asignar:

 función fn({ x, y = 2, z = 3 }) {
    console.log([x, y, z]);
}

fn({}); // Salida [indefinido, 2, 3]
fn({ x: 1, z: 10 }); // Salida [1, 2, 10]

En este ejemplo, solo se usa el valor predeterminado de la asignación desestructurante del objeto y no se usa el valor predeterminado del parámetro de función. Si no se pasan parámetros cuando se llama a la función, también se informará un error, porque esto hará que la asignación de desestructuración falle durante la inicialización de parámetros, lo que equivale a ejecutar código como {x, y = 2, z = 3} = undefined .

De manera similar, puede usar la sintaxis de los valores predeterminados de los parámetros para establecer un objeto de desestructuración predeterminado para {x, y = 2, z = 3} , de modo que las funciones sin pasar parámetros se puedan ejecutar sin problemas:

 función fn({ x, y = 2, z = 3 } = {}) {
    console.log([x, y, z]);
}

fn(); // salida [indefinido, 2, 3]

Aquí hay dos valores predeterminados, lo que puede resultar un poco confuso. Así que utilice un pseudocódigo para explicar el proceso de inicialización de parámetros anterior:

 if(parámetros reales=== {...}) { // cuando fn({...});     
    { x, y = 2, z = 3 } = {...};
                        
} else if (parámetro real === indefinido){ // cuando fn();
    { x, y = 2, z = 3 } = {};

}

Hay un detalle que requiere especial atención en los valores predeterminados dobles, que es la diferencia entre el valor predeterminado de la asignación desestructurante y el valor predeterminado del parámetro de función. Consulte el siguiente ejemplo:

 función fn ({ x = 1 } = {}, { y } = { y: 2 }){
    consola.log(x, y);
}

fn(); // Salida 1 2
fn({ x: 10 }, { y: 20 }); // Salida 10 20
fn({},{}); // 1 indefinido

En esta función, hay dos conjuntos de parámetros que utilizan asignación desestructurante. Parece que tanto x como y tienen valores predeterminados establecidos. Aunque son dos formas diferentes, los resultados obviamente no son los mismos en todos los casos. Cuando el parámetro pasado es {} , y no obtiene el valor predeterminado 2. ¿A qué se debe esto? Combinado con el ejemplo de pseudocódigo anterior:

 fn({ x: 10 }, { y: 20 }); // Durante la inicialización: { x = 1 } = { x: 10 }, { y } = { y: 20 }

fn({},{}); // Durante la inicialización: { x = 1 } = {}, { y } = {}

Cuando el parámetro pasado es {} , el parámetro de función no falta ni está undefined , por lo que el valor predeterminado del parámetro de función no tiene ningún efecto. Al mismo tiempo, no hay valores correspondientes para x e y en {} . El 1 obtenido por x es el valor predeterminado de la asignación de desestructuración, y y no tiene un valor predeterminado para la asignación de desestructuración, por lo que el valor predeterminado es undefined .

Alcance y zona muerta temporal de los valores predeterminados de los parámetros

Hay otro pequeño detalle una vez que los parámetros se establecen en los valores predeterminados, formarán su propio alcance (envueltos en (...) ), por lo que no se puede hacer referencia a las variables en el cuerpo de la función:

 función foo(a = b) {
    sea ​​b = 1;
}

foo(); // Error, b no está definido

Pero este alcance es solo temporal. Una vez inicializados los parámetros, este alcance ya no existirá.

Se siguen también las reglas de los ámbitos ordinarios:

 sea ​​b = 2;

función foo(a = b) {
    sea ​​b = 1;
    devolver un;
}

foo(); // 2

En el ejemplo anterior, hay una variable global b, entonces el parámetro formal a obtendrá el valor de la variable global b.

Por supuesto, si hay un parámetro formal b en el alcance del parámetro formal, primero obtendrá el alcance actual:

 sea ​​b = 2;

función foo(b = 3,a = b) {
    devolver un;
}

foo(); // 3

Establezca valores predeterminados para múltiples parámetros, se inicializarán en orden, siguiendo las reglas de la "zona muerta temporal", es decir, los parámetros anteriores no pueden hacer referencia a los parámetros posteriores:

 función foo(a = b, b = 2) {
    devolver a + b;
}

foo(); // Error, no se puede acceder a b antes de la inicialización

6. Recopilación y ampliación de parámetros.

parámetros restantes

ES6 proporciona la sintaxis de **parámetros restantes (resto)** ( ...变量名), que puede recopilar parámetros reales redundantes de la función (es decir, parámetros reales que no corresponden a parámetros formales), de modo que no haya Necesito usar arguments . Entendido. Si el parámetro formal se usa con el operador ... , se convertirá en una matriz y los parámetros reales redundantes se colocarán en esta matriz.

Uso básico de los parámetros restantes:

 función suma(a, ...valores) {
 
    for (sea val de valores) {
        a += valor;
    }
    
    devolver un;
}

suma(0, 1, 2, 3);

En el ejemplo anterior, durante la inicialización de parámetros, la coincidencia se realiza primero según la posición del parámetro, se asigna 0 a a y luego los parámetros restantes 1, 2 y 3 se colocarán en los valores de la matriz.

El siguiente es un ejemplo comparativo del uso de objetos arguments y parámetros restantes para obtener parámetros:

 // Cómo escribir argumentos function sortNumbers() {
	return Array.prototype.slice.call(argumentos).sort();
}

// Cómo escribir los parámetros restantes const sortNumbers = (...numbers) => {
    devolver números.sort();
}

Se puede ver que los parámetros restantes están escritos de manera más concisa. Aunque arguments es un objeto similar a una matriz y un objeto iterable, después de todo, no es una matriz. No admite métodos de matriz. Cuando usamos arguments , si queremos llamar a un método de matriz, primero debemos usar Array.prototype.slice.call para convertirlo en una matriz.

Los parámetros restantes son diferentes del objeto arguments . Son instancias Array reales y pueden usar fácilmente el método de matriz. Y las funciones de flecha también admiten el resto de parámetros.

Además, el uso de los parámetros restantes no afecta la funcionalidad del objeto arguments ; aún puede reflejar los parámetros pasados ​​al llamar a la función.

• La posición de los parámetros restantes.

El parámetro restante debe ser el último parámetro formal; de lo contrario, se informará un error.

 // Función de informe de errores fn1(a, ...rest, b) {
	console.log([a, b, resto]);
} 

//Forma correcta de escribir la función fn2(a, b, ...rest) {
    console.log([a, b, resto]);
}

fn2(1, 2, 3, 4) // Salida [1, 2, [3, 4]]

Expandir sintaxis

Anteriormente sabíamos cómo recopilar parámetros redundantes en una matriz, pero a veces necesitamos hacer lo contrario, como pasar los elementos de una matriz a una función por separado en lugar de pasar una matriz, como esto:

 función suma(...valores) {
    sea ​​suma = 0;
    
    for (sea val de valores) {
        suma += valor;
    }
    
    suma de devolución;
}

sea ​​arr = [1, 2, 3, 4];

suma(arr); // "01,2,3,4"

La función en el ejemplo anterior acumulará todos los valores pasados. Si la pasamos directamente en una matriz, no obtendremos el resultado que queremos.

En el ejemplo, si se pasa una matriz, el valor de los valores se convertirá en [[1, 2, 3, 4]] , lo que dará como resultado un solo elemento en los valores de la matriz, y el tipo de este elemento es una matriz. . Luego, el valor de retorno de la función es el resultado de sumar el valor 0 y la matriz [1, 2, 3, 4] Los dos tipos se convierten implícitamente en cadenas y luego se suman. Es una concatenación de cadenas.

Para desmontar la matriz y pasarla a la función, primero es imposible pasar los parámetros uno por uno: sum(arr[0], arr[1], arr[2], arr[3]); No siempre es posible saber cuántos elementos hay en la matriz y puede haber muchos elementos en la matriz. No es aconsejable pasarlo manualmente.

Es más factible utilizar el método apply():

 suma.aplicar(nulo, arr); // 10

Pero esta aún no es la solución óptima, ¡así que aquí viene el punto clave!

La nueva **sintaxis de expansión (spread)** en ES6 puede ayudarnos a afrontar esta situación. También utiliza ...变量名. Aunque es la misma que la sintaxis de parámetros restantes, su propósito es completamente opuesto. Puede dividir un objeto iterable en una secuencia de parámetros separados por comas.

Cuando se llama a la función, su aplicación es la siguiente:

 suma(...arr); // 10

// Equivalente a suma(1,2,3,4);

Incluso se puede usar con valores regulares a voluntad, no hay restricciones en las posiciones delantera y trasera y se pueden pasar varios objetos iterables al mismo tiempo:

 suma(-1, ...arr); // 9
suma(...arreglo, 5); // 15
suma(-1, ...arr, 5);
suma(-1, ...arr, ...[5, 6, 7]);

El operador de expansión ... equivale a completar la operación de pasar parámetros manualmente por separado para nosotros. La función solo sabe que los parámetros reales recibidos son valores individuales y no tendrán otros efectos debido a la existencia del operador de expansión.

Aunque todos los ejemplos anteriores son para matrices, la sintaxis de expansión puede hacer más que eso. Se pueden expandir otros objetos iterables, como cadenas y objetos literales. Para obtener más información, consulte → Sintaxis de expansión.

Resumir

• Los parámetros formales son variables locales declaradas en la función. Los parámetros reales pasados ​​a la función se asignarán a los parámetros formales. La transferencia de parámetros de función es en realidad un proceso de asignación implícito.

• El número de parámetros formales y parámetros reales puede no ser igual:

  ● Los parámetros formales a los que les faltan parámetros reales obtendrán el valor predeterminado undefined .

  ● Se puede acceder a parámetros reales adicionales a través del objeto arguments , excepto las funciones de flecha.

• Puede pasar el objeto para que el orden de paso de los parámetros ya no sea importante y dejar que las propiedades del objeto se utilicen como parámetros reales.

• Valor predeterminado del parámetro de ES6: el valor predeterminado se obtendrá solo si el valor del parámetro falta o undefined cuando se llama a la función.

  ● Los parámetros que establecen valores predeterminados se pueden omitir sólo si se colocan en la última posición.

  ● El valor predeterminado de la configuración del parámetro formal no puede hacer referencia a las variables en el cuerpo de la función, pero puede hacer referencia a los parámetros formales anteriores y a las variables externas.

  ● La implementación de valores predeterminados a través de Object.assign() o la asignación desestructurada puede hacer que el método de pasar parámetros sea más flexible.

• La principal diferencia entre los parámetros y arguments restantes:

  ● Los parámetros restantes solo contienen aquellos parámetros reales que no tienen parámetros formales correspondientes, mientras que arguments contiene todos los parámetros reales pasados ​​a la función.

  ● Los parámetros restantes son instancias reales Array , mientras que arguments son simplemente objetos similares a matrices.

• Tanto los parámetros restantes como la sintaxis de expansión utilizan ... , en escenarios relacionados con funciones:

  ● Aparece al final de la lista de parámetros de función y es el parámetro restante.

  ● Ocurre en llamadas a funciones, es sintaxis de expansión.

Lo anterior es un artículo que explica los detalles de los parámetros en las funciones de JavaScript. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de php.