Estaba leyendo sobre las funciones de flecha aquí (https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Shorter_functions) ¿Pero no puede entender cómo funcionan estas dos partes?

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(({ length :lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

elements.map(({ length }) => length); // [8, 6, 7, 9]
0
user145959 9 may. 2019 a las 17:32

3 respuestas

La mejor respuesta

Al principio, creamos una matriz de elementos de cadena. Después de eso, llamamos a la función map(), pasándole la misma función que

function({ length }){
    return length // We get as length property length of the input object
}

Segundo fragmento de código:

function({ length: lengthFooBArX }){
    return lengthFooBArX // We get as lengthFooBArX property length of the input object
}

(params) => {code} es un análogo de function(params){code}. Algunos piensan que es mejor.

1
Javascript Dev 9 may. 2019 a las 14:46

Esta es una combinación de la función de flecha, desestructurando las cadenas y renombrando dentro de la desestructuración.

Es más o menos equivalente a lo siguiente:

elements.map( function( element ) {
  var lengthFooBArX = element.length;
  return lengthFooBArX;
});

Entonces, la parte ({ length }) extrae la longitud de la cadena. Entonces, en la primera iteración, la cadena es 'Hidrógeno', que tiene una longitud de 8 caracteres.

La parte :lengthFooBArX de elements.map(({ length :lengthFooBArX }) cambia el nombre de la variable que creamos de 'length', al nombre 'lengthFooBArX'.

Y finalmente, la flecha devuelve implícitamente lengthFooBArX, como resultado del mapeo 'Hidrógeno', por lo que el primer elemento en la matriz resultante es 8.

2
Shilly 9 may. 2019 a las 14:41

El código está desestructurando los parámetros de la función.

elements.map(({ length }) => length); 

Es igual que

elements.map(x => x.length); 

En el primer ejemplo, el código está creando una variable local para la devolución de llamada llamada lengthFooBArX y asigna esa variable a la propiedad length del elemento.

El primer código es equivalente a.

elements.map(x => {
    let lengthFooBArX = x.length;
    return lengthFoBArX;
}

La sintaxis para destucturing es

let {length} = x;
//is same as
let length = x.length;

Si el nombre de la variable y el nombre de una propiedad son diferentes, entonces

let {length:otherName} = x;
//is same as 
let otherName = x.length;
2
Maheer Ali 9 may. 2019 a las 14:46