
Содержание статьи
Большинство программ, которые мы создаем сегодня, требуют определенной модификации сбора данных. Обработка элементов в коллекции представляет собой обычную операцию, с которой вы, скорее всего, столкнетесь. Забудьте о традиционном способе действий for-loop
люблю (let i=0; i < value.length; i+
+).
Быстрое ознакомление, использование
const
вfor-loop
даст вам ошибку. Причина состоит в том, что он повторно объявляет значение во время каждого выполнения.i
меняется с помощьюi++
. Итак, когда вы думаете об использовании любогоconst
илиlet
, спросите себя – будет ли это значение повторно объявлено? Если ответ таков даследовать заlet
и если нетследовать заconst
. Подробнее.
Скажем, вы хотите показать список продуктов и классифицировать, отфильтровывать, искать, изменять или обновлять коллекцию. Или, возможно, вы хотите выполнить быстрые вычисления, такие как сумма, умножение и т.д. Какой оптимальный способ добиться этого?
Может, тебе не нравится стрелковые функции, вы не хотите тратить много времени на изучение чего-то нового, или они просто неактуальны для вас. Не беспокойтесь, вы не одиноки. Я покажу вам, как это делается в ES5 (функциональное замедление) и в ES6 (функции со стрелками).
Берегись: Функции со стрелками и объявления/выражения функций не эквивалентны и не могут быть заменены вслепую. Имейте в виду, что this
ключевое слово работает по-разному между ними.
Методы, которые мы рассмотрим:
- Оператор распространения
- для… итератора
- включает()
- некоторые()
- каждый()
- фильтр()
- map()
- уменьшить()
Если вы хотите стать лучшим веб-разработчиком, открыть собственный бизнес, обучать других или улучшить свои навыки разработки, я еженедельно буду публиковать советы и рекомендации по новейшим языкам веб-разработки.
1. Оператор распространения
Оператор распространения расширяется массив на его элементы. Его можно использовать для объектных литералов.
Почему я должен использовать это?
- Это простой и быстрый способ показать элементы массива.
- Он работает для массивов и объектов
- Это быстрый и интуитивно понятный способ передачи аргументов
- Для этого нужно только три точки…
пример:
Скажем, вы хотите показать список излюбленных блюд без создания функции цикла. Используйте такой оператор распространения:

2. для…итератора
The for...of
оператор циклирует/перебирает коллекцию и дает вам возможность изменять конкретные элементы. Он заменяет обычный способ выполнения а for-loop
.
Почему я должен использовать это?
- Это простой способ добавить или обновить элемент
- Для выполнения вычислений (сумма, умножение и т.п.)
- При использовании условных операторов (if, while, switch и т.п.)
- Приводит к чистому и читабельному коду
пример:
Скажем, у вас есть панель инструментов, и вы хотите показать все инструменты внутри нее. The for...of
итератор делает это просто.

3. Метод Includes().
The includes()
Метод используется, чтобы проверить, существует ли определенная строка в коллекции, и возвращает true
или false
. Имейте в виду, что он чувствителен к регистру: если элемент в коллекции есть SCHOOL
а вы ищите school
оно вернется false
.
Почему я должен использовать это?
- Построить простой поисковый функционал
- Это интуитивно понятный подход, чтобы определить, существует ли строка
- Он использует условные операторы для изменения, фильтрации и т.п.
- Приводит к читабельному коду
пример:
Скажем, по какой-либо причине вы не знаете, какие машины у вас есть в гараже, и вам нужна система, чтобы проверить, существует ли вам нужный автомобиль или нет. includes()
в помощь!

4. Метод Some().
The some()
метод проверяет, существуют ли некоторые элементы в массиве, и возвращает true
или false
. Это несколько похоже на концепцию includes()
метод, за исключением того, что аргумент является функцией, а не строчкой.
Почему я должен использовать это?
- Это уверенно некоторые предмет проходит тест
- Он выполняет условные операторы с помощью функций
- Сделайте свой код декларативным
- Некоторые достаточно хороши
пример:
Скажем, вы владелец клуба, и вам безразлично, кто входит в клуб. Но некоторых не пускают, потому что они слишком много пили (мое творчество в лучшем виде). Просмотрите различия между ES5 и ES6 ниже:
ES5:

ES6:

5. Метод Every().
The every()
метод берет массив, проверяет каждый предмет и возвращает true
или false
. Такая же концепция, как some()
. Кроме того, каждый элемент должен удовлетворять условному оператору, иначе он вернется. false
.
Почему я должен использовать это?
- Это гарантирует каждый предмет проходит тест
- Вы можете выполнять условные операторы с помощью функций
- Сделайте свой код декларативным
пример:
Последний раз ты разрешил some()
несовершеннолетних студентов, чтобы войти в клуб, кто-то сообщил об этом и полиция вас поймала. В этот раз вы не позволите этому произойти, и вы в этом убедитесь всем превышает возрастную границу с every()
оператор.
ES5

ES6

6. Метод Filter().
The filter()
метод создает новый массив со всеми проходящими тестами элементами.
Почему я должен использовать это?
- Так вы сможете избежать смены основного массива
- Это позволяет отфильтровать элементы, которые вам не нужны
- Дает вам более читаемый код
пример:
Скажем, вы хотите вернуть только цены, которые превышают или равны 30. Отфильтруйте все остальные цены…
ES5

ES6

7. способ Map().
The map()
метод подобен filter()
метод с точки зрения возвращения нового массива. Однако единственное отличие состоит в том, что он используется для смены элементов.
Почему я должен использовать это?
- Это позволяет избежать внесения изменений в основной массив.
- Вы можете изменить нужные элементы
- Дает вам более читаемый код
пример:
Предположим, у вас есть список товаров с ценами. Вашему менеджеру нужен список, чтобы показать новые цены после налогообложения 25%. The map()
метод может помочь вам.
ES5

ES6

8. Метод Reduce().
The reduce()
метод можно использовать для превращения массива в нечто иное, которое может быть целым числом, объектом, цепочкой обещаний (последовательное выполнение обещаний) и т.д. По практическим соображениям простым вариантом использования было бы подытожить список целых чисел. Короче говоря, он «сводит» весь массив к одному значению.
Почему я должен использовать это?
- Выполните расчеты
- Вычислите значение
- Подсчитать дубликаты
- Сгруппируйте объекты по свойствам
- Выполняйте обещания последовательно
- Это быстрый способ выполнить вычисление
пример:
Скажем, вы хотите узнать свои общие затраты за неделю. Используйте reduce()
чтобы получить это значение.
ES5

ES6

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