Рубрики
Без рубрики

Понимание методов массива: фильтр (), карта (), foreach ()

Массивы являются одним из самых популярных типов данных, используемых в JavaScript, поскольку у них есть различные методы, которые … Теги с JavaScript, начинающими, WebDev, учебником.

Массивы являются одним из самых популярных типов данных, используемых в JavaScript, поскольку у них есть различные методы, которые облегчают использование.

В этой статье я расскажу о трех популярных методах массива; Фильтр () Метод, карта () Метод и foreach () Метод, и я покажу, как они используются.

фильтр()

Фильтр () Метод в основном используется для возврата подмножества массива, который соответствует определенному условию.

Как его использовали

array.filter((currentValue, index, arr) => {
    // condition
})
  • Фильтр () Метод принимает функцию обратного вызова.
  • Обратный вызов принимает три позиционных аргумента.
    • Первый – это текущая стоимость : что указывает текущий элемент в массиве, который зацикливается. CurrentValue Требуется аргумент, то есть значение должно быть передано в функцию обратного вызова.
    • Второй – индекс : Что указывает индекс текущего элемента в массиве, это необязательный аргумент.
    • Третий – настоящее Массив который . Фильтр () Применяется метод, это необязательный аргумент.
  • Обратный вызов принимает в состоянии тестирования всех элементов в массиве и значения возврата на основе условия.

Пример

Вернуть даже номера из массива номеров

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.filter(item=> item % 2 == 0)
// result => [2, 4, 6, 8, 10]

Как это работает

  • Фильтр () Способ петлей по каждому элементу в массиве.
  • Он проверяет, проходит ли элемент заданного условия; Если у него остаток после разделения двух в этом случае.
  • Он передает его на новый массив.
  • Когда он проверил все элементы, он возвращает новый массив, который содержит элементы, которые проходят установленные условия.

Примечание:

  • Фильтр () Способ не мутирует массив.
  • Метод возвращает новый массив со всеми элементами, которые передавали набор условий.

карта()

карта () Способ позволяет нам циклировать каждый элемент массива и выполнять различные операции на них. Он возвращает новый массив с новыми значениями элементов после выполнения операций на них.

Как его использовали

array.map((currentValue, index, arr) => {
    // operation
})
  • карта () Метод принимает функцию обратного вызова.
  • Обратный вызов принимает три позиционных аргумента.
    • Первый – это текущая стоимость : что указывает текущий элемент в массиве, который зацикливается. CurrentValue Требуется аргумент, то есть значение должно быть передано в функцию обратного вызова.
    • Второй – индекс : Что указывает индекс текущего элемента в массиве, это необязательный аргумент.
    • Третий – настоящее Массив который . карта () Применяется метод, это необязательный аргумент.
  • Функция обратного вызова позволяет нам выполнять различные операции на элементах в массиве.

Пример

Верните все тексты в массиве в верхнем регистре

let arr = ['Dog', 'Cat', 'HORSE', 'elEPHANT']
arr.map(item=> item.toUpperCase())
// result => ['DOG', 'CAT', 'HORSE', 'ELEPHANT']

Как это работает

  • карта () Способ петлей по каждому элементу в массиве.
  • Он выбирает каждый элемент и выполняет указанную операцию на нем; В этом случае он преобразует каждый элемент в верхний регистр.
  • Он передает его на новый массив.
  • Когда он работал на всех элементах, он возвращает новый массив, который содержит все элементы в верхнем регистре.

Примечание:

  • карта () Способ не мутирует массив.
  • Метод возвращает новый массив с результатами работы в функции обратного вызова.

для каждого()

foreach () Метод в основном используется для петли по каждому из предметов в массиве. Он выполняет представленную функцию один раз для каждого элемента массива. foreach () не имеет возврата, он возвращает undefined Отказ

Как его использовали

array.forEach((currentValue, index, arr) => {
    console.log(currentValue)
})
  • foreach () Метод принимает функцию обратного вызова.
  • Обратный вызов принимает три позиционных аргумента.
    • Первый – это текущая стоимость : что указывает текущий элемент в массиве, который зацикливается. CurrentValue Требуется аргумент, то есть значение должно быть передано в функцию обратного вызова.
    • Второй – индекс : Что указывает индекс текущего элемента в массиве, это необязательный аргумент.
    • Третий – настоящее Массив который . foreach () Применяется метод, это необязательный аргумент.
  • Функция обратного вызова позволяет нам выполнять различные операции на элементах в массиве.

Пример

Как альтернатива оф петля

let animals = ['Dog', 'Cat', 'HORSE', 'elEPHANT']

// for of
for(let animal of animals){
    console.log(animal)
}

// forEach
animals.forEach((animal)=>{
    console.log(animal)
})

Как это работает

  • foreach () Способ петлей по каждому элементу в массиве.
  • Он выбирает каждый элемент в массиве и входит в систему на консоль.

Примечание:

  • foreach () Способ не мутирует массив.
  • Метод возвращает undefined Отказ

Вывод

Я надеюсь, что вы смогли узнать что-то новое о карта () , Фильтр () и foreach () метод.

Если у вас есть какие-либо вопросы, и или больше пониманий в теме, пожалуйста, отбросьте сообщение для меня в разделе «Комментарий» ниже.

Ресурсы и дальнейшее чтение

Оригинал: “https://dev.to/holajuwon/understanding-array-methods-filter-map-foreach-3367”

Читайте ещё по теме: