Compartir tecnología

Programación avanzada de JavaScript (cuarta edición): funciones de registro de aprendizaje (Parte 1)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

función

Cada función es una instancia del tipo Función, y la Función también tiene propiedades y métodos, al igual que otros tipos de referencia. Las funciones son objetos y el nombre de la función es un puntero al objeto de la función y no necesariamente está estrechamente vinculado a la función en sí.

Definición declarativa de función de definición de función

  1. function sum (n1,n2){
  2. return n1+n2;
  3. }

Expresión de función de definición de función.

  1. let sum = function(n1,n2){
  2. return n1+n2;
  3. };

función de definición de función función de flecha

  1. let sum = (n1,n2)=>{
  2. return n1+n2;
  3. };

constructor de definición de función

  1. let sum = new Function("n1","n2","return n1+n2");
  2. /*这个构造函数接收任意多个字符串参数,
  3. 最后一个参数始终会被当成函数体,
  4. 而之前的参数都是新函数的参数*/

función de flecha

Las funciones de flecha se pueden usar en cualquier lugar donde se pueda usar una expresión de función.

  1. let sum = (a,b)=>{
  2. return a+b;
  3. };
  4. let sum1 = function(a,b){
  5. return a+b;
  6. };
  7. //箭头函数适合嵌入函数的场景
  8. let arr = [1,2,3];
  9. console.log(arr.map(function(i) {return i+1;}));
  10. console.log(arr.map((i)=>{return i+1;}));
  11. //二者结果一样,但是箭头函数更为简洁
  12. //如果只有一个参数,括号可以不用。只有没有参数,或者多个参数的情况下,才使用括号
  13. let double = (x)=>{return 2*x;};
  14. let triple = x => {return 3*x};
  15. //箭头函数也可以不使用大括号,但这样会改变函数的行为。使用大括号就说明包含函数体,可以在一
  16. //个函数中包含多条语句,跟常规函数一样。如果不使用,后面只能有一行代码。
  17. let double = (x)=>{return 2*x;};
  18. let triple = x=>3*x;

Aunque las funciones de flecha tienen una sintaxis simple, hay muchas situaciones en las que no son adecuadas. Las funciones de flecha no pueden usar argumentos, super, new.target, ni pueden usarse como constructores. Además, las funciones de flecha no tienen un atributo de prototipo.

Parámetros en funciones de flecha.

La función se define mediante la sintaxis de flechas, por lo que no se puede acceder a los parámetros pasados ​​a la función mediante la palabra clave argumentos, sino que solo se puede acceder a través de los parámetros con nombre definidos.

  1. function foo() {
  2. console.log(arguments[0]);
  3. }
  4. foo(5); // 5
  5. let bar = () => {
  6. console.log(arguments[0]);
  7. };
  8. bar(5); // ReferenceError: arguments is not defined

Nombre de la función

Una función puede tener varios nombres.

  1. function sum(num1, num2) {
  2. return num1 + num2;
  3. }
  4. console.log(sum(10, 10)); // 20
  5. let anotherSum = sum;
  6. console.log(anotherSum(10, 10)); // 20
  7. sum = null;
  8. console.log(anotherSum(10, 10)); // 20

Valor de parámetro predeterminado

Puede asignar un valor predeterminado a un parámetro usando = después del parámetro en la definición de la función.

  1. function makeKing(name = 'Henry') {
  2. return `King ${name} VIII`;
  3. }
  4. console.log(makeKing('Louis')); // 'King Louis VIII'
  5. console.log(makeKing()); // 'King Henry VIII'

Los valores de parámetros predeterminados no se limitan a valores primitivos o tipos de objetos; también se pueden usar los valores devueltos por la función de llamada

  1. let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI'];
  2. let ordinality = 0;
  3. function getNumerals() {
  4. // 每次调用后递增
  5. return romanNumerals[ordinality++];
  6. }
  7. function makeKing(name = 'Henry', numerals = getNumerals()) {
  8. return `King ${name} ${numerals}`;
  9. }
  10. console.log(makeKing()); // 'King Henry I'
  11. console.log(makeKing('Louis', 'XVI')); // 'King Louis XVI'
  12. console.log(makeKing()); // 'King Henry II'
  13. console.log(makeKing()); // 'King Henry III'

Ampliación y recopilación de parámetros.

ES6 agrega un nuevo operador de extensión, que puede usarse para operar y combinar datos de recopilación de manera muy concisa. El escenario más útil para el operador de extensión es la lista de parámetros en una definición de función, donde puede aprovechar al máximo la tipificación débil y los parámetros de longitud variable del lenguaje. El operador de extensión se puede utilizar para pasar parámetros al llamar a una función o para definir parámetros de función.

Parámetros extendidos

  1. let values = [1, 2, 3, 4];
  2. function getSum() {
  3. let sum = 0;
  4. for (let i = 0; i < arguments.length; ++i) {
  5. sum += arguments[i];
  6. }
  7. return sum;
  8. }
  9. //不使用扩展操作符实现累加
  10. console.log(getSum.apply(null,values));
  11. //使用扩展操作符
  12. console.log(getSum(...values));

Recopilar parámetros

Si hay parámetros con nombre delante de los parámetros recopilados, solo se recopilarán los parámetros restantes; de lo contrario, se obtendrá una matriz vacía; Debido a que el resultado de la recopilación de parámetros es variable, solo se puede utilizar como último parámetro.

  1. function getProduct(...values,lastValue){}//不可以
  2. function ignoreFirst(firstValue,...values){console.log(values)}//可以
  3. ignoreFirst(); // []
  4. ignoreFirst(1); // []
  5. ignoreFirst(1,2); // [2]
  6. ignoreFirst(1,2,3); // [2, 3]

Declaración de función y expresión de función.

Antes de ejecutar cualquier código, el motor JavaScript lee la declaración de la función y genera la definición de la función en el contexto de ejecución. La expresión de la función debe esperar hasta que el código se ejecute en su línea antes de generar la definición de la función en el contexto de ejecución.
  1. // 没问题
  2. console.log(sum(10, 10));
  3. function sum(num1, num2) {
  4. return num1 + num2;
  5. }
  6. /*函数声明提升*/
  7. // 会出错
  8. console.log(sum(10, 10));
  9. let sum = function(num1, num2) {
  10. return num1 + num2;
  11. };