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]
3 respuestas
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.
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.
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;
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.