Этот урок связан с проектом Разбираем Underscore.js по косточкам

Разбираем Underscore.js по косточкам. Метод reduce

Продолжаем изучение Underscrore.js и на этот раз разберём метод Reduce, который объединяет вместе значения из переданной коллекции.

Синтаксис:

_.reduce(list, iterator, memo, [context])

Для объединения данных list, reduce пропустит каждое значение через функцию iterator, которая в качестве аргументов получит (memo, value, key, list).

  • memo: начальное значение шага редукции, которое было возвращено предыдущим вызовом iterator;
  • value - значение поля;
  • key - ключ поля;
  • list - объект.

Простой пример использования Reduce на обычном массиве:

var costs = [10, 50, 100, 150, 200, 250, 300];

var sum = _.reduce(costs, function(memo, num){
    console.log('Вычисляем: ' + memo + " + " + num);

    return memo + num;
});

console.log('Всего: ' + sum);

Результат:

Вычисляем: 10 + 50
Вычисляем: 60 + 100
Вычисляем: 160 + 150
Вычисляем: 310 + 200
Вычисляем: 510 + 250
Вычисляем: 760 + 300
Всего: 1060

Теперь давайте посмотрим как использовать метод Reduce с ассоциативным массивом:

var data = {
    movies: [
        { title: 'Побег из Шоушенка', director: 'Фрэнк Дарабонт', year: '1994', budget: 25000000 },
        { title: 'Крёстный отец', director: 'Фрэнсис Форд Коппола', year: '1972', budget: 6000000 },
        { title: 'Крёстный отец 2', director: 'Фрэнсис Форд Коппола', year: '1974', budget: 13000000 },
        { title: 'Тёмный рыцарь', director: 'Кристофер Нолан', year: '2008', budget: 185000000 },
        { title: 'Криминальное чтиво', director: 'Квентин Тарантино', year: '1994', budget: 8000000 }
    ]
}

var sum = _.reduce(data.movies, function(memo, value){
    console.log('Вычисляем: ' + memo + " + " + value.budget);
    return memo + value.budget;
}, 0);

console.log('Всего: ' + sum);

Результат

Вычисляем: 0 + 25000000
Вычисляем: 25000000 + 6000000
Вычисляем: 31000000 + 13000000
Вычисляем: 44000000 + 185000000
Вычисляем: 229000000 + 8000000
Всего: 237000000

Обратите внимание, что в данном примере в качестве третьего аргумента мы передали “0”. Когда мы имеем дело с сложными объектами, лучше изначально задать значение для параметра memo. В этом случае вычисления пройдут корректно. Если в данном случае не поставить 0, то результат будет таким:

Вычисляем: [object Object] + 6000000
Вычисляем: [object Object]6000000 + 13000000
Вычисляем: [object Object]600000013000000 + 185000000
Вычисляем: [object Object]600000013000000185000000 + 8000000
Всего: [object Object]6000000130000001850000008000000

Если мы не хотим задавать третий параметр, но при этом хотим получить адекватное число в качестве суммы элементов, можем записывать общее число каждой итерации в отдельное поле объекта:

var data = {
    movies: [
        { title: 'Побег из Шоушенка', director: 'Фрэнк Дарабонт', year: '1994', budget: 25000000 },
        { title: 'Крёстный отец', director: 'Фрэнсис Форд Коппола', year: '1972', budget: 6000000 },
        { title: 'Крёстный отец 2', director: 'Фрэнсис Форд Коппола', year: '1974', budget: 13000000 },
        { title: 'Тёмный рыцарь', director: 'Кристофер Нолан', year: '2008', budget: 185000000 },
        { title: 'Криминальное чтиво', director: 'Квентин Тарантино', year: '1994', budget: 8000000 }
    ]
}

var result = _.reduce(data.movies, function(memo, value){
    return { budget: (memo.budget + value.budget) };
});

console.log('Всего: $' + result.budget);

В результате получим правильно вычисленное значение:

Всего: 237000000

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Станислав Протасевич
Урок создан: 5 Февраля 2014
Просмотров: 6446
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 8 Февраля 2014 12:56
    wot wot
    ох, граматеи... у вас на баннере жуткие ошибки, таджики что ли писали... цитирую: "Как на счет создания ИНТЕНРЕТ-МАГАЗИНА с полного нуля?". Понимаю что баннер не ваш, а ваших рекламодателей, но они ж ваш ресурс позорят. Я в такую веб-студию уж точно никогда не обращусь, сразу видно, какие у них работнички... UPD: ух ёлки, а баннер все таки ваш оказался! Не ожидал...
    • 9 Февраля 2014 17:45
      business
      Правильно же написано
^ Наверх ^