Мы здесь! Часть 2 нашего блога Javascript Array Methods. В прошлый раз мы говорили о методах добавления и удаления элементов из массива, а теперь немного поинтереснее. Лично я использовал все эти следующие методы много раз, они очень важны для изучения и невероятно полезны в повседневной работе с Javascript.
Мы будем следовать тому же формату, что и в прошлый раз, объяснив метод, а затем приведя подробный пример, чтобы понять его цель.
На этот раз для наших примеров мы будем использовать массив чисел, а не фоэнтический алфавит НАТО, как в прошлый раз. Числам будет просто проще привести примеры с этими методами.
const exampleArray = [144, 26, 1001, 204, 18, 29, 13, 1]
Давайте приступим!
Карта
Во-первых, у нас есть карта. Что делает карта, так это то, что она берет массив и выполняет действие над каждым элементом массива, после чего возвращает новый массив (важно отметить, что карта не изменяет исходный массив!), с реализованными изменениями.
Давайте посмотрим на простой пример этого.
exampleArray.map(number => number + 10)
Итак, мы берем наш exampleArray и вызываем на нем map. Теперь важные вещи происходят в скобках (которые известны как функция callback). Сначала мы берем currentValue , эту переменную можно назвать как угодно, но важно отметить, что, поскольку map перемещается по массиву и выполняет действия над каждым из элементов, эта currentValue будет каждым элементом, поэтому мы следует назвать это что-то описательное. Поскольку каждый элемент массива является числом, мы называем эту переменную number.
Затем у нас есть стрелка =>, которая в основном говорит: «Теперь я хочу, чтобы это произошло», и мы переходим к следующему шагу, который берет наши currentValue или number и добавляет к ним + 10.
В конце всего этого мы должны получить новый массив в качестве возвращаемого значения, где ко всем элементам было добавлено 10.
// [154, 36, 1011, 214, 28, 39, 23, 11]
Фильтр
Фильтр великолепен, вы обнаружите, что он часто используется, как и карта, и я думаю, вы поймете, почему.
Цель фильтра состоит в том, чтобы вызвать массив и установить условие (которое может быть либо истинным, либо ложным), и каждый элемент, удовлетворяющий этому условию, будет возвращен в новом массиве (опять же, помните, как и Map, это возвращает новый массив, это не влияет на старый).
exampleArray.filter(number => number > 30)
Таким образом, в этом примере у нас такая же настройка со значением обратного вызова, за исключением того, что код с другой стороны стрелки => является условием, которое проверяется на истинность или ложность. В этом случае он проверяет, какие элементы в массиве больше 30. В этом случае единственными числами выше 30 являются 144, 1001 и 204. Таким образом, если мы сделали это правильно, возвращаемое значение должно быть массивом с только эти цифры. Посмотрим:
// [144, 1001, 204]
Это сделало это!
Найти
Поиск — это последний метод в том, что я считаю чем-то вроде трио с Картой и Фильтром. Этот метод возвращает определенный элемент массива. Как и фильтр, он соответствует определенному условию, но в отличие от фильтра, который возвращает массив из всех элементов, соответствующих условию в callback, поиск возвращает только первый элемент. чтобы выполнить условие. Давайте воспользуемся тем же примером, что и выше, но на этот раз с функцией «Найти».
exampleArray.find(number => number > 30)
Так что же это возвращает? В прошлый раз мы получили массив [144, 1001, 204], верно?
// 144
Ага! Это первый элемент, удовлетворяющий этому условию, и это все, что мы получаем в ответ. Идеально.
Включает
Включает довольно просто. Все, что он делает, — это проверяет, содержит ли массив определенное значение в качестве одного из своих элементов. При запуске он возвращает либо истинное значение (если массив включает значение), либо ложное значение (если массив не включает значение). Увидеть ниже
exampleArray.includes(204) // true
Сразу после того, как мы вызвали «Включает», следующее значение в круглых скобках, которое в данном случае равно 204, — это то, на что мы проверяем массив, чтобы увидеть, содержит ли он это значение. Вы можете видеть в приведенном выше примере, что это так, поэтому мы получаем возвращаемое значение true. Но как насчет числа, которого нет в массиве?
exampleArray.includes(6008) // false
Мы получаем ложное возвращаемое значение, что совершенно верно, потому что в проверяемом нами массиве нет 6008.
Конкат
Наконец, давайте проверим Concat, сокращение от Concatenation. Конкатенация в основном просто означает действие по связыванию вещей, что и делает этот метод. Он объединяет два массива вместе и создает один массив. Давайте попробуем. Мы будем использовать наш пример из первой части, который, как вы помните, представляет собой строки, и пример из этой части, то есть числа. Просто для обзора:
const exampleArray = [144, 26, 1001, 204, 18, 29, 13, 1] const exampleArray2 = ["Alfa", "Bravo", "Whiskey", "Tango", "Foxtrot", "November", "Sierra", "X-Ray"]
Итак, теперь мы собираемся объединить эти два массива в один, как сумасшедшие ученые!
exampleArray.concat(exampleArray2)
Итак, мы используем первый exampleArray и вызываем для него Concat, но затем используем второй массив в качестве аргумента. Есть надежда, что эти двое создадут единый массив, содержащий все элементы обоих. Посмотрим!
// [144, 26, 1001, 204, 18, 29, 13, 1, "Alfa", "Bravo", "Whiskey", "Tango", "Foxtrot", "November", "Sierra", "X-Ray"]
Красивое детище массивов Мама и Папа!
И с новыми начинаниями новой жизни подходит к концу этот блог о методах массивов Javascript.
Надеюсь, вы узнали что-то новое о методах массивов в Javascript или просто получили удовольствие от чтения. До скорого!
