Вот как можно лучше использовать массивы JavaScript

1656553814 vot kak mozhno luchshe ispolzovat massivy javascript

от pacdiv

1*IZCJKz3761vChU1VFHfzkw
Фото Бена Уайта на Unsplash

Читайте быстро, обещаю. В последние несколько месяцев я заметил, что те же четыре ошибки постоянно возвращались из-за запросов на выписку, которые я проверил. Я тоже публикую эту статью, потому что я сам совершил все эти ошибки! Давайте просмотрим их, чтобы убедиться, что мы правильно используем методы массива!

Замена Array.indexOf на Array.includes

«Если вы ищете что-то в своем массиве, используйте Array.indexOf.» Я помню, как читал такое предложение на своем курсе при изучении JavaScript. Предложение вполне верно, без сомнения!

Array.indexOf «возвращает первый индекс, по которому можно найти данный элемент», – говорится в документации MDN. Итак, если мы используем возвращенный индекс позже в нашем коде, и Array.indexOf является решением.

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

Использование Array.find вместо Array.filter

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

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

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

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

Замена Array.find на Array.some

Я признаю, что совершал эту ошибку много раз. Затем хороший друг сказал мне проверить MDN документацию для лучшего способа. Вот что: это очень похоже на наш случай Array.indexOf/Array.includes выше.

В предыдущем случае мы видели, что Array.find требует обратного вызова в качестве аргумента и возвращает элемент. Является ли Array.find лучшим решением, если нам нужно знать, содержит ли наш массив значение или нет? Возможно, нет, потому что возвращает значение, а не логическое значение.

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

Использование Array.reduce вместо объединения Array.filter и Array.map

Давайте посмотрим в глаза, Array.reduce непросто понять. Это верно! Но если мы запустим Array.filter, то Array.map кажется, что мы чего-то упускаем, не правда ли?

Я имею в виду, что здесь мы дважды просматриваем массив. Первый раз для фильтрации и создания более короткого массива, второй раз для создания нового массива (опять!), содержащего новые значения на основе тех, которые мы получили от Array.filter. Чтобы получить наш новый массив, мы использовали два метода Array. Каждый метод имеет собственную функцию обратного вызова и массив, который мы не сможем использовать позже, который создает Array.filter.

Чтобы избежать низкой производительности на эту тему, я посоветую вместо этого использовать Array.reduce. Тот же результат, лучший код! Array.reduce позволяет фильтровать и добавлять удовлетворительные элементы в накопитель. В качестве примера этот аккумулятор может быть числом для увеличения, объектом для заполнения, строкой или массивом для объединения.

В нашем случае, поскольку мы используем Array.map, я рекомендую использовать Array.reduce с массивом для объединения в качестве аккумулятора. В следующем примере в зависимости от значения окрмы добавим его в наш аккумулятор или оставим этот аккумулятор как есть.

Это!

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

PS: Вы можете подписаться на меня в Twitter здесь.

Примечание: Как упоминали malgosiastp и David Piepgrass в комментариях, проверьте поддержку перед использованием Array.find и Array.includes, которые на данный момент не поддерживаются Internet Explorer.

Добавить комментарий

Ваш адрес email не будет опубликован.