что быстрее for или filter js

Действительно ли reduce, filter, map и прочие работают медленнее обычного for?

Простой 2 комментария

Будь методы перебора массивов не нужны, их не сделали бы, правда ведь?

Без веских причин не стоит экономить на спичках жертвуя читабельностью.

dom1n1k,
там, где то же самое можно было сделать одним редьюсом
fixed

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

Источник

Нативный — не значит быстрый. Обгоняем map, filter и reduce на больших массивах

Несколько дней назад я выкладывал пост LINQ на JavaScript для самых маленьких. Но моя библиотека сильно уступала по производительности нативным методам и Lodash. В общем-то, сейчас мы будем менять ситуацию.

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

Когда я впервые выложил свою библиотеку в публичный доступ, у меня стоял вопрос лишь о том, чтобы удешевить итерацию нативного метода. Я старался облегчить callback, потому что у меня даже не возникало мысли, что map, filter или reduce могут быть даже чуточку медленнее, чем скорость света.

Прежде чем мы приступим

Поговорим о статистике

Мы будем проводить замеры следующих методов:

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

За замер производительности у нас будет отвечать Benchmark.js. Каждый пример проходил замеры 10 раз на массиве размером в 10,000,000 элементов.
Среда выполнения: Node.js.

Так с входными данными разобрались, теперь давайте обсудим то, что будет на выходе.

Я буду приводить пример кода и его наиболее средний бенчмарк.

В конце раздела я приведу таблицу с наиболее полной статистикой: с межквартильным средним и с медианным бенчмарками. И приведу весь бенчмарк-лог.

Приступим

Filter

Для замера производительности мы будем отфильтровывать все нечетные числа:

Нативная фильтрация

Benchmark
native filter x 3.58 ops/sec ±5.48% (13 runs sampled)

For of

Benchmark
for… of x 3.48 ops/sec ±3.46% (14 runs sampled)

Внимание, for of почти не уступает про производительности нативной фильтрации, но дальше — больше.

Benchmark
for x 6.92 ops/sec ±5.47% (20 runs sampled)

Обычный for обгоняет filter в 2 раза.

Lodash

Перейдем к игрокам на поле абстракций:

Benchmark
lodash filter x 3.60 ops/sec ±4.13% (13 runs sampled)

Lodash по производительности не уступает filter.

Моя библиотека

Benchmark
ursus where x 6.87 ops/sec ±4.86% (20 runs sampled)

Моя реализация фильтра ± равна for, но незначительно медленнее.

Итоги

Результаты гонки:

1) For
2) Ursus
3) Lodash
4) Filter
5) For of

Для тестирования мы будем прибавлять ко всем числам +1

Нативное отображение

Benchmark
native map x 0.68 ops/sec ±3.60% (6 runs sampled)

For of

Benchmark
for… of x 2.19 ops/sec ±3.47% (10 runs sampled)

В случае отображения for of обгоняет нативный метод в 3 раза.

Benchmark
for x 3.49 ops/sec ±6.82% (12 runs sampled)

Классический for обгоняет нативный метод в 5 раз.

Lodash

Benchmark
lodash map x 5.78 ops/sec ±9.03% (18 runs sampled)

Lodash обходит всех в 9 раз!

Честно, разработчики какие-то волшебники, я не представляю как они такого добились.

Моя библиотека

Benchmark
ursus select x 3.54 ops/sec ±5.71% (13 runs sampled)

Каким-то образом моя реализация чуточку быстрее чем просто for, на котором она основана. ¯_(ツ)_/¯

Итоги

Результаты гонки:

1) Lodash
2) Ursus
3) For
4) For of
5) Map

Reduce

Свертку мы будем тестировать на суммировании элементов

Нативная свертка

Benchmark
native reduce x 6.09 ops/sec ±9.13% (20 runs sampled)

For of

Пропускает гонку, так как я не придумал как его можно приладить без операций с массивом. А с ними замеры уже будут не такие объективные.

Benchmark
for x 57.01 ops/sec ±2.53% (59 runs sampled)

For обходит нативный метод почти в 10 раз!

Lodash

Benchmark
lodash sum x 8.30 ops/sec ±7.79% (25 runs sampled)

А вот lodash подкачал, он почти такой же, как и reduce.

Моя библиотека

Benchmark
ursus sum x 56.12 ops/sec ±2.38% (58 runs sampled)

Итоги

Результаты гонки:

1) For
2) Ursus
3) Lodash
4) Reduce

Заключение

Как вы могли увидеть, на 10 миллионном массиве нативные реализации работают в разы медленнее, чем for и библиотечные реализации.

В общем-то, нативная реализация начинает обгонять lodash на 50k элементов в массиве и меньше.

А на 25k начинает обгонять даже for.

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

Источник

Фильтрация и создание цепочек в функциональном JavaScript

Предлагаем перевод статьи, которая позволит освежить свои знания по теме, а также будет полезна новичкам в JavaScript, пока ещё осваивающим этот язык.

Одна из вещей, которая многим нравится в JavaScript, это его универсальность. Этот язык позволяет использовать объектно-ориентированное программирование, императивное, и даже функциональное. И можно переключаться с одной парадигмы на другую в зависимости от конкретных нужд и предпочтений.

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

Фильтрация для ограничения датасетов

С появлением ES5 массивы в JS унаследовали несколько методов, делающих функциональное программирование ещё удобнее. Теперь массивы нативно поддерживают map, reduce и filter. Каждый метод проходит по всем элементам массива, и выполняет анализ без использования циклов и изменения локальных состояний. Результат может быть возвращён для немедленного использования, или оставлен для последующей обработки.

В этой статье мы рассмотрим процедуру фильтрации. Она позволяет вычислять каждый элемент массива. На основе передаваемого тестового условия (test condition) определяется, нужно ли возвращать новый массив, содержащий результаты вычисления. При использовании метода filter вы получаете в ответ ещё один массив, той же длины или меньше исходного. Он содержит подмножество элементов из исходного массива, удовлетворяющие заданным условиям.

Использование цикла для демонстрации фильтрации

Пример проблемы, решить которую поможет фильтрация — ограничение массива, содержащего строковые значения, только теми, что состоят из трёх символов. Задача не сложная, и решить её можно довольно искусно с помощью ванильных JS-циклов for, без использования filter. Например:

Определили массив, содержащий три строковых значения. Создали пустой массив для хранения только строковых из трёх символов. Определили переменную-счётчик для цикла for, используемую по мере итерирования массива. Каждый раз, когда цикл находит строковое значение из трёх символов, он помещает его во второй массив. По завершении работы результат журналируется.

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

Использование метода Filter

Предыдущее решение технически корректно. Но использование метода filter позволяет сделать код гораздо чище и проще. Например:

Чистота кода — один из приятных побочных продуктов функционального программирования. Это следствие ограничения преобразования внешних переменных из функций и необходимости хранить меньше локальных состояний. Переменная count и разные состояния, принимаемые массивом threeLetterAnimals при прохождении циклов по исходному массиву, это дополнительные состояния, которые надо отслеживать. Метод filter избавил нас от цикла и переменной count. И мы не меняем многократно значение для нового массива, как в первом случае. Мы определили его один раз и связали со значением, получаемым в результате применения условия filter к исходному массиву.

Другие способы форматирования Filter

Можно написать ещё короче. Воспользуемся объявлениями const и анонимными встроенными стрелочными функциями (inline arrow functions). Это благодаря EcmaScript 6 (ES6), который нативно поддерживается большинством браузеров и JavaScript-движков.

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

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

Здесь мы просто извлекли анонимную встроенную стрелочную функцию, определённую до этого, и превратили в отдельную именованную. Мы определили чистую функцию (pure function). Она получает соответствующий тип-значение для элементов массива, и возвращает такой же тип. Можем в качестве условия просто передать в filter имя этой функции.

Быстрый обзор Map и Reduce

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

Метод reduce проходит по массиву и выполняет ряд операций. Промежуточный результат каждой из них передаёт в сумматор. По завершении обработки массива метод выдаёт финальный результат. В нашем случае можно использовать второй аргумент для начальной установки сумматора в 0.

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

Создание цепочек из Map, Reduce и Filter

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

Получили очень понятный и легко тестируемый код. Чистые функции могут быть использованы в других контекстах или преобразованы.

Фильтрация и производительность

Можно в любом случае порекомендовать использовать эти методы вместо циклов. Очень незначительное падение производительности окупается более чистым кодом, удобным в сопровождении. А оптимизировать лучше под реальные ситуации, когда действительно необходимо повысить скорость работы. В большинстве веб-приложений метод filter вряд ли будет узким местом. Но единственный способ убедиться в этом — попробовать самим.

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

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

Источник

Все способы перебора массива в JavaScript

Содержание:

I. Перебор настоящих массивов

1. Метод forEach и родственные методы

Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений — метод forEach.

В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.

К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов.

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

2. Цикл for

Старый добрый for рулит:

Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:

Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.

Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:

Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.

3. Правильное использование цикла for. in

Тем не менее, в некоторых случаях, таких как перебор разреженных массивов, for. in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:

Чтобы не писать такой громоздкий код проверок каждый раз, когда требуется перебор массива, можно оформить его в виде отдельной функции:

Тогда тело цикла из примера значительно сократится:

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

4. Цикл for. of (неявное использование итератора)

ES6, пока все еще пребывающий в статусе черновика, должен ввести в JavaScript итераторы.

Пример использования for. of :

В приведенном примере цикл for. of неявно вызывает итератор объекта Array для получения каждого значения массива.

5. Явное использование итератора

II. Перебор массивоподобных объектов

1. Использование способов перебора настоящих массивов

Как минимум большинство, если не все, способы перебора настоящих массивов могут быть применены для перебора массивоподобных объектов.

Конструкции for и for. in могут быть применены к массивоподобным объектам точно тем же путем, что и к настоящим массивам.

forEach и другие методы Array.prototype также применимы к массивоподобным объектам. Для этого нужно использовать вызов Function.call или Function.apply.

Для удобства повторного использования этого приема, можно объявить ссылку на метод Array.prototype.forEach в отдельной переменной и использовать ее как сокращение:

Если в массивоподобном объекте имеется итератор, то его можно использовать явно или неявно для перебора объекта таким же способом, как и для настоящих массивов.

2. Преобразование в настоящий массив

Например, если вы хотите преобразовать коллекцию NodeList в настоящий массив, вам нужен примерно такой код:

Источник

Вам не нужны циклы в JavaScript

Дата публикации: 2020-01-20

От автора: узнайте, как заменить циклы и использовать функции высшего порядка, такие как map, Reduce и Filter.

Почему мы заменяем циклы?

Использование функций высшего порядка сделает ваш код:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

1. Перебрать все элементы и получить новый модифицированный массив

Примечание: если вы используете map, вы не можете ввести break или continue или return во время цикла. Для этого случая вы должны использовать every или some.

2. Перебрать все элементы и выполнить действие

3. Фильтрация массива

Используя стандартный цикл for:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

4. Создание вывода с элементами массива

Приведенный выше код может быть еще более упрощенным:

5. Проверка, содержит ли массив значение

%c в операторе console применяет стиль к тексту консоли.

6. Проверить, соответствует ли каждый элемент в массиве условию

Используя цикл for:

Спасибо за прочтение. Надеюсь, вам это нравится.

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Источник