Методы для работы с массивами, которые нужно знать

В этой статье рассказывается о нескольких полезных методах для перебора массива в языке программирования Javascript.

Метод "forEach" для перебора массива

Метод используется для перебора элементов массива. Для каждого элемента массива вызывается callback функция с тремя параметрами.

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

У функции есть ещё и 2-ой необязательный параметр для указания контекста выполнения, но в этой статье о нём рассказано не будет.

Пример вывода элементов массива

var arr = ['Google', 'Yandex', 'Rambler', 'MAIL'];
arr.forEach(function(item, i, arr) {
    console.log(i + ': ' + item + ' [' + arr + ']');
});

// выведет сообщения:
// 0: Google [Google,Yandex,Rambler,MAIL]
// 1: Yandex [Google,Yandex,Rambler,MAIL]
// 2: Rambler [Google,Yandex,Rambler,MAIL]
// 3: MAIL [Google,Yandex,Rambler,MAIL]

Метод "filter" для фильтрации массива

Метод нужен для фильтрации массива с помощью функции обратного вызова (callback). Если требуется отфильтровать массив по условию, то этот метод идеально подойдёт для этой цели. Метод создаёт новый массив состоящий из элементов, для которых функция обратного вызова вернёт true.

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

Пример фильтрации массива по свойству и порядковому номеру элемента

var arr = [
    {name: 'Javascript', value: 3},
    {name: 'PHP', value: 4},
    {name: 'JAVA', value: 1}
];

// формирует новый массив из элементов со свойством "value" > 1 начиная со 2-ого
var newArr = arr.filter(function(item, i, arr) {
    if (i != 0 && item.value > 1) {
        return true;
    }
});

console.log(newArr); // выведет массив с единственным элементом [{name: 'PHP', value: 4}]

Метод "map" для трансформации массива

Применение этого метода требуется при необходимости трансформации исходного массива. Создаётся новый массив, состоящий из результатов вызова callback функции.

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

Пример получения массива состоящего из длины строк исходного массива

var arr = ['Javascript', 'PHP', 'JAVA'];
var newArr = arr.map(function(name) {
    return name.length;
});

console.log(newArr); // выведет массив состоящий из длин строк исходного массива [10, 3, 4]

Метод "every" для проверки всех элементов массива на соответствие условию

Если необходимо проверить все элементы массива на заданное условие, то используйте этот метод. Возвращает true, если функция обратного вызова вернёт true для каждого элемента.

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

Пример проверки элементов массива на чётные числа

var condition1 = [8, 2, 4, 6].every(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition1); // выведет true, т.к. все элементы массива являются чётными числами.

var condition2 = [1, 2, 4, 6].every(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition2); // выведет false, т.к. первый элемент массива является нечётным числом.

Метод "some" для проверки хотя бы одного элемента массива на соответствие условию

Если нужно проверить соответствие заданному условию хотя бы одного элемента из массива, то этот метод будет полезен.

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

Пример проверки массива на нахождение хотя бы одного чётного числа

var condition1 = [2, 1, 3, 5].some(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition1); // выведет true, т.к. первый элемент массива является чётным числом.

var condition2 = [1, 3, 5, 7].some(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition2); // выведет false, т.к. все элементы массива являются нечётными числами.

Методы "reduce" и "reduceRight" для для последовательной обработки каждого элемента массива с сохранением промежуточного результата

Если возникла необходимость обработать каждый элемент массива с сохранением промежуточного результата и вернуть его по выполнению последней итерации, то эти методы для вас. На вход эти методы принимают функции обратного вызова с несколькими параметрами.

Методы отличаются тем, что "reduce" осуществляет перебор слева направо, а "reduceRight" справа налево.

/**
 * Функция обратного вызова (callback).
 *
 * @param previousValue последний результат вызова функции (промежуточный результат)
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(previousValue, item, i, arr);

У метода есть второй параметр, который является начальным значением промежуточного результата. Если он не задан, то перебор массива начинается со 2-ого элемента, а промежуточному результату присваивается значение первого элемента.

Пример вычисления суммы элементов массива состоящего из чисел.

var arr = [1, 2, 3];
var sum = arr.reduce(function(previousValue, item) {
  return previousValue + item;
}, 0);

console.log('Сумма элементов массива =  ' + sum); // выведет "Сумма элементов массива = 6"