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

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

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

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

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

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

1. Оператор распространения
2. для… итератора
3. включает()
4. некоторые()
5. каждый()
6. фильтр()
7. map()
8. уменьшить()

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

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, где я публикую соответствующие советы и рекомендации по веб-разработке.