Эти методы JavaScript повысят ваши навыки всего за несколько минут

1656624737 eti metody javascript povysyat vashi navyki vsego za neskolko minut

Большинство программ, которые мы создаем сегодня, требуют определенной модификации сбора данных. Обработка элементов в коллекции представляет собой обычную операцию, с которой вы, скорее всего, столкнетесь. Забудьте о традиционном способе действий 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. Оператор распространения

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

Почему я должен использовать это?

  • Это простой и быстрый способ показать элементы массива.
  • Он работает для массивов и объектов
  • Это быстрый и интуитивно понятный способ передачи аргументов
  • Для этого нужно только три точки…

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

1*NPgk0vqyWiXXkNDPMbxujA

2. для…итератора

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

Почему я должен использовать это?

  • Это простой способ добавить или обновить элемент
  • Для выполнения вычислений (сумма, умножение и т.п.)
  • При использовании условных операторов (if, while, switch и т.п.)
  • Приводит к чистому и читабельному коду

пример:
Скажем, у вас есть панель инструментов, и вы хотите показать все инструменты внутри нее. The for...of итератор делает это просто.

1*kjQYvjeeHUuP8inZYqjJVg
для… оператора

3. Метод Includes().

The includes() Метод используется, чтобы проверить, существует ли определенная строка в коллекции, и возвращает true или false. Имейте в виду, что он чувствителен к регистру: если элемент в коллекции есть SCHOOLа вы ищите schoolоно вернется false.

Почему я должен использовать это?

  • Построить простой поисковый функционал
  • Это интуитивно понятный подход, чтобы определить, существует ли строка
  • Он использует условные операторы для изменения, фильтрации и т.п.
  • Приводит к читабельному коду

пример:
Скажем, по какой-либо причине вы не знаете, какие машины у вас есть в гараже, и вам нужна система, чтобы проверить, существует ли вам нужный автомобиль или нет. includes()в помощь!

1*m1InU7VDxdfpxMXuV2A1MA
метод include() с функцией стрелки

4. Метод Some().

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

Почему я должен использовать это?

  • Это уверенно некоторые предмет проходит тест
  • Он выполняет условные операторы с помощью функций
  • Сделайте свой код декларативным
  • Некоторые достаточно хороши

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

ES5:

1*-5YnlNy48wi0FHnIG3bXDg
метод some().

ES6:

1*pmaXrKpg5vI__WwztfATGg
Метод some() с функцией стрелки

5. Метод Every().

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

Почему я должен использовать это?

  • Это гарантирует каждый предмет проходит тест
  • Вы можете выполнять условные операторы с помощью функций
  • Сделайте свой код декларативным

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

ES5

1*DNQqzRJ_K01ognj3_c8HqQ
метод every().

ES6

1*avukLSBlIG1ycSzoHLMOYA
Метод every() с функцией стрелки

6. Метод Filter().

The filter() метод создает новый массив со всеми проходящими тестами элементами.

Почему я должен использовать это?

  • Так вы сможете избежать смены основного массива
  • Это позволяет отфильтровать элементы, которые вам не нужны
  • Дает вам более читаемый код

пример:
Скажем, вы хотите вернуть только цены, которые превышают или равны 30. Отфильтруйте все остальные цены…

ES5

1*O9EhGZRxC1DWan0822fKvQ
метод filter().

ES6

1*1C22z5zvw_Gw_SiJnLuTig
метод filter() с функцией стрелки

7. способ Map().

The map() метод подобен filter() метод с точки зрения возвращения нового массива. Однако единственное отличие состоит в том, что он используется для смены элементов.

Почему я должен использовать это?

  • Это позволяет избежать внесения изменений в основной массив.
  • Вы можете изменить нужные элементы
  • Дает вам более читаемый код

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

ES5

1*iIOcN4rc6r-55YWrHQVNHw
метод map().

ES6

1*s2ePAwDuw-qJOju7WAm9Uw
метод map() с функцией стрелки

8. Метод Reduce().

The reduce() метод можно использовать для превращения массива в нечто иное, которое может быть целым числом, объектом, цепочкой обещаний (последовательное выполнение обещаний) и т.д. По практическим соображениям простым вариантом использования было бы подытожить список целых чисел. Короче говоря, он «сводит» весь массив к одному значению.

Почему я должен использовать это?

  • Выполните расчеты
  • Вычислите значение
  • Подсчитать дубликаты
  • Сгруппируйте объекты по свойствам
  • Выполняйте обещания последовательно
  • Это быстрый способ выполнить вычисление

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

ES5

1*OX1oPjVVoPXfIsAqHD3TTQ
метод reduce().

ES6

1*DGa7HZwy40o71B4_ICP6kQ
Метод reduce() с функцией стрелки

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *