Underscore.js-命令和功能练习

Question

I'm learning about Underscore.js and the higher order functions. I came across the following problem, and I'm just simply stuck.

I'm not looking for a handout but at the same time, I don't have anywhere to turn for guidance in this. I would love someone to at least point me in the right direction.

What exactly does it mean by imperative vs functional?

I don't even know where to start when it comes to completing the 'functional' solution.

Any helpful info on this subject would be so much appreciated.

Please note: I do understand what map(), flatten(), and reduce() do. I just don't know how to apply it to this situation.

I do NOT understand what 'functional' really means. I would love any insight.

var products = [
    {
        name: 'Sonoma',
        ingredients: ['artichoke', 'sundried tomatoes', 'mushrooms'],
        containsNuts: false,
    },
    {
        name: 'Pizza Primavera',
        ingredients: ['roma', 'sundried tomatoes', 'goats cheese', 'rosemary'],
        containsNuts: false,
    },
    {
        name: 'South Of The Border',
        ingredients: ['black beans', 'jalapenos', 'mushrooms'],
        containsNuts: false,
    },
    {
        name: 'Blue Moon',
        ingredients: ['blue cheese', 'garlic', 'walnuts'],
        containsNuts: true,
    },
    {
        name: 'Taste Of Athens',
        ingredients: ['spinach', 'kalamata olives', 'sesame seeds'],
        containsNuts: true,
    },
];

// Underscore.js

// Count the ingredient occurence

// IMPERATIVE example:
var ingredientCount = { "{ingredient name}": 0 };

for (i = 0; i < products.length; i += 1) {
    for (j = 0; j < products[i].ingredients.length; j += 1) {
        ingredientCount[products[i].ingredients[j]] =
            (ingredientCount[products[i].ingredients[j]] || 0) + 1;
    }
}

expect(ingredientCount['mushrooms')]).toBe(2);


// FUNCTIONAL: 
/* chain() together map(), flatten() and reduce() */

var ingredientCount = { "{ingredient name}": 0 };

// ? ? ?

expect(ingredientCount['mushrooms']).toBe(2);

Answer 1

You need to break it down into parts. First of all, you only care about the ingredients, but products contains a lot of extra information, so use map to just extract the ingredients.

Now you have ingredients in an array of arrays, but you just want one big array with all the ingredients, so use flatten to give you that.

Now you want to count the ingredients. You can think of this as a series of reductions, where you have an object with the previous counts, and for this current item, you want to increment the count. This can be done with a reduce that starts with an empty object. I'll leave the implementation of the incrementCount function as an exercise for the reader.

const ingredients = _.map(products, p => p.ingredients);
const flatIngredients = _.flatten(ingredients);
const counts = _.reduce(flatIngredients, incrementCount, {});

With functional code, think of your data as passing through a series of transformations, each one bringing you closer to your goal, rather than one big loop you try to cram all your mutations into.

Answer 2

Functional means that every function that is called has a return value and usually no side effects ("pure"). It is a programming style that is very suitable for data transformations.

• map takes an array and returns an array with each item transformed.
• reduce goes through the array, always providing the previously returned value and the next item in the array, calculating a new value. Can be used to calculate sums and such.
• flatten makes a list of lists into just a list.

 var products = [ { name: 'Sonoma', ingredients: ['artichoke', 'sundried tomatoes', 'mushrooms'], containsNuts: false, }, { name: 'Pizza Primavera', ingredients: ['roma', 'sundried tomatoes', 'goats cheese', 'rosemary'], containsNuts: false, }, { name: 'South Of The Border', ingredients: ['black beans', 'jalapenos', 'mushrooms'], containsNuts: false, }, { name: 'Blue Moon', ingredients: ['blue cheese', 'garlic', 'walnuts'], containsNuts: true, }, { name: 'Taste Of Athens', ingredients: ['spinach', 'kalamata olives', 'sesame seeds'], containsNuts: true, }, ]; const result = products.reduce((allIngredients, item) => allIngredients.concat(item.ingredients), []) .reduce((counts, ingredient) => { counts[ingredient] ? counts[ingredient]++ : (counts[ingredient] = 1); return counts }, {}) console.log(result);