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

В наши дни большинство приложений, которые мы делаем, нуждаются в возможности оперирования данными, которые они получают. Обработка элементов в любом объеме данных это обычное дело, с которым вы столкнетесь с высокой долей вероятности. Пора уже забыть устаревшие способы работы с for-loop, такие как (let i=0; i < value.length; i++ ).

Перевод статьи These JavaScript methods will boost your skills in just a few minutes

Обратите внимание, что использование const в for-loop выдаст вам ошибку. Причиной тому будет то, что при переназначении значения, каждое следующее i, модифицируется i++. Так что перед тем, как использовать const или let, спросите себя — Будет ли это значение изменено? Если ответ да, то используйте let, если нет, то тогда вам нужна const.

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

Может быть вам не нравятся стрелочные функции, вы не хотите тратить слишком много времени на изучение чего-либо нового или они просто вам не по душе. Не переживайте, вы не один такой. Сейчас я покажу вам, как это сделать в ES5 (объявление функции) и в ES6 (стрелочные функции).

Будьте осторожны: стрелочные функции и выражение/объявление функции это не одно и тоже и их нельзя просто так брать и заменять друг другом. Помните, что между ними this работает у каждого по разному.

Методы, которые мы рассмотрим:

Spread operator
for…of iterator
includes()
some()
every()
filter()
map()
reduce()

1. Оператор расширения

Этот оператор расширяет массив по его элементам. Он также может использоваться для объект литералов.

Зачем его использовать?

Это простой и быстрый способ показать элементы массива.

Он работает с массивами и объект литералами.

Это быстрый и удобный способ передать аргументы.

Для него нужно всего-то три точки.

Пример:

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

2. Итератор for…of

Оператор for…of итерирует/проходится циклом по коллекции данных и дает вам возможность изменять конкретные элементы. Он заменяет традиционный способ проведения цикла for.

Зачем его использовать?

Это простой способ добавления и обновления элементов.

Отличный способ проводить вычисления. (Сложение, умножение и т.п.)

Подходит для работы с условными операторами (if, while, switch и т.д.).

Ведёт к чистому и читаемому коду.

Пример:

Итак, предположим, что у нас есть коробка инструментов и вам надо показать все инструменты внутри неё. С помощью итератора for…of вы это сделаете очень легко:

3. Метод Includes()

Этот метод используется для того, чтобы проверить есть ли конкретная строка в коллекции данных и в соответствии с ответом он возвращает true или false. Помните, что он чувствителен к регистру и если элемент внутри коллекции данных есть SCHOOL, а вы ищете school, то он вернет false.

Зачем его использовать?

Чтобы сделать простой поисковый функционал.

Это удобный подход для поиска нужной строки

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

Делает код читабельным.

Пример:

Давайте представим, что у вас в гараже есть много машин и по каким-то причинам вы не знаете, какие именно. Вам нужна система, чтобы проверить есть ли определенная машина или нет. И тут вам поможет includes()!

4. some() метод

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

Зачем это использовать?

Для уверенности, что некоторые элементы подходят заданным критериям.

Он выполняет условные операторы, используя функции.

Делает ваш код описательным.

Some достаточно хорош.

Пример:

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

ES5:

ES6:

5. every() метод

Этот метод проходится по массиву, проверяет элемент и возвращает true или false. Та же концепция, что и с some(). Кроме того, что каждый элемент должен удовлетворять параметрам условия, иначе метод возвратит false.

Зачем это использовать?

Для уверенности, что все элементы проходят тест.

Вы можете выполнять условные операторы, используя функции.

Делает ваш код описательным.

Пример:

В последний раз с помощью some(), вы позволяли некоторым недорослям проходить в клуб и кто-то уже рассказал об этом и вы попали в полицию. В следующий раз вы не хотите, чтобы это повторилось и вы точно убедитесь, что каждый проходит по лимиту возраста с помощью оператора every().

ES5:

ES6:

6. Метод filter()

Этот метод создаёт новый массив из элементов, которые соответствуют условиям.

Зачем это использовать?

Так вы можете избежать изменений в основном массиве.

Вы сможете отфильтровать элементы, которые вам не нужны.

Даёт вам более читабельный код.

Пример:

Давайте скажем, к примеру, что вам нужно вернуть цены, которые выше или равны 30. Отфильтруйте все другие цены:

ES5:

ES6:

7. Метод map()

Этот метод схож с filter() в плане выдачи нового массива. Однако, разница тут в том, что он используется только для изменения элементов.

Зачем это использовать?

Вы можете избежать изменений в основном массиве

Вы можете модифицировать элементы, которые захотите

Даёт вам читабельный код

Пример:

Давайте скажем, что у вас есть список продуктов с ценами. Вашему менеджеру нужен список, чтобы показать новые цены после налога в 25%. И вам тут поможет этот метод, метод map().

ES5:

ES6:

8. Метод reduce()

Этот метод может использоваться для трансформации массива в целое число, объект, цепочку промисов (последовательное выполнение промисов) и т.п. По практическим причинам, будет простой пример использования — сложение списка целых чисел. Вообще кратко, этот метод сокращает(от reduce — сокращать, но на самом деле складывает) весь массив в одно целое значение.

Зачем мне это использовать?

Для выполнения вычислений

Вычисления значений

Учета дубликатов

Группировки объектов по свойствам

Выполнения цепочки промисов

Это быстрый способ выполнения вычислений

Пример:

Допустим вам надо найти общее число трат за неделю. Используйте reduce(), чтобы получить это значение:

ES5:

ES6: