В этой серии статей я хотел бы познакомить вас с устоявшимися, но часто сложными для начинающих концепциями JavaScript. Давайте выясним, почему они необходимы для повседневной работы разработчика, разбив их на простые для понимания описания. В первой части я начну с методов массива JavaScript.
Для новичков в JavaScript методы массивов (особенно некоторые специфические) — не самая простая тема для понимания, потому что все они на первый взгляд кажутся очень похожими, но на самом деле служат разным целям. Нужно тщательно проверять, когда что использовать. На данный момент их так много в JavaScript (Mozilla Developer Network перечисляет всего 40), что более вероятно, что вы перепутаете их предполагаемое использование. Далее я сделаю все возможное, чтобы сделать некоторые из них более понятными, и у вас больше не будет сомнений в том, когда какие из них использовать. Добавьте эту статью в закладки, если она окажется вам полезной.
Что такое методы массива?
Цель методов массива в целом состоит в том, чтобы выполнить определенную операцию над массивом. Массив можно сравнить со списком, который имеет определенный порядок элементов внутри него. Этим порядком можно управлять с помощью некоторых более простых методов работы с массивами, таких как следующие (о которых тоже стоит знать):
- push(): добавляет элемент, указанный в качестве аргумента, в конец массива.
- unshift(): добавляет элемент, указанный в качестве аргумента, в начало массива.
- pop(): удаляет последний элемент массива и возвращает его.
- shift(): удаляет первый элемент массива и возвращает его.
- reverse(): инвертирует последовательность элементов массива.
Массивы могут быть связаны с другими методами, которые немного сложнее. Когда эти методы получают функцию обратного вызова в качестве аргумента, они также называются «функциями более высокого порядка». Все методы, о которых я подробно расскажу в этой серии, действительно являются функциями высшего порядка, но вы не должны путать их и их поведение с более простыми, которые я перечислил выше.
Например, вы можете столкнуться с необходимостью преобразовать все элементы массива каким-либо образом или отфильтровать элементы массива на основе определенного условия. Эти операции можно выполнить с помощью двух различных функций высшего порядка. Используя их, вы можете избежать написания циклов, как в старые времена (for, while или do-while-loops), для перебора элементов массива и выполнения желаемой операции над каждым элементом.
В этой первой части серии статей о методах массивов в JavaScript я расскажу о методе map(), методе forEach(), методе some( ) и метод reduce().
"карта()"
Вероятно, наиболее часто используемая и любимая операция разработчиков массивов в их повседневной работе — это сопоставление заданного массива и создание нового массива. Это полезный инструмент для согласованного изменения элементов массива.
Разработчику внешнего интерфейса часто приходится обрабатывать данные, поступающие от API, в виде массива, содержащего множество объектов. Если все эти объекты выглядят одинаково, т. е. все они имеют одинаковые свойства, вы можете получить доступ к ним или только к тем, которые вам нужны, путем сопоставления объектов. Допустим, мы хотим использовать данные из этого массива, содержащего известных персонажей «Звездных войн»:
Теперь нам не нужна вся информация из массива символов, а только имя каждого символьного объекта, который мы хотим установить в качестве параметров в раскрывающемся списке выбора. Ниже показана эта операция внутри функционального компонента React:
Это следует соглашению, что имя переменной массива, хотя и содержит много элементов массива, является множественным числом, в то время как фактический элемент, который проходит через цикл, имеет имя в единственном числе. Теперь это даст нам выпадающее меню с различными именами персонажей в качестве вариантов.
map(), как и большинство методов массива, принимает функцию обратного вызова, которая может иметь 3 параметра:
- текущий элемент массива/элемент массива, который мы отображаем
- индекс этого элемента массива
- массив в целом
Часто вы будете использовать только текущий параметр элемента, но хорошо знать, что вы действительно можете получить доступ к его положению в массиве, а также к самому массиву и что-то делать с ними в каждом цикле.
"для каждого()"
Одним из самых простых, но наиболее мощных методов работы с массивами в повседневной жизни является метод forEach, также называемый циклом forEach. Она работает почти как функция карты, так как выполняет функцию для каждого элемента массива. В любом случае, он не возвращает новый массив, как функция карты, а изменяет массив на месте.
Давайте снова возьмем в качестве примера список персонажей «Звездных войн». Каждый из них может быть выведен циклом forEach, а также только их имена. Но давайте сначала представим, как мы будем печатать имена с помощью стандартного цикла for:
Вы также можете использовать метод forEach() для перебора массива символов и вывода каждого из них следующим образом:
Видите, насколько короче и читабельнее он становится?
Или у вас также может быть массив чисел, представляющих цены товаров в корзине, и вы хотите рассчитать общую стоимость всех товаров. Вы можете использовать метод forEach() для циклического просмотра массива и добавления цен каждого элемента, как показано в следующем примере.
Но есть лучший и более интуитивно понятный способ суммирования цен, который заключается в использовании метода reduce() (который я покажу вам чуть позже).
"некоторый()"
Функция some немного отличается от двух других методов, которые я вам уже показывал. Он не перебирает массив и не изменяет существующий массив (как это делает forEach), а также не возвращает совершенно новый массив (как это делает функция карты). Он просто возвращает true или false в зависимости от того, проходит ли хотя бы один элемент в массиве тест, реализованный предоставленной функцией обратного вызова.
Он должен возвращать правдивые выходные данные, указывающие на то, что один или несколько элементов массива прошли тест, и ложное значение, если ни один элемент не прошел проверку. Это означает, что сначала он просматривает весь массив, чтобы найти некоторыйэлемент массива, соответствующий условию. Это может быть полезно в функции, где вам нужно проверить, есть ли в онлайн-корзине хотя бы один товар стоимостью более 100 евро, и если да, то предоставить скидку покупателю.
"уменьшать()"
Метод reduce() сводит элементы массива к одному значению, применяя одну и ту же функцию к «before-status» в каждом раунде цикла. Это удобный способ выполнить вычисление элементов массива и получить единственный результат.
Метод сокращения является более декларативным, чем цикл for, и его можно использовать с const вместо let. Кроме того, он не изменяет исходный массив, а возвращает новый массив. Это может помочь, когда мы хотим вернуть значение в конце какой-либо функции, и нам нужно сохранить результат каждой итерации после каждого цикла для следующего цикла и так далее и тому подобное.
Сокращение принимает два аргумента:
- Первая — это функция обратного вызова, которая снова имеет два параметра, из которых первый называется «аккумулятором». Как следует из этого термина, аккумулятор накапливает вещи и временно хранит их. Второйаргумент, предоставляемый обратному вызову, обозначает текущее значение, то есть значение элемента, на котором в данный момент выполняется итерация.²
- Второй параметр внутри функции сокращения определяет начальную точку, с которой начинается накопление при первом запуске.
Итак, в предыдущем случае он возвращает совокупность всех элементов массива. В приведенном выше примере мы имеем дело с массивом объектов, которые все символизируют продукты с согласованным набором свойств. Для общей суммы корзины нам нужно только свойство цены каждого объекта. Отправной точкой, с которой мы считаем, является 0, к которому мы добавляем все существующие цены со всех объектов.
Если вы не установите активно второй аргумент в функции редукции, то есть начальную точку, вы увидите, что итерация начинается с первого значения в массиве.
«Реальная» полезность метода сокращения
JavaScript как язык Интернета полезен только тогда, когда его методы и функции приносят пользу нам на современных веб-сайтах. Один из наиболее очевидных случаев использования функции, подобной предыдущей, — это когда вам нужно рассчитать конечную цену в корзине или каком-либо инструменте калькулятора, где функция сокращения имеет аргумент начальной точки, равный 0, и добавляет все цены, перебирая массив товаров и их цены.
В следующий раз я познакомлю вас с другими методами работы с массивами, включая find(), sort() и filter().
Сноски:
¹ Функции высшего порядка — это функции, которые работают с другими функциями, либо получая их в качестве аргументов, либо возвращая в качестве вывода. Некоторые из отображаемых методов массива также получают функцию обратного вызова в качестве аргумента, которая выполняется для каждого из элементов массива.
² На самом деле внутри функции JavaScript есть еще третий и четвертый возможные параметры функции обратного вызова: индекс элемента массива, который вы просматриваете, и сам массив (но редко кто-то хочет использовать индекс , потому что часто они меняются в ходе разработки из-за добавления новых элементов в существующий массив).
Дальнейшее чтение:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce