Массив: перебирающие методы 2020 (11 примеров)
В этом посте решил составить список из методов массивов, которые я чаще всего использую в работе. Получилось 11 методов и примеров.
Все эти методы можно выполнять последовательно по цепочке (method chaining), а не вызывать по отдельности. Это полезно, так как часто требуется производить несколько действий с нашими данными (отфильтровать, потом отсортировать и т.д.).
Второй большой плюс этих методов – иммутабельность (immutable). Это означает, что они не меняют исходные данные. Результатом их работы всегда является новый массив или объект.
1. filter
Метод .filter() создает новый массив, куда добавляются все элементы исходного массива, которые соответствуют нашим условиям. Длина нового массива всегда отличается от длины исходного массива.
Каждый элемент исходного массива проверяется на соответствие нашим условиям. В случае соответствия, возвращается true и элемент добавляется в новый массив. В противном случае возвращается false и .filter переходит к оценке следующего элемента.
Пример использования .filter
2. map
Метод .map() перебирает каждый элемент массива, производит с ним какие-либо действия и добавляет в новый массив, который мы получаем после окончания работы метода.
Новый массив, который создается в результате работы метода .map() всегда имеет такую же длину, что и исходный массив.
Пример использования .map()
3. reduce
Метод .reduce() – также использует исходный массив для последовательной обработки каждого элемента. С помощью данного метода можно сохранять промежуточный результат и возвращать новые объекты, массивы или, например, числа.
Пример .reduce #1
Чаще всего я использую .reduce() , чтобы подсчитать общее количество или сумму чего-либо.
Пример .reduce() #2
Еще один пример – учет количества экземпляров каждой единицы товара. Давайте определим общее количество бананов, яблок и т.д. в нашем массиве:
4. some
Метод .some() перебирает исходный массив и возвращает true , если хотя бы один из элементов массива удовлетворяет нашему условию.
Проверим, содержит ли данный массив, хотя бы одно число больше 20:
5. every
Метод .every() очень похож на .some() , но в отличие от первого возвращает true , только в том случае, если каждый элемент массива удовлетворяет нашему условию.
Проверим, все ли студенты в нашем массиве старше 18 лет:
6. includes
Метод .includes() можно использовать для проверки массива на наличие каких-либо элементов.
Как видите, метод очень похож на упрощенную версию метода .some() , так как нам не требуется прописывать какие-либо условия.
7. Array.from
Я использую метод Array.from() , когда мне нужно создать массив определенной длины и наполнить его какими-либо элементами.
Мы получили новый массив myArray , состоящий из 4-х элементов undefined .
В качестве 2-го параметра метод Array.from() принимает функцию map (mapFn) , с помощью которой мы можем наполнить наш новый массив любыми значениями.
8. Array.of
Еще один способ создать новый массив – использовать метод Array.of() . Данный метод создает массив из принимаемых аргументов.
9. Метод Object.keys()
Очень часто требуется произвести итерацию по свойствам объекта. Здесь нам приходит на помощь метод Object.keys() , который позволяет создать новый массив из ключей нашего объекта.
Если нам нужно создать массив не из ключей, а значений, то можно использовать метод Object.values() .
10. Метод Object.entries()
Object.entries() – позволяет получить новый массив из объекта, состоящий из мини массивов, включающих каждый ключ и значение.
11. forEach
Метод forEach() позволяет пробежаться по каждому элементу массива и произвести с ним какое-либо действие. Данный метод, в отличие от предыдущих, ничего не возвращает.
Я использую forEach() , когда, например, требуется выделить какие-либо элементы в DOM дереве страницы и повесить на них обработчик событий.
Другой пример – на основании исходного массива создать новый массив из уникальных элементов.
Проверить каждый элемент массива на удовлетворение условию
Реализовать функцию every(arr, func) , которая принимает аргументами массив arr и функцию func . Возвращает true , если функция func вернет для каждого элемента массива true . В функцию func нужно передавать аргументами элемет массива, индекс элемента массива и сам массив.
Пример, как должен работать код:
Вот я написал, но не пойму, как в этот фанк впихнуть массив из every.
Вы неправильно поняли условия, от вас требуется сделать функцию every, которая принимает массив и другую функцию. Если переданная функция для всех элементов массива вернет true, то значит и every вернет true, иначе false. В данном же случае ваша every возвращает:
А аргументы вообще не используются никак.
На переданную внутрь функцию налагаются условия, она принимает элемент, индекс и массив. Поэтому ваша функция every должна будет вызвать для каждого переданного элемента массива функцию func(element, index, array) с приведенными параметрами.
В итоге Вам надо только реализовать every, без всяких func:
Приведенный пример, как должна работать функция, идет в разрез с тем, что описано в условии. Так как по условию она принимает три аргумента, а по примеру только один. С точки зрения логики, скорее всего вместо func(element, index, array) правильнее реализовать func(element) . Но лучше уточнить у давшего задание.
Array.prototype.some()
Метод some() проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.
Примечание: метод возвращает false при любом условии для пустого массива.
Интерактивный пример
Синтаксис
Параметры
Функция проверки каждого элемента, принимает три аргумента:
Текущий обрабатываемый элемент массива.
Индекс текущего обрабатываемого элемента массива.
Массив, по которому осуществляется проход.
Значение, используемое в качестве this при выполнении функции callback .
Возвращаемое значение
true , если функция проверки возвращает truthy значение хотя бы для одного элемента массива. Иначе, false .
Описание
Метод some() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдёт такой, для которого callback вернёт истинное значение (значение, становящееся равным true при приведении его к типу Boolean ). Если такой элемент найден, метод some() немедленно вернёт true . В противном случае, если callback вернёт false для всех элементов массива, метод some() вернёт false . Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.
Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.
Если в метод some() был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this , видимого из функции.
Метод some() не изменяет массив, для которого он был вызван.
Диапазон элементов, обрабатываемых методом some() , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода some() , не будут посещены функцией callback . Если существующие элементы массива изменятся, значения, переданные в функцию callback , будут значениями на тот момент времени, когда метод some() посетит их; удалённые элементы посещены не будут.
Примеры
Проверка значений элементов массива
Следующий пример проверяет наличие в массиве элемента, который больше 10.
Проверка элементов массива с использованием стрелочных функций
Стрелочные функции предоставляют более краткий синтаксис для подобных проверок.
Проверка наличия элемента в массиве
Чтобы имитировать функцию метода includes() , эта пользовательская функция возвращает true, если элемент существует в массиве:
Полезные приёмы работы с массивами в JavaScript
В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях — это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for , который выглядит примерно так: for (var i=0; i < value.length; i++ )<> . Однако, лучше, всё-таки, смотреть на вещи шире.
Предположим, нам надо вывести список товаров, и, при необходимости, разбивать его на категории, фильтровать, выполнять по нему поиск, модифицировать этот список или его элементы. Возможно, требуется быстро выполнить некие вычисления, в которые будут вовлечены элементы списка. Скажем, надо что-то с чем-то сложить, что-то на что-то умножить. Можно ли найти в JavaScript такие средства, которые позволяют решать подобные задачи быстрее и удобнее, чем с использованием обычного цикла for ?
На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of , и о методах includes() , some() , every() , filter() , map() и reduce() . Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.
Надо отметить, что обзоры современных подходов к разработке на JS обычно включают в себя примеры, подготовленные с использованием стрелочных функций. Возможно, вы не особенно часто пользуетесь ими — может быть из-за того, что вам они не нравятся, может быть потому, что не хотите тратить слишком много времени на изучение чего-то нового, а, возможно, они просто вам не подходят. Поэтому здесь, в большинстве ситуаций, будут показаны два варианта выполнения одних и тех же действий: с использованием обычных функций (ES5) и с применением стрелочных функций (ES6). Для тех, у кого нет опыта работа со стрелочными функциями, отметим, что стрелочные функции не являются эквивалентами объявлений функций и функциональных выражений. Не стоит механически заменять одно на другое. В частности, это связано с тем, что в обычных и стрелочных функциях ключевое слово this ведёт себя по-разному.
1. Оператор расширения
Оператор расширения (spread operator) позволяет «раскрывать» массивы, подставляя в то место, где использован этот оператор, вместо массивов, их элементы. Похожий подход предложен и для литералов объектов.
▍Сильные стороны оператора расширения
- Это — простой и быстрый способ «вытащить» из массива его отдельные элементы.
- Этот оператор подходит для работы с литералами массивов и объектов.
- Это — быстрый и интуитивно понятный метод работы с аргументами функций.
- Оператор расширения не занимает много места в коде — он выглядит как три точки (…).
▍Пример
Предположим, перед вами стоит задача вывести список ваших любимых угощений, не используя при этом цикл. С помощью оператора расширения это делается так:
2. Цикл for…of
Оператор for…of предназначен для обхода итерируемых объектов. Он даёт доступ к отдельным элементам таких объектов (в частности — к элементам массивов), что, например, позволяет их модифицировать. Его можно считать заменой обычному циклу for .
▍Сильные стороны цикла for…of
- Это — простой способ для добавления или обновления элементов коллекций.
- Цикл for…of позволяет выполнять различные вычисления с использованием элементов (суммирование, умножение, и так далее).
- Им удобно пользоваться при необходимости выполнения проверки каких-либо условий.
- Его использование ведёт к написанию более чистого и читабельного кода.
▍Пример
Предположим, у вас имеется структура данных, описывающая содержимое ящика с инструментами и вам надо показать эти инструменты. Вот как это сделать с помощью цикла for. of :
3. Метод includes()
Метод includes() используется для проверки наличия в коллекции некоего элемента, в частности, например, определённой строки в массиве, содержащем строки. Этот метод возвращает true или false в зависимости от результатов проверки. Пользуясь им, стоит учитывать, что он чувствителен к регистру символов. Если, например, в коллекции есть строковой элемент SCHOOL , а проверка на его наличие с помощью includes() выполняется по строке school , метод вернёт false .
▍Сильные стороны метода includes()
- Метод includes() полезен в деле создания простых механизмов поиска данных.
- Он даёт разработчику интуитивно понятный способ определения наличия неких данных в массиве.
- Его удобно использовать в условных выражениях для модификации, фильтрации элементов, и для выполнения других операций.
- Его применение ведёт к улучшению читабельности кода.
▍Пример
Предположим, у вас имеется гараж, представленный массивом со списком автомобилей, и вы не знаете, есть в этом гараже некий автомобиль, или нет. Для того чтобы решить эту проблему, надо написать код, который позволяет проверять наличие автомобиля в гараже. Воспользуемся методом includes() :
4. Метод some()
Метод some() позволяет проверить, существуют ли некоторые из искомых элементов в массиве. Он, по результатам проверки, возвращает true или false . Он похож на вышерассмотренный метод includes() , за исключением того, что его аргументом является функция, а не, например, обычная строка.
▍Сильные стороны метода some()
- Метод some() позволяет проверить, имеется ли в массиве хотя бы один из интересующих нас элементов.
- Он выполняет проверку условия с использованием переданной ему функции.
- Он способствует применению декларативного подхода при программировании.
- Этим методом удобно пользоваться.
▍Пример
Предположим, вы — владелец клуба, и в общем-то, вас не интересует — кто именно в ваш клуб приходит. Однако, некоторым посетителям вход в клуб закрыт, так как они склонны к излишнему потреблению спиртных напитков, по крайней мере, в том случае, если они оказываются в вашем заведении сами, и с ними нет никого, кто может за ними присмотреть. В данном случае группе посетителей можно войти в клуб только при условии, что хотя бы одному из них не меньше 18-ти лет. Для того чтобы автоматизировать проверку подобного рода, воспользуемся методом some() . Ниже его применение продемонстрировано в двух вариантах.
5. Метод every()
Метод every() обходит массив и проверяет каждый его элемент на соответствие некоему условию, возвращая true в том случае, если все элементы массива соответствуют условию, и false в противном случае. Можно заметить, что он похож на метод some() .
▍Сильные стороны метода every()
- Метод every() позволяет проверить соответствие условию всех элементов массива.
- Условия можно задавать с использованием функций.
- Он способствует применению декларативного подхода при программировании.
▍Пример
Вернёмся к предыдущему примеру. Там вы пропускали в клуб посетителей, не достигших 18 лет, но кто-то написал заявление в полицию, после чего вы попали в неприятную ситуацию. После того, как всё удалось уладить, вы решили, что вам всё это ни к чему и ужесточили правила посещения клуба. Теперь группа посетителей может пройти в клуб только в том случае, если возраст каждого члена группы не меньше 18 лет. Как и в прошлый раз, рассмотрим решение задачи в двух вариантах, но на этот раз будем пользоваться методом every() .
6. Метод filter()
Метод filter() позволяет создать, на основе некоего массива, новый массив, содержащий только те элементы исходного массива, которые удовлетворяют заданному условию.
▍Сильные стороны метода filter()
- Метод filter() позволяет избежать модификации исходного массива.
- Он позволяет избавиться от ненужных элементов.
- Он улучшает читабельность кода.
▍Пример
Предположим, вам надо отобрать из списка цен только те, которые больше или равны 30. Воспользуемся для решения этой задачи методом filter() .
7. Метод map()
Метод map() похож на метод filter() тем, что он тоже возвращает новый массив. Однако он применяется для модификации элементов исходного массива.
▍Сильные стороны метода map()
- Метод map() позволяет избежать необходимости изменения элементов исходного массива.
- С его помощью удобно модифицировать элементы массивов.
- Он улучшает читаемость кода.
▍Пример
Предположим, у вас имеется список товаров с ценами. Вашему менеджеру нужен новый список товаров, цены которых снижены на 25%. Воспользуемся для решения этой задачи методом map() .
8. Метод reduce()
Метод reduce() , в его простейшем виде, позволяет суммировать элементы числовых массивов. Другими словами, он сводит массив к единственному значению. Это позволяет использовать его для выполнения различных вычислений.
▍Сильные стороны метода reduce()
- С помощью метода reduce() можно посчитать сумму или среднее значение элементов массива.
- Этот метод ускоряет и упрощает проведение вычислений.
▍Пример
Предположим, вам надо посчитать ваши расходы за неделю, которые хранятся в массиве. Решим эту задачу с помощью метода reduce() .
Итоги
В этом материале мы рассмотрели некоторые полезные приёмы, которые упрощают и ускоряют работу с массивами и улучшают читаемость кода. Если сегодня состоялось ваше первое знакомство с этими приёмами, рекомендуем, пользуясь полученной здесь базой, узнать о них побольше и поэкспериментировать с ними самостоятельно. Уверены, всё это вам пригодится.
Уважаемые читатели! Знаете ли вы какие-нибудь интересные, но не слишком широко известные методы работы с массивами в JavaScript?