Follow The Map es-419 Explainer

Explicación de Sigue el mapa

Objetivo de este acertijo: Completar la función de flecha para que tome un item y devuelva su precio.

Tutorial de la solución: La variable groceries es un arreglo de objects. Cada object tiene una propiedad .name y .price. Para obtener un arreglo sólo con nombres, se usa .map() y una función de flecha. .map() es parecido a .forEach(), salvo que crea un nuevo arreglo en vez de cambiar el arreglo original.

Para obtener un arreglo sólo de valores de precios, queremos .map() cada elemento a su precio. Podemos hacer que una función de flecha lo haga. Usará item como un parámetro de entrada entre su paréntesis (). Luego, dentro de las llaves {}, debe return item.price.

Esa función de flecha completa es el argumento del método .map(). .map() ejecutará cada elemento del arreglo groceries a través de esa función y luego devolverá un nuevo arreglo de todos los resultados. El nuevo arreglo se almacena dentro de la variable prices, por lo que podemos registrarlo en la consola.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


import { groceries } from 'grasshopper.store';

let names = groceries.map((item) => {

return item.name;

});

let prices = groceries.map((item) => {

return item.price;

});

console.log('Names: ' + names);

console.log('Prices: ' + prices);

Conceptos de JavaScript: bloque de código (función de flecha), console.log(), .map()

Código adicional (código oculto que se ejecuta antes del código del acertijo):

[details]


let groceries = [

{name: 'Grasshopper Gumdrops', price: 4},