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.