Повышаем скилы с помощью методов JavaScript за пару минут
Большинство приложений, которые мы создаем сегодня, требуют преобразования колекций данных. Обработка элементов в коллекции - это частая операция, с которой вы, скорее всего, столкнетесь. Забудьте обычный способ реализации цикла for через (const i; i < value.length; i++ ).
Прим. Как верно подметили читатели, код с const вообще работать не будет. Вернее будет так - (let i=0; i < value.length; i++ )
Предположим, вы хотите показать список продуктов и классифицировать, отфильтровать, найти, изменяить или обновить этот список. Или, может быть, вы хотите выполнить быстрые вычисления, например такие как сложение, умножение и т. д. Каков оптимальный способ это реализовать?
Возможно, вам не нравятся стрелочные функции, вы не хотите тратить слишком много времени на изучение чего-то нового, или они просто не актуальны для вас. Не беспокойтесь, вы не одиноки. Я покажу вам, как это делается в ES5 (декларативные функции) и ES6 (стрелочные функции).
Имейте в виду: стрелочные функции и декларативные функции / выражения не являются эквивалентными и не могут быть заменены вслепую. Имейте в виду, что ключевое слово this работает по-разному.
Рассматриваемые методы:
- Оператор разворота
- for...of итератор
- includes()
- some()
- every()
- filter()
- map()
- reduce()
1. Оператор разворота
Оператор разворота расширяет массив своими элементами. Его также можно использовать для объектных литералов.
Почему стоит его использовать?
- Это простой и быстрый способ показать элементы массива
- Он работает для массивов и объектных литералов
- Это быстрый и интуитивно понятный способ передачи аргументов
- Требует только трех точек ...
Пример:
Предположим, вы хотите показать список любимых продуктов без создания цикла. Используйте оператор разворота:
2. for…of итератор
for...of итерирует по коллекции, а также предоставляет вам возможность изменять определенные элементы. Он заменяет обычный способ реализации for-loop.
Почему стоит его использовать?
- Это простой способ добавить или обновить элементы
- Выполнить вычисления (суммирование, умножение и т. д.)
- При использовании условных операторов (if, while, switch и т. Д.),
- Приводит к чистому и удобочитаемому коду
Пример:
Предположим, у вас есть панель инструментов, и вы хотите показать все инструменты внутри нее. for...of итератор делает это довольно просто.
3. Includes()
includes() метод используется чтобы проверить, существует ли конкретная строка в коллекции, и возвращает true или false. Имейте в виду, что он чувствителен к регистру: если элемент внутри коллекции - SCHOOL, а вы его ищете как school, метод вернет false.
Почему стоит его использовать?
- Чтобы реализовать простую функциональность поиска
- Это интуитивный подход, чтобы определить, находится ли строка в массиве
- Он использует условные операторы для изменения, фильтрации и прочего
- Приводит к удобочитаемому коду
Пример:
Предположим по какой-то причине, что вы не знаете, какие автомобили у вас в гараже, и вам нужна система, чтобы проверить, есть ли автомобиль, который вам нужен, или нет. includes() в помощь!
4. Some()
some() проверяет, находятся ли некоторые элементы в массиве и возвращает true или false. Это несколько похоже на концепцию метода includes(), за исключением того, что аргумент является функцией, а не строкой.
Почему стоит его использовать?
- Гарантирует, что некий элемент проходит тест
- Он выполняет условные выражения, используя функции
- Делает ваш код декларативным
- some достаточно хорош
Пример:
Предположим, что вы владелец клуба, и вам все равно, кто входит в клуб. Но некоторые люди не допускаются, потому что они пьют слишком много. Ознакомьтесь с различиями между ES5 и ES6 ниже:
ES5:
ES6:
5. Every()
every() перебирает массив, проверяя каждый элемент и возвращает true или false. Та же концепция, что и some(). За исключением того, что каждый элемент должен удовлетворять условному утверждению, в противном случае он вернет false.
Почему стоит его использовать?
- Он гарантирует, что каждый элемент проходит тест
- Вы можете выполнять условные выражения, используя функции
- Делает ваш код декларативным
Пример:
Последний раз, когда вы позволяли некоторым несовершеннолетним студентам входить в клуб, кто-то сообщил об этом, и полиция поймала вас. На этот раз вы этого не допустите, и вы хотите убедиться, что каждый человек передает возраст оператору every().
ES5
ES6
6. Filter()
filter() создает новый массив со всеми элементами, которые проходят тест.
Почему стоит его использовать?
- Таким образом вы можете избежать изменений основного массива
- Он позволяет отфильтровать элементы, которые вам не нужны
- Делает код более читаемым
Пример:
Предположим, вы хотите вернуть только цены, которые больше или равны 30. Отфильтруйте другие цены ...
ES5
ES6
7. Map()
map() аналогичен filter() с точки зрения возвращения нового массива. Однако единственная разница заключается в том, что он используется для изменения элементов.
Почему стоит его использовать?
- Позволяет избежать внесения изменений в основной массив
- Вы можете изменить нужные элементы
- Делает код более читаемым
Пример:
Предположим, у вас есть список продуктов с ценами. Вашему менеджеру нужен список, чтобы показывать новые цены после того, как они облагались налогом в 25%. map() может помочь вам.
ES5
ES6
8. Reduce() method
reduce() может быть использован для преобразования массива в нечто другое, например целое число, объект, цепочку Promise (последовательное выполнение Promise) и т.д. По практическим причинам, простым случаем использования будет суммирование списка целых чисел. Короче говоря, он «сводит» весь массив к одному значению.
Почему я должен использовать его?
- Выполнить вычисления
- Вычислить значение
- Подсчитать количество дубликатов
- Группировка объектов по параметрам
- Последовательное выполнение Promises
Пример:
Предположим, вы хотите узнать свои общие расходы в течение недели. Используйте, reduce() чтобы получить число.
ES5
ES6
Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное!
Оригинал статьи These JavaScript methods will boost your skills in just a few minutes