понимание нативных методов javascript массивов

1 день. Все содержание должно быть точным

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

Рассмотрите простое множество:

var main = [
    "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven"
]

Выведем каждый элементов массива в консоль, в этом нам поможет цикл for

for (var i=0; i < main.length; i++) {
    console.log(main[i]);
}

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

Но для работы с массивами лучше использовать специальные циклы.

forEach

Первым из таких циклов будет forEach.

main.forEach(function(item) {
   console.log(item); // logs each item
});

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

main.forEach(logger);
function logger(item) {
    console.log(item);
}

filter

Метод фильтра позволяет Вам создать новую, фильтрованную версию существующего множества. Давайте посмотрим на простой случай использования.

Предположим, что мы берем наше множество в качестве примера до:

var main = [
    "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven"
]

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

var firstPattern = [0,2,4,5,6];

Как и forEach, filter передает в функцию каждый элемент массива. Вот так можно получить новый массив состоящий из отфилитрованных элементов. 

var matchPattern = main.filter(itemMatchesPattern);

Для фильтрации используем вот такую функцию.

function itemMatchesPattern(item, count) {
    return firstPattern.includes(count);
}

Она проверяет наличие элемента из массива main в массиве firstPattern. В итоге мы получим вот такой результат: 

[ 'one', 'three', 'five', 'six', 'seven' ]

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

function itemMatchesPattern(arrayName) {
    return function (item, count) {
        return arrayName.includes(count);
    }
}

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

var matchPattern = main.filter(itemMatchesPattern(firstPattern));
//или же
var matchPattern = main.filter(itemMatchesPattern(secondPattern));

map

Метод map() возращает массив с результатом работы функции. Давайте взглянем на пример

var mapped = main.map(function(item) {
    return item.toUpperCase();
});

В результате испольнения данного кода мы получим вот такой массив mapped

[ 'ONE', 'TWO', 'THREE', 'FOUR', 'FIVE', 'SIX', 'SEVEN', 'EIGHT', 'NINE', 'TEN', 'ELEVEN' ]

Это удобно т.к. мы обрабатываем наш массив и при этом его никак не изменяем.

reduce

Последним методом, который мы рассмотрим будет reduce(). Данный метод используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата. Hассмотрим простой пример. создадим новый массив, который будет содержать эмелементы, в которых не содержится буква "е". 

var reduced = main.reduce(function(reducedArray, item) { // 1.
    if (item.toString().indexOf("e") === -1) {
        reducedArray.push(item); // 2.
    }
    return reducedArray; // 3.
}, []); // 4.

Разберем все поподбробнее
1) аргументы функции, которые принимает метод reduce()
2) добавляем в новый массив те элементы, что прошли проверку
3) возвращаем конечный результат
4) начальная точка

В итоге мы получим вот такой массив

[ 'two', 'four', 'six' ]

Это - краткий обзор некоторых методов Массива, популярных в функциональном программировании.

Поделиться:

Facebook Twitter Vkontakte