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

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

Продолжаем знакомство с Underscore.js и в этом уроке рассмотрим метод, который позволит перебрать элементы коллекции, применив к ним нужную функцию и получить новый массив с уже изменённым содержимым.

Синтаксис: _.map(list, iterator, [context])

  • list - массив, javascript объект.
  • iterator - метод обработчик;
  • context - контекстный объект.

Метод Map возвращает нам новый массив, полученный преобразованием каждого элемента list в функции (iterator). Если в качестве аргумента мы передадим массив, то будет вызван нативный метод.

// работа map с массивом
var movies = [
    'Джек Райан: Теория хаоса',
    'Забойный реванш',
    '47 ронинов',
    'Любовь в большом городе 3',
    'Паранормальное явление: Метка Дьявола'
];

modified = _.map(movies, function(movie){
    return '' + movie + '';
});

console.log(modified);

// результат
// ["<strong>Джек Райан: Теория хаоса</strong>", "<strong>Забойный реванш</strong>", "<strong>47 ронинов</strong>", "<strong>Любовь в большом городе 3</strong>", "<strong>Паранормальное явление: Метка Дьявола</strong>"]

Так же функцию обработчик можем определить заранее, а затем в метод map передать только её название.

var movies = [
    'Джек Райан: Теория хаоса',
    'Забойный реванш',
    '47 ронинов',
    'Любовь в большом городе 3',
    'Паранормальное явление: Метка Дьявола'
];

var stronger = function(movie){
    return '' + movie + '';
}
modified = _.map(movies, stronger);

console.log(modified);

// ["<strong>Джек Райан: Теория хаоса</strong>", "<strong>Забойный реванш</strong>", "<strong>47 ронинов</strong>", "<strong>Любовь в большом городе 3</strong>", "<strong>Паранормальное явление: Метка Дьявола</strong>"]

В случае передачи JavaScript-объекта, функция iterator будет принимать следующие параметры (value, key, list).

  • value - начение поля;
  • key - ключ поля;
  • list - объект.

Давайте рассмотрим пример посложнее: обвернём каждый объект в объект класса Movie с методом getDescription, который возвращает краткое описание фильма.

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

// Определяем класс Movie
var Movie = function(movie) {
    getDescription = function() {
        return movie.title
            + '. Режиссёр: ' + movie.director
            + ', ' + movie.year + ' год.'
    }

    return {
        getDescription: getDescription
    }
}

// получаем новый массив из бъектов типа Movie
var modified = _.map(data.movies, function(value, key, list){
    return new Movie(value);
});

// выводим описание, вызвав метод getDescription от объекта класса Movie
_.each(modified, function(value){
    console.log(value.getDescription());
});

//Побег из Шоушенка. Режиссёр: Фрэнк Дарабонт, 1994 год.
//Крёстный отец. Режиссёр: Фрэнсис Форд Коппола, 1972 год.
//Крёстный отец 2. Режиссёр: Фрэнсис Форд Коппола, 1974 год.
//Тёмный рыцарь. Режиссёр: Кристофер Нолан, 2008 год.
//Криминальное чтиво. Режиссёр: Квентин Тарантино, 1994 год.

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


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

^ Наверх ^