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

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

Продолжаем разбирать Underscore.js по косточкам и начнём с метода, который позволяет осуществить проход по массивам и объектам, а именно с алиасом JavaScript-ого forEach.

Синтаксис метода each:

_.each(list, iterator, [context])

Данный метод производит обход по заданному списку (list - массив или объёт), передавая значение в функцию (iterator). При работе с массивами, в функцию (iterator) передаётся три аргумента:

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

// итерация по массиву с помощью метода each
_.each(movies, function(element, index, movies){
    console.log(
        'Элемент: ' + element + ', ' +
        'Индекс: ' + index + ', ' +
        'Размер массива: ' + movies.length
    );
});

В третьем аргументе метода each можно указать контекстный объект (context), который будет передан в функцию обработчик и доступный от ключевого слова this.

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

    getTopMovies: function(title){
        return 'Фильм в топе лучших на сегодня: ' + title + '!';
    }
};

// прокрутка массива и вывод сообщения
// через метод (getTopMovies) контекстного объекта cinema
_.each(cinema.movies, function(element, index, movies){
    console.log( this.getTopMovies(element) );
}, cinema);

Если же в качестве первого аргумента (list) указать JavaScript объект, то в функцию обработчик (iterator) передаются следующие аргументы:

  • value - значение поля,
  • key - ключ поля,
  • list - весь объект
// объект фильм
var movie = {
    title: 'Ёлки 3',
    country: 'Россия',
    year: '2013',
    genre: 'Комедия'
};

// проходимся по объекту
_.each(movie, function(value, key){
    console.log(
        'Значение: ' + value + ', ' +
        'Ключ: ' + key
    );
});

При проходе по объекту, так же можем указать контекстный объект.

// объект фильма
var movie = {
    title: 'Ёлки 3',
    country: 'Россия',
    year: '2013',
    genre: 'Комедия'
},

// объект с методом getDescription для вывода ключа и значения каждого поля
messager = {
    getDescription: function(value, key){
        return key + ': ' + value;
    }
};

// прокрутка массива и вывод сообщения
_.each(movie, function(value, key){
    console.log( this.getDescription(value, key) );
}, messager);

Неплохо, неправда ли?) То ли ещё будет, встретимся в следующем уроке!

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


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Января 2014 20:56
    Денис Стоянов
    Уж лучше lodash. Тем не менее в спецификации есть нативный forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray%2FforEach Если уж надо для типа NodeList, то всегда можно реализовать через call. Для примера
    var list = document.getElementByTag('div');
    [].forEach.call(list, function(el) { console.log(el); });
    
    • 28 Января 2014 14:24
      marker09
      lo-dash +1 :)
^ Наверх ^