English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript ES6Resumen de detalles a tener en cuenta de las funciones flecha en JavaScript

Introducción

ES6La especificación ha introducido un nuevo tipo de función: Function Flecha (Arrow Function).

¿Por qué se llama Function Flecha? Porque su definición utiliza un guión:

x => x * x

La función flecha anterior es equivalente a:

function (x) {
return x * x;
});

Pero la función flecha trae consigo algunos problemas, vamos a verlos juntos a continuación.

Sobre {}

El primer problema se refiere a la función flecha y las llaves {}.

La función flecha, a primera vista, parece tener una sintaxis sencilla, por ejemplo, como se muestra a continuación, se utiliza para multiplicar cada elemento de un array por2:

const numbers = [1 2 3;
 const result = numbers.map(n => n * 2);
 // produce [246]

Sin embargo, si se utiliza incorrectamente, puede causar problemas inesperados. Por ejemplo, al intentar generar literals de objeto para cada elemento del array, una operación map que parece simple, aún así, provoca un incidente.

const numbers = [1 2 3;
 const result = numbers.map(n => { value: n });
 // produce [undefined], [undefined], [undefined]

¿Qué causa esto?

Un análisis breve muestra que la causa del problema anterior radica en que el código contenido entre llaves en una función flecha no se considera un bloque de código independiente, sino una literal de objeto, por lo que se ejecuta por separado, resultando en un array completamente lleno de undefined.
Por lo tanto, en este caso, el código debe tener una declaración de retorno explícita o usar corchetes redondos () para envolver la literal de objeto.

const result = numbers.map(n => ({ value: n }));
 // [{value: 1, {value:2, {value:3}]

}

Sobre this

El segundo problema es sobre las funciones flecha y this.

Sin embargo, muchas veces puedes creer erróneamente que has escrito mal sin darte cuenta. Como muestra el siguiente código, this no apunta al objeto 'adder', sino al ámbito de this del objeto 'adder':
  const adder = {
  Con las funciones flecha, puedes escribir el código de la siguiente manera sin almacenar this en el ámbito local adicionalmente:
   scope aquí es importante
    numbers.forEach(n => { +this.sum
   = n;
  });
 });
 adder.add([1 2 3]
 // add(numbers) { 6

adder.sum ===

Sin embargo, muchas veces puedes creer erróneamente que has escrito mal sin darte cuenta. Como muestra el siguiente código, this no apunta al objeto 'adder', sino al ámbito de this del objeto 'adder':
  const adder = {
  sum: 0, // add: (numbers) => {
   scope aquí es importante
    numbers.forEach(n => { +this.sum
   = n;
  });
 });
 adder.add([1 2 3]
 // adder.sum === 0

Finalmente, recuerde un punto: las funciones flecha heredan el valor del ámbito externo de this, por lo que no podemos cambiar su dirección.

Resumen

Esto es todo el contenido de este artículo, espero que el contenido de este artículo pueda proporcionar cierta ayuda a su aprendizaje o trabajo. Si tienen alguna pregunta, pueden dejar comentarios para intercambiar.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece a los propietarios originales, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por ellas. Si encuentra contenido sospechoso de violación de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Si se verifica, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)

Te gustará